Vue.js快速入门与深入实战

近年来，无论是在移动端还是在桌面端利用跨平台技术开发App都备受欢迎。企业为了节约时间和减少成本，基本上推崇基于框架进行开发，后端基于框架，前端也基于框架。目前比较流行的前端框架有Angular、React和Vue.js（简称Vue）。其中Vue.js用得越来越普遍，而且随着Vue.js的热度提升，还涌现了很多优秀的前端组件和框架，例如Element UI和VueElementAdmin。为了帮助读者快速地学习、掌握和运用Vue.js，同时本着学习交流的精神，笔者把Vue.js的基础知识及实践经验进行整理和总结，以供大家参考。
本书内容
第1章Vue.js简介，介绍Vue.js的特点、Vue.js实现的MVVM模式及Vue.js同其他框架的对比。
第2章Vue.js快速入门，介绍Vue.js的安装配置，并用一个简单的样例，演示Vue.js的使用。
第3章Vue.js基本语法，介绍Vue.js中创建对象的方式、插值表达式、事件绑定和响应原理等内容。
第4章compute属性和watch侦听器，介绍Vue.js中compute属性和watch侦听器的定义和使用。
第5章组件化编程，介绍使用Vue.js自定义和使用组件，以及组件和组件之间的通信等内容。
第6章组件的过渡和动画，介绍组件中不同Vue.js元素的过渡和动画实现。
第7章复用和组合，介绍Vue.js组件中自定义和复用功能的各种方式。
第8章路由基础，介绍Vue Router的安装配置和基本使用。
第9章高级Vue Router，介绍路由导航、路由元信息及获取响应数据和路由懒加载等内容。
第10章Promise对象，介绍Promise对象的基本思想、方法和使用。
第11章axios，介绍axios对象的创建、各种使用方法及拦截器等。
第12章模板模式开发Vue.js应用，介绍Node.js、webpack和VueCLI脚手架等安装配置和使用。
第13章Vuex状态管理，介绍Vuex的核心概念和使用，以及在项目中的运用。
第14章ShopApp实战，介绍基于Vue.js实现前后端分离的App应用。
第15章权限管理实战，介绍基于vueelementadmin后端框架，实现前后端分离的权限管理和安全控制模块功能。

阅读建议
本书是一本基础入门加实战的书籍，既有基础知识，又有丰富示例，包括详细的操作步骤，实操性强。每个知识点都配有小例子，力求精简，还提供了完整代码，复制并执行完整代码就可以立即看到效果。这样会给读者信心，在轻松掌握基础知识的同时快速进入实战阶段。
对于没有基础的读者，建议从第1章开始学习，对于有基础的读者，可以挑选适当章节进行学习。篇为Vue.js基础（第1~4章），第二篇为Vue.js组件化编程（第5~8章），第三篇为Vue.js高级应用（第9~13章），第四篇为Vue.js实战（第14、15章）。

致谢
感谢笔者的母亲及妻子，在笔者写作过程中承担了全部的家务（包括照顾孩子），使笔者可以全身心地投入写作。
由于时间仓促，书中难免存在不妥之处，请读者见谅，并提宝贵意见。
杨世文
2022年10月

本书源代码

本书系统阐述了Vue.js的基本语法、体系结构、原理 ，以及 基于 Vue.js实现组件化编程的基本思想、第三方组件、工具，后还结合企业项目，结合 Vue.js实现了 ShopApp和权限管理 部分功能。 全书分为4篇：篇为 Vue.js基础（第 1~4章），第二篇为 Vue.js组件化编程（第5~8章），第三篇为 Vue.js高级应用（第 9~13章），第四篇为Vue.js实战（第 14和 15章）。书中主要内容包括 Vue.js基本语法、 Vue.js体系结构、 Vue组件生命周期、自定义和使用 Vue组件、组件直接的 数据通信、动画和过渡、路由、 Promise、 Axios、 Vuex状态管理和 Vue.js实战思想等。 本书在以浅显易懂的方式，系统阐述Vue.js相关概念、知识点的同时，还以配套有大量的示例，进行辅助说明相关知识点的使用，**程度的追求学以致用，即学即 用的目标。后用 ShopApp和权限管理 两个项目（模块），全面的阐述 Vue.js在实际项目中的真实应用。 本书可作为Vue.js初学者的入门书籍，也可作为从事跨平台移动开发的技术人员及培训机构的参考书籍。

