从零开始学Vue.js

图书标准信息

• 作者 明日科技 编著
• 出版社 化学工业出版社
• 出版时间 2022-08
• 版次 1
• ISBN 9787122404992
• 定价 89.00元
• 装帧 平装
• 开本 16开
• 纸张 胶版纸
• 页数 319页
• 字数 510千字

【内容简介】

本书从零基础读者的角度出发，通过通俗易懂的语言、丰富多彩的实例，循序渐进地让读者在实践中学习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  在元素中使用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  在元素中使用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  注册全局组件    117

11.1.2  注册局部组件    119

11.2  数据传递    120

11.2.1  什么是Prop    120

11.2.2  Prop的大小写    121

11.2.3  传递动态Prop    121

[实例11.1]  输出影片信息    122

11.2.4  Prop验证    124

11.3  自定义事件    127

11.3.1  自定义事件的监听和触发    127

[实例11.2]  单击按钮放大文本    127

[实例11.3]  导航菜单效果    128

11.3.2  将原生事件绑定到组件    130

11.4  内容分发    130

11.4.1  基础用法    130

11.4.2  编译作用域    131

11.4.3  后备内容    132

11.4.4  具名插槽    133

[实例11.4]  输出简单商品信息    133

11.4.5  作用域插槽    135

[实例11.5]  输出人物信息列表    136

11.5  混入    137

11.5.1  基础用法    137

11.5.2  选项合并    138

11.5.3  全局混入    140

11.6  动态组件    141

11.6.1  基础用法    141

[实例11.6]  实现文字选项卡的切换    141

11.6.2  keep/alive    143

[实例11.7]  实现选项卡内容的缓存效果    143

11.7  其他用法    146

11.7.1  使用$refs访问组件    146

11.7.2  使用标签定义模板    147

11.8  实战应用    148

[实例11.8]  实现热播电影和经典电影之间的切换    148

本章知识思维导图    151

第12章  过渡    152 视频讲解：11节，89分钟

12.1  单元素过渡    153

12.1.1  CSS过渡    153

12.1.2  过渡的类名介绍    154

[实例12.1]  显示和隐藏文章内容的过渡效果    154

12.1.3  CSS动画    155

[实例12.2]  以缩放的动画形式隐藏和显示文字    155

12.1.4  自定义过渡的类名    156

[实例12.3]  以旋转动画的形式隐藏和显示文字    157

12.1.5  JavaScript钩子函数    157

[实例12.4]  实现文字显示和隐藏时的不同效果    159

12.2  多元素过渡    160

12.2.1  基础用法    160

12.2.2  key属性    162

[实例12.5]  实现古诗的过渡效果    162

12.2.3  过渡模式    165

12.3  多组件过渡    166

[实例12.6]  实现横向选项卡文字切换的过渡效果    167

12.4  列表过渡    169

[实例12.7]  实现插入数字和移除数字时的过渡效果    169

12.5  实战应用    170

[实例12.8]  广告图片的轮播效果    170

本章知识思维导图    174

第3篇　高级应用篇

第13章  渲染函数    176 视频讲解：4节，31分钟

13.1  什么是虚拟DOM    177

13.2  渲染函数的使用    177

13.2.1  基本用法    177

13.2.2  createElement用法    180

13.2.3  使用JavaScript代替模板功能    183

[实例13.1]  实现文本的放大和缩小    183

[实例13.2]  实现列表的显示和隐藏    185

[实例13.3]  模拟在线聊天    187

本章知识思维导图    188

第14章  常用插件    189 视频讲解：13节，81分钟

14.1  应用vue/router实现路由    190

14.1.1  引入插件    190

14.1.2  基本用法    191

14.1.3  路由动态匹配    192

14.1.4  嵌套路由    193

[实例14.1]  电影和音乐组件的切换    194

14.1.5  命名路由    197

14.1.6  应用push()方法定义导航    197

[实例14.2]  右侧选项卡切换图片效果    197

14.1.7  命名视图    201

14.1.8  重定向    202

14.1.9  高级用法    203

[实例14.3]  设置网页标题    203

14.2  应用axios实现Ajax请求    207

14.2.1  引入方式    207

14.2.2  GET请求    208

[实例14.4]  检测用户名是否被占用    209

14.2.3  POST请求    210

[实例14.5]  检测用户登录是否成功    211

14.3  实战应用    213

[实例14.6]  实现文字选项卡和内容的切换    213

本章知识思维导图    219

第15章  单页Web应用    220 视频讲解：9节，78分钟

15.1  webpack简介    221

15.1.1  webpack的安装    221

15.1.2  基本使用    222

15.2  loader简介    223

15.2.1  加载CSS    223

15.2.2  webpack配置文件    223

15.2.3  加载图片文件    226

15.3  单文件组件    227

15.4  项目目录结构    229

15.4.1  @vue/cli的安装    230

15.4.2  创建项目    230

[实例15.1]  实现购物车功能    232

15.5  实战应用    235

[实例15.2]  通过选项卡浏览新闻标题    235

本章知识思维导图    240

第16章  状态管理    241 视频讲解：4节，58分钟

16.1  Vuex简介    242

16.2  基本使用    242

16.2.1  Vuex的核心概念    242

16.2.2  简单例子    243

[实例16.1]  保存用户登录状态    250

16.3  实战应用    255

[实例16.2]  添加商品和删除商品    255

本章知识思维导图    260

第4篇　项目开发篇

第17章  51购商城    262 视频讲解：21节，63分钟

17.1  项目的设计思路    263

17.1.1  项目概述    263

17.1.2  界面预览    263

17.1.3  功能结构    263

17.1.4  文件夹组织结构    263

17.2  主页的设计与实现    266

17.2.1  主页的设计    266

17.2.2  顶部区和底部区功能的实现    267

17.2.3  商品分类导航功能的实现    269

17.2.4  轮播图功能的实现    271

17.2.5  商品推荐功能的实现    274

17.3  商品详情页面的设计与实现    276

17.3.1  商品详情页面的设计    276

17.3.2  图片放大镜效果的实现    276

17.3.3  商品概要功能的实现    279

17.3.4  猜你喜欢功能的实现    281

17.3.5  选项卡切换效果的实现    283

17.4  购物车页面的设计与实现    285

17.4.1  购物车页面的设计    285

17.4.2  购物车页面的实现    286

17.5  付款页面的设计与实现    288

17.5.1  付款页面的设计        288

17.5.2  付款页面的实现    289

17.6  登录注册页面的设计与实现    292

17.6.1  登录注册页面的设计    292

17.6.2  登录页面的实现    292

17.6.3  注册页面的实现    294

本章知识思维导图    297

第18章  仿豆瓣电影评分网    298 视频讲解：14节，40分钟

18.1  课程设计目的    299

18.2  系统设计    299

18.2.1  系统功能结构    299

18.2.2  文件夹组织结构    299

18.2.3  系统预览    299

18.3  在项目中使用jQuery    301

18.4  主页的设计与实现    302

18.4.1  主页的设计    302

18.4.2  “正在热映”版块的实现    302

18.4.3  “最近热门的电影”版块的实现    306

18.5  电影信息页面的设计与实现    309

18.5.1  “电影基本信息和评分”版块的设计    309

18.5.2  “剧情简介”版块的实现    311

18.5.3  “类似电影推荐”版块的实现    312

18.6  电影评价功能的实现    313

18.6.1  记录想看的电影    313

18.6.2  评价看过的电影    316

18.6.3  删除记录    318

本章知识思维导图    319