从零开始学Vue.js

Vue.js是一套用于构建用户界面的渐进式框架。与其他重量级框架不同的是，它只关注视图层，采用自底向上增量开发的设计。Vue.js的目标是通过尽可能简单的API实现相应的数据绑定和组合的视图组件。它不仅容易上手，还非常容易与其他库或已有项目进行整合。本书内容本书包含了学习Vue.js编程开发的各类知识，全书共分为4篇18章内容，结构如下。第1篇：基础知识篇。本篇主要对Vue.js的基础知识进行详解，包括Vue.js简介、基础特性、条件判断、列表渲染、计算属性、监听属性等内容。第2篇：核心技术篇。本篇主要讲解Vue.js的核心技术，包括样式绑定、事件处理、表单控件绑定、自定义指令、组件、过渡等内容。第3篇：高级应用篇。本篇主要包括渲染函数、常用插件、单页Web应用、状态管理等内容。第4篇：项目开发篇。学习编程的终目的是进行开发，解决实际问题，本篇通过51购商城和仿豆瓣电影评分这两个不同类型的项目，讲解如何使用所学的Vue.js知识开发项目。本书特点知识讲解详尽细致。本书以零基础入门学员为对象，力求将知识点划分得更加细致，讲解更加详细，使读者能够学必会，会必用。案例侧重实用有趣。通过实例是好的编程学习方式，本书在讲解知识时，通过有趣、实用的案例对所讲解的知识点进行解析，让读者不只学会知识，还能够知道所学知识的真实使用场景。思维导图总结知识。每章后都使用思维导图总结本章重点知识，使读者能一目了然回顾本章知识点，以及重点需要掌握的知识。配套高清视频讲解。本书资源包中提供了同步高清教学视频，读者可以根据这些视频更快速地学习，感受编程的快乐和成就感，增强进一步学习的信心，从而快速成为编程高手。读者对象初学编程的自学者 编程爱好者大中专院校的老师和学生 相关培训机构的老师和学员毕业设计的学生 初、中、高级程序开发人员程序测试及维护人员 参加实习的“菜鸟”程序员读者服务为了方便解决本书疑难问题，我们提供了多种服务方式，并由作者团队提供在线技术指导和社区服务，服务方式如下：√ 企业QQ：4006751066。√ QQ群：515740997。√ 服务电话：400/67501966，0431/84978981。本书约定开发环境及工具如下：√ 操作系统：Windows7、Windows 10等。√ 开发工具：WebStorm 2021.1。致读者本书由明日科技Vue.js程序开发团队组织编写，主要人员有王小科、申小琦、赵宁、李菁菁、何平、张鑫、周佳星、王国辉、李磊、赛奎春、杨丽、高春艳、冯春龙、张宝华、庞凤、宋万勇、葛忠月等。在编写过程中，我们以科学、严谨的态度，力求精益求精，但不足之处在所难免，敬请广大读者批评指正。感谢您阅读本书，零基础编程，一切皆有可能，希望本书能成为您编程路上的敲门砖。祝读书快乐！编著者

本书从零基础读者的角度出发，通过通俗易懂的语言、丰富多彩的实例，循序渐进地让读者在实践中学习Vue.js编程知识，并提升自己的实际开发能力。全书共分为4篇18章，内容包括Vue.js简介、基础特性、条件判断、列表渲染、计算属性、监听属性、样式绑定、事件处理、表单控件绑定、自定义指令、组件、过渡、渲染函数、常用插件、单页Web应用、状态管理、51购商城、仿豆瓣电影评分等。书中知识点讲解细致，侧重介绍每个知识点的使用场景，涉及的代码给出了详细的注释，可以使读者轻松领会Vue.js程序开发的精髓，快速提高开发技能。同时，本书配套了大量教学视频，扫码即可观看，还提供所有程序源文件，方便读者实践。本书适合Vue.js初学者、前端开发工程师等自学使用，也可用作高等院校相关专业的教材及参考书。

本书从零基础读者的角度出发，通过通俗易懂的语言、丰富多彩的实例，循序渐进地让读者在实践中学习Vue.js编程知识，并提升自己的实际开发能力。全书共分为4篇18章，内容包括Vue.js简介、基础特性、条件判断、列表渲染、计算属性、监听属性、样式绑定、事件处理、表单控件绑定、自定义指令、组件、过渡、渲染函数、常用插件、单页Web应用、状态管理、51购商城、仿豆瓣电影评分等。书中知识点讲解细致，侧重介绍每个知识点的使用场景，涉及的代码给出了详细的注释，可以使读者轻松领会Vue.js程序开发的精髓，快速提高开发技能。同时，本书配套了大量教学视频，扫码即可观看，还提供所有程序源文件，方便读者实践。本书适合Vue.js初学者、前端开发工程师等自学使用，也可用作高等院校相关专业的教材及参考书。

第1篇　基础知识篇

第1章　Vue.js简介    2 视频讲解：8节，28分钟

1.1  Vue.js概述    3

1.1.1  什么是Vue.js    3

1.1.2  Vue.js的特性    3

1.2  Vue.js的安装    4

1.2.1  直接下载并引入    4

1.2.2  使用CDN方法    5

1.2.3  使用NPM方法    5

1.3  Vue.js的开发模式    5

1.4  开发工具WebStorm简介    6

1.4.1  WebStorm的下载    6

1.4.2  WebStorm的安装    7

1.5  创建个Vue实例    9

[实例1.1]  输出“Hello Vue.js”    9

本章知识思维导图    12

第2章  基础特性    13 视频讲解：7节，61分钟

2.1  Vue实例及选项    14