本书系统阐述了Vue.js的基本语法、体系结构、原理 ，以及 基于 Vue.js实现组件化编程的基本思想、第三方组件、工具，最后还结合企业项目，结合 Vue.js实现了 ShopApp和权限管理 部分功能。 全书分为4篇：第一篇为 Vue.js基础（第 1~4章），第二篇为 Vue.js组件化编程（第5~8章），第三篇为 Vue.js高级应用（第 9~13章），第四篇为Vue.js实战（第 14和 15章）。书中主要内容包括 Vue.js基本语法、 Vue.js体系结构、 Vue组件生命周期、自定义和使用 Vue组件、组件直接的 数据通信、动画和过渡、路由、 Promise、 Axios、 Vuex状态管理和 Vue.js实战思想等。 本书在以浅显易懂的方式，系统阐述Vue.js相关概念、知识点的同时，还以配套有大量的示例，进行辅助说明相关知识点的使用，**程度的追求学以致用，即学即 用的目标。最后用 ShopApp和权限管理 两个项目（模块），全面的阐述 Vue.js在实际项目中的真实应用。 本书可作为Vue.js初学者的入门书籍，也可作为从事跨平台移动开发的技术人员及培训机构的参考书籍。

杨世文，国防科技大学软件工程硕士。早期从事一线软件开发，曾任国内知名企业系统分析师、架构师和技术总监，精通前端开发、Java开发和软件测试等领域技术。现在从事前端、Java、软件测试等领域的课程设计、教案编写和教学工作，有着丰富的开发和授课经验。擅长以浅显易懂的方式，结合生活案例，讲解抽象的技术，并且结合企业的需要，从项目实际需求出发，将技术整合到实际项目案例中，让读者学以致用，即学即用。

篇Vue.js基础

第1章Vue.js简介

1.1Vue.js概述

1.2MVVM模式

1.3Vue.js同其他框架的对比

1.3.1Vue.js同React的对比

1.3.2Vue.js同AngularJS(Angular 1)的对比

1.3.3Vue.js同Angular(Angular 2)的对比

第2章Vue.js快速入门

2.1安装配置开发环境

2.2实现猜数字游戏

2.2.1功能说明

2.2.2实现猜数字游戏

第3章Vue.js基本语法

3.1Vue.js对象

3.1.1Vue.js实例的数据属性

3.1.2Vue.js实例的方法

3.1.3Vue.js实例生命周期

3.2插值表达式

3.3表单输入绑定

3.3.1基本用法

3.3.2值绑定

3.3.3修饰符

3.4事件处理

3.4.1监听事件

3.4.2事件处理方法

3.4.3内联处理器中的方法

3.4.4事件修饰符

3.4.5按键修饰符

3.4.6系统修饰符

3.5指令

3.5.1vtext和vhtml指令

3.5.2vbind指令

3.5.3vonce指令

3.5.4vmodel指令

3.5.5vif、velseif和velse指令

3.5.6vshow指令

3.5.7vfor指令

3.5.8von指令

3.6Vue.js响应原理

3.6.1响应式原理

3.6.2对象的检测响应

3.6.3数组的检测响应

3.6.4异步更新问题

第4章compute属性和watch侦听器

4.1compute属性

4.1.1compute属性的setter()方法

4.1.2compute属性同方法的对比

4.2watch侦听器

4.3计算属性同watch侦听器的对比

第二篇Vue.js组件化编程

第5章组件化编程

5.1第1个组件

5.2使用自定义组件

5.2.1自定义组件

5.2.2全局注册组件

5.2.3局部注册组件

5.2.4使用组件

5.3父组件将值传到子组件

5.3.1prop的大小写

5.3.2prop的数据类型

5.3.3prop单向数据流

5.3.4prop属性验证

5.3.5非prop的attribute

5.4子组件将值传到父组件

5.4.1使用$emit方法调用父组件方法传值

5.4.2调用父组件的方法传值

5.4.3使用vmodel实现父子组件的数据同步

5.5Vue.js组件对象的常用属性

5.6事件总线

5.7插槽

5.7.1插槽的缺省内容和编译作用域

5.7.2具名插槽

5.7.3作用域插槽

5.7.4动态插槽名

5.7.5具名插槽的缩写

5.8动态组件和异步组件

5.8.1动态组件

5.8.2异步组件

5.8.3keepalive

5.9处理组件边界问题

5.9.1访问元素的&组件

5.9.2程序化的事件侦听

5.9.3循环引用组件

5.9.4其他模板

5.9.5控制组件的更新

第6章组件的过渡和动画

6.1进入/离开和列表过渡

6.1.1单元素/组件过渡

6.1.2初始渲染的过渡

6.1.3多元素过渡

6.1.4多组件过渡

6.1.5列表过渡

6.1.6可复用的过渡

6.1.7动态过渡

6.2状态过渡

6.2.1状态动画与侦听器

6.2.2把过渡放在组件中

第7章复用和组合

7.1混入

7.1.1选项合并

7.1.2全局混入

7.2自定义指令

7.2.1钩子函数

7.2.2钩子函数参数

7.2.3函数简写

7.2.4对象字面量

7.3渲染函数与JSX

7.3.1虚拟DOM

7.3.2createElement参数

7.4插件

7.4.1使用插件

7.4.2开发插件

7.5过滤器

第8章路由基础

8.1Vue Router简介

8.2安装Vue Router

8.3第1个路由

8.4路由种类

8.4.1动态路由

8.4.2嵌套模式路由

8.4.3编程式路由

8.5路由视图

