Vue.js是一套用于构建用户界面的渐进式框架,是目前流行的三大前端框架之一。本书以Vue 2.6.12为基础,**讲解Vue生产环境配置与开发工具的使用、基础语法、指令、组件开发及周边生态系统;以Vue 3.0为提高,**介绍新版本改进和优化之处以及如何利用新版本开发应用程序。 全书共分为12章,主要涵盖Vue.js概述、Vue.js基础、Vue.js指令、Vue.js基础项目实战、Vue.js组件开发、Vue.js过渡与动画、Vue项目开发环境与辅助工具部署、前端路由Vue Router、状态管理模式Vuex、Vue UI组件库、Vue**项目实战以及Vue 3.0基础应用。每章均附有本章学习目标、本章小结、练习与实训,便于广大读者和工程技术人员学习、实践与提高。 本书可作为高等院校数据科学与大数据技术、计算机科学与技术、软件工程、物联网工程、网络工程等理工科相关专业“网页开发与设计”“Web前端开发技术”“Web应用技术”等课程的教材,也可作为Web前端工程师等IT技术人员学习“新Web前端框架”的自学参考书。

第1章 Vue.js概述 1 1.1 Vue.js简介 1 1.2 Vue.js生产环境配置 2 1.2.1 Vue.js引入方法 2 1.2.2 安装Vue Devtools 3 1.3 Vue页面基本结构 5 1.3.1 标记 5 1.3.2 标记 6 1.3.3 标记 8 1.4 Vue.js开发工具 8 1.4.1 Visual Studio Code 9 1.4.2 Sublime Text 9 1.4.3 WebStorm 10 1.4.4 HBuilderX 10 本章小结 11 练习1 11 实训1 12 第2章 Vue.js基础 15 2.1 MVC与MVVM模式 15 2.1.1 MVC模式 15 2.1.2 MVVM模式 16 2.1.3 MVVM模式的前端框架发展趋势 17 2.1.4 MVVM模式的应用 17 2.2 数据绑定与插值 20 2.2.1 文本绑定 20 2.2.2 HTML代码绑定 20 2.2.3 属性绑定 21 2.2.4 JavaScript表达式绑定 21 2.3 计算属性与方法 22 2.3.1 计算属性基础应用 23 2.3.2 计算属性缓存与方法的比较 24 2.3.3 计算属性的setter和getter 26 2.4 侦��属性 29 2.4.1 侦听属性基本用法 29 2.4.2 侦听属性**用法 31 2.5 生命周期钩子函数 34 2.5.1 生命周期钩子函数的作用 34 2.5.2 生命周期钩子函数的应用 37 2.6 控制台对象 39 2.6.1 显示信息的命令 40 2.6.2 占位符 40 2.6.3 分组显示 41 2.6.4 查看对象的信息 42 2.6.5 显示某个节点的内容 42 2.6.6 判断变量是否为真 42 2.6.7 追踪函数的调用轨迹 43 2.6.8 计时功能 43 2.6.9 性能分析 44 2.6.10 表格形式输出数组和对象 45 2.7 数据与方法 48 2.7.1 数据对象的定义与使用 49 2.7.2 Vue实例属性与方法 50 2.8 Vue中的数组变动更新检测 53 2.8.1 变异方法 53 2.8.2 非变异方法 54 2.9 Vue中的过滤器 57 本章小结 60 练习2 61 实训2 62 第3章 Vue.js指令 66 3.1 Vue.js内置指令 67 3.1.1 条件渲染 67 3.1.2 用key管理可复用的元素 69 3.1.3 根据条件展示元素 71 3.1.4 列表渲染 73 3.1.5 绑定属性 81 3.1.6 事件处理 83 3.1.7 事件修饰符 85 3.1.8 按键修饰符 90 3.1.9 表单输入绑定 92 3.1.10 表单元素值绑定 95 3.1.11 v-model修饰符 97 3.1.12 v-text与v-html指令 98 3.1.13 v-pre、v-once和v-cloak指令 100 3.2 Vue.js自定义指令 101 3.2.1 自定义指令注册 101 3.2.2 对象字面量 105 3.2.3 动态指令参数 105 3.2.4 自定义指令实际应用 107 本章小结 108 练习3 109 实训3 110 第4章 Vue.js基础项目实战 114 4.1 简易图书管理 114 4.1.1 项目需求 114 4.1.2 项目实现 115 4.2 我的待办事项 119 4.2.1 项目需求 119 4.2.2 项目实现 120 本章小结 125 实训4 125 第5章 Vue.js组件开发 126 5.1 组件基础 126 5.1.1 组件命名 127 5.1.2 组件注册 128 5.2 组件间通信 131 5.2.1 父组件向子组件传值 131 5.2.2 子组件向父组件传值 139 5.2.3 兄弟组件之间的通信 143 5.2.4 父链与子组件索引 145 5.3 单文件组件 146 5.4 插槽 149 5.4.1 匿名插槽 149 5.4.2 具名插槽 151 5.4.3 作用域插槽 153 5.4.4 动态插槽名 155 本章小结 157 练习5 158 实训5 158 第6章 Vue.js过渡与动画 163 6.1 单元素/单组件的过渡 163 6.1.1 过渡的类名 165 6.1.2 CSS 过渡 166 6.1.3 CSS动画 167 6.1.4 自定义过渡的类名 168 6.1.5 同时使用过渡和动画 170 6.1.6 显性的过渡持续时间 170 6.1.7 JavaScript 钩子 170 6.2 初始渲染的过渡 171 6.3 多个元素的过渡 172 6.4 多个组件的过渡 177 6.5 列表过渡 178 6.5.1 列表的进入/离开过渡 179 6.5.2 列表的排序过渡 181 6.5.3 列表的交错过渡 183 本章小结 186 练习6 186 实训6 187 第7章 Vue项目开发环境与辅助工具部署 192 7.1 部署Node.js 192 7.1.1 Node.js简介 192 7.1.2 Node.js部署 194 7.1.3 Node.js模块系统 194 7.1.4 Node.js 创建第1个应用 202 7.2 Node包管理器npm 203 7.2.1 npm简介 203 7.2.2 npm常用命令 204 7.3 Node.js环境配置 206 7.4 webpack打包工具 208 7.4.1 webpack简介 208 7.4.2 webpack使用与基本配置 209 7.4.3 webpack配置加载器 215 7.4.4 webpack配置插件 222 7.4.5 webpack配置开发服务器 228 7.5 Vue CLI 235 7.5.1 Vue CLI安装 236 7.5.2 Vue CLI创建Vue项目 236 7.5.3 Vue CLI可视化创建Vue项目 238 本章小结 240 练习7 240 实训7 241 第8章 前端路由Vue Router 246 8.1 Vue Router概述 246 8.1.1 Vue Router的安装与使用 247 8.1.2 Vue Router基础应用 247 8.2 Vue Router**应用 252 8.2.1 动态路由匹配 252 8.2.2 嵌套路由 254 8.2.3 编程式导航 260 8.2.4 命名路由 262 8.2.5 命名视图 263 8.2.6 重定向和别名 264 8.2.7 路由组件传参 265 8.2.8 HTML5 History模式 267 本章小结 267 练习8 268 实训8 269 第9章 状态管理模式Vuex 275 9.1 Vuex概述 275 9.1.1 Vuex定义 276 9.1.2 简单状态管理——store模式 277 9.2 Vuex基本应用 280 9.3 Vuex核心概念 281 9.3.1 一个完整的store结构 281 9.3.2 简单的store 282 9.3.3 Vuex中的state 283 9.3.4 Vuex中的getters 287 9.3.5 Vuex中的mutations 291 9.3.6 Vuex中的actions 293 9.3.7 Vuex中的modules 301 9.4 Vuex多模块实战案例 307 本章小结 313 练习9 313 实训9 314 第10章 Vue UI组件库 318 10.1 Vue PC端组件库 318 10.1.1 Element UI 319 10.1.2 iView UI 331 10.1.3 其他PC端UI组件库 336 10.2 Vue移动端UI组件库 336 10.2.1 Mint UI 336 10.2.2 Vant 340 10.2.3 其他移动端组件库 344 本章小结 345 练习10 345 实训10 346 第11章 Vue**项目实战 351 11.1 友联通讯录 351 11.1.1 项目需求 351 11.1.2 实现技术 352 11.1.3 环境配置 352 11.1.4 项目实现 353 11.2 通用登录/注册管理系统 379 11.2.1 项目需求 379 11.2.2 实现技术 380 11.2.3 环境配置 381 11.2.4 项目实现 383 本章小结 415 练习11 415 实训11 415 第12章 Vue 3.0基础应用 416 12.1 Vue 3.0新特性 416 12.1.1 新特性简介 417 12.1.2 下一阶段工作 418 12.1.3 Vue 3.0学习参考 418 12.2 Vue 3.0初步体验 418 12.2.1 Vue 3.0下载与引用 418 12.2.2 Vue 3.0创建简易应用 419 12.2.3 Vue 3.0发布文档的使用 422 12.3 Vue 3.0新特性应用 423 12.3.1 使用脚手架创建项目 423 12.3.2 组件选项 425 12.3.3 ref()、reactive()和toRefs()函数 428 12.3.4 computed、watch和watchEffect 431 12.3.5 ref引用DOM元素和组件实例 434 12.3.6 Vue Router和Vuex 436 12.3.7 Vue 3.0生命周期 441 12.3.8 provide()和inject()函数 442 12.3.9 组合式API 447 12.3.10 模板refs 449 12.4 Vue 3.0购物车实战 453 12.4.1 项目设计要求 453 12.4.2 项目实现 455 本章小结 464 练习12 464 实训12 465 参考文献 470