2.1.1  挂载元素    14

2.1.2  数据    14

2.1.3  方法    15

2.1.4  生命周期钩子函数    16

2.2  数据绑定    17

2.2.1  插值    17

[实例2.1]  插入文本    17

[实例2.2]  插入HTML内容    18

[实例2.3]  为元素设置样式    18

[实例2.4]  为图片绑定属性    20

[实例2.5]  获取QQ邮箱地址中的QQ号    21

2.2.2  过滤器    21

[实例2.6]  获取当前的日期、星期和时间    22

[实例2.7]  截取新闻标题    23

2.2.3  指令    25

本章知识思维导图    26

第3章  条件判断    27 视频讲解：7节，34分钟

3.1  v/if指令    28

3.1.1  基本用法    28

3.1.2  在<template>元素中使用v/if    28

3.2  v/else指令    29

[实例3.1]  判断2021年2月份的天数    29

3.3  v/else/if指令    30

[实例3.2]  判断空气质量状况    30

3.4  应用key属性管理可复用的元素    31

3.5  v/show指令    33

3.5.1  基本用法    33

[实例3.3]  切换图片的显示和隐藏    33

3.5.2  v/if和v/show的比较    34

本章知识思维导图    34

第4章  列表渲染    35 视频讲解：6节，52分钟

4.1  应用v/for指令遍历数组    36

4.1.1  基本用法    36

[实例4.1]  输出省份、省会以及旅游景点信息    37

4.1.2  在<template>元素中使用v/fo/ 37

[实例4.2]  输出网站导航菜单    38

4.1.3  数组更新检测    38

[实例4.3]  输出2020年内地电影票房排行榜前十名    39

4.2  应用v/for指令遍历对象    41

4.2.1  基本用法    41

4.2.2  向对象中添加属性    43

4.3  应用v/for指令遍历整数    44

[实例4.4]  输出九九乘法表    44

本章知识思维导图    46

第5章  计算属性    47 视频讲解：3节，28分钟

5.1  基本用法    48

5.1.1  什么是计算属性    48

5.1.2  计算属性的应用    48

[实例5.1]  统计购物车中的商品总价    49

5.2  getter和sette/ 50

5.2.1  gette/ 50

5.2.2  sette/ 51

5.3  计算属性缓存    52

本章知识思维导图    53

第6章  监听属性    54 视频讲解：3节，19分钟

6.1  基本用法    55

6.1.1  什么是监听属性    55

6.1.2  监听属性的应用    55

[实例6.1]  实现汇率换算    56

6.2  deep选项    56

6.3  计算属性和监听属性的比较    57

本章知识思维导图    58

第2篇　核心技术篇

第7章  样式绑定    60 视频讲解：4节，38分钟

7.1  class属性绑定    61

7.1.1  对象语法    61

[实例7.1]  为书名添加颜色    62

[实例7.2]  以垂直方式从右向左显示文本    65

7.1.2  数组语法    66

7.2  内联样式绑定    68

7.2.1  对象语法    68

[实例7.3]  为搜索框绑定样式    69

[实例7.4]  竖向导航菜单    70

7.2.2  数组语法    71

本章知识思维导图    73

第8章  事件处理    74 视频讲解：6节，38分钟

8.1  事件监听    75

8.1.1  使用v/on指令    75

[实例8.1]  统计单击按钮的次数    75

8.1.2  事件处理方法    75

[实例8.2]  动态改变页面的背景颜色    76

[实例8.3]  动态改变图片透明度    77

[实例8.4]  为图片添加和去除边框    78

8.1.3  使用内联JavaScript语句    79

8.1.4  实战应用    80

[实例8.5]  二级联动菜单    80

8.2  事件处理中的修饰符    82

8.2.1  事件修饰符    82

8.2.2  按键修饰符    83

[实例8.6]  按下回车键自动切换焦点    84

本章知识思维导图    86

第9章  表单控件绑定    87 视频讲解：13节，95分钟

9.1  绑定文本框    88

9.1.1  单行文本框    88

[实例9.1]  搜索图书信息    88

9.1.2  多行文本框    89

[实例9.2]  限制用户输入字数    90

9.2  绑定复选框    91

9.2.1  单个复选框    91

[实例9.3]  切换注册按钮的状态    92

9.2.2  多个复选框    93

[实例9.4]  实现复选框的全选、反选和全不选操作    94

9.3  绑定单选按钮    95

[实例9.5]  模拟查询话费流量的功能    96

9.4  绑定下拉菜单    97

9.4.1  单选    97

[实例9.6]  更换页面主题    98

9.4.2  多选    99

[实例9.7]  选择职位    100

9.5  值绑定    101

9.5.1  单选按钮    101

9.5.2  复选框    101

9.5.3  下拉菜单    102

9.6  使用修饰符    103

9.6.1  lazy    103

9.6.2  numbe/ 103

9.6.3  trim    104

本章知识思维导图    105

第10章  自定义指令    106 视频讲解：7节，40分钟

10.1  注册指令    107

10.1.1  注册全局指令    107

10.1.2  注册局部指令    107

10.2  钩子函数    108

[实例10.1]为图片设置边框    110

[实例10.2]  通过下拉菜单设置文字大小    110

10.3  自定义指令的绑定值    111

10.3.1  绑定数值常量    111

10.3.2  绑定字符串常量    112

10.3.3  绑定对象字面量    112

10.4  实战应用    112

[实例10.3]  实现元素的随意拖动    113

本章知识思维导图    115

第11章  组件    116 视频讲解：21节，127分钟

11.1  注册组件    117

11.1.1  注册全局组件    11