8.5.1命名视图

8.5.2嵌套命名视图

8.6别名和重定向

8.7给路由组件传值

8.8路由的请求模式

第三篇Vue.js高级应用

第9章高级Vue Router

9.1导航守卫

9.1.1全局守卫

9.1.2路由独享守卫

9.1.3组件内的路由导航守卫

9.1.4完整的路由解析流程

9.2路由元信息

9.3获取响应数据

9.3.1导航完成后获取响应数据

9.3.2导航完成前获取响应数据

9.4路由懒加载

第10章Promise对象

10.1Promise对象基础

10.2Promise对象的方法

10.2.1原型方法

10.2.2静态方法

10.3Promise对象的使用经验

第11章axios

11.1axios简介

11.2axios API

11.2.1基本方法

11.2.2请求别名

11.2.3并发方法

11.3axios实例

11.3.1创建实例

11.3.2请求配置和响应结构

11.4默认配置

11.5拦截器

第12章模板模式开发Vue.js应用

12.1Node.js

12.1.1下载并安装Node.js

12.1.2npm的使用

12.1.3切换镜像站点

12.2webpack工具

12.2.1安装webpack

12.2.2手动体验webpack

12.2.3基于配置体验webpack打包

12.3基于VueCLI脚手架创建项目开发

第13章Vuex状态管理

13.1Vuex简介

13.1.1状态管理模式

13.1.2安装Vuex

13.1.3第1个案例

13.2Vuex核心概念

13.2.1state

13.2.2getter

13.2.3mutation

13.2.4action

13.2.5module

13.3Vuex进阶

13.3.1项目结构

13.3.2严格模式

13.3.3表单处理

13.3.4热重载

13.4安装初始化案例

13.4.1案例代码介绍

13.4.2初始化数据库

13.4.3用IDEA打开后端工程

13.4.4用VS Code打开前端代码

13.4.5启动测试

第四篇Vue.js实战

第14章ShopApp实战

14.1准备

14.1.1安装软件

14.1.2创建项目

14.1.3调整项目结构

14.1.4安装项目依赖

14.2开发前端

14.2.1调整入口代码

14.2.2实现TabBar

14.2.3实现Home

14.2.4实现详细信息页面

14.2.5实现登录

14.2.6实现购物车

14.2.7实现个人中心

14.2.8实现商品分类

14.3提供Mock模拟数据

14.3.1搭建Mock框架

14.3.2搭建axios请求框架

14.3.3改造Home

14.3.4改造显示详细信息页面

14.3.5改造登录功能

14.3.6改造添加购物车功能

14.3.7改造添加购物车列表功能

14.3.8改造购物车商品数量

14.3.9改造删除购物车商品

14.3.10改造个人中心头信息

14.3.11改造签到积分

14.3.12改造分类UI和左侧分类

14.3.13改造分类商品

第15章权限管理实战

15.1实现前端安全控制

15.1.1vueelementadmin简介

15.1.2实现有后端支持的登录功能

15.1.3动态显示路由菜单

15.1.4动态控制页面内容

15.1.5管理动态路由菜单

15.2实现后端安全控制

15.2.1Shiro简介

15.2.2搭建Shiro框架

15.2.3基于Shiro实现身份认证

15.2.4基于Shiro实现授权

本书系统阐述了Vue.js的基本语法、体系结构、原理 ，以及 基于 Vue.js实现组件化编程的基本思想、第三方组件、工具，后还结合企业项目，结合 Vue.js实现了 ShopApp和权限管理 部分功能。 全书分为4篇：篇为 Vue.js基础（第 1~4章），第二篇为 Vue.js组件化编程（第5~8章），第三篇为 Vue.js高级应用（第 9~13章），第四篇为Vue.js实战（第 14和 15章）。书中主要内容包括 Vue.js基本语法、 Vue.js体系结构、 Vue组件生命周期、自定义和使用 Vue组件、组件直接的 数据通信、动画和过渡、路由、 Promise、 Axios、 Vuex状态管理和 Vue.js实战思想等。 本书在以浅显易懂的方式，系统阐述Vue.js相关概念、知识点的同时，还以配套有大量的示例，进行辅助说明相关知识点的使用，**程度的追求学以致用，即学即 用的目标。后用 ShopApp和权限管理 两个项目（模块），全面的阐述 Vue.js在实际项目中的真实应用。 本书可作为Vue.js初学者的入门书籍，也可作为从事跨平台移动开发的技术人员及培训机构的参考书籍。

杨世文，国防科技大学软件工程硕士。早期从事一线软件开发，曾任国内知名企业系统分析师、架构师和技术总监，精通前端开发、Java开发和软件测试等领域技术。现在从事前端、Java、软件测试等领域的课程设计、教案编写和教学工作，有着丰富的开发和授课经验。擅长以浅显易懂的方式，结合生活案例，讲解抽象的技术，并且结合企业的需要，从项目实际需求出发，将技术整合到实际项目案例中，让读者学以致用，即学即用。