Vue 3.0从入门到实战 微课视频版

近年来，前端MVVM给开发者带来了许多便利，框架的发展也十分迅速。不同于传统开发中使用HTML CSS JavaScript的方式，Vue通过模板语法和组件化开发，极大地简化了开发流程。Vue是一套用于构建用户界面的渐进式框架，与其他大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。相对于Angular和React而言，Vue的学习曲线比较平稳。此外，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。因此，它成为实用和普遍的可靠MVVM 框架之一。
本书以Vue技术为核心，共分为11章，涵盖的主要内容有Vue的介绍与框架对比、Vue的安装与引入、Vue的语法与指令、class与style绑定、过滤器、过渡与动画、组件、前端路由、状态管理与Vuex、Vue项目的搭建与部署，以及Vue项目案例。
本书所需基础知识
Vue以JavaScript为基础，因此在学习框架之前需要具备JavaScript的基础知识，包括关键字、语法、事件和对象引用等。虽然在书中会对用到的语法进行简单的介绍以确保读者可以理解，但良好的JavaScript基础能帮助读者快速理解Vue的语法。
类似于JavaScript，前端开发中的HTML5和CSS的用法也是必不可少的，实际项目中将会使用HTML5和CSS对前端页面的样式进行调整。HTML5和CSS并不困难，读者可以结合案例与图片进行理解。
本书所需工具
学习Vue的过程中需要用到代码编辑器，这里推荐使用Visual Studio Code或IntelliJ IDEA，它们都有良好的Vue支持以及大量的插件，可以帮助编辑代码。另外，还需要使用Web 浏览器，建议使用Chrome或Firefox用于页面调试。
本书阅读建议
对于没有编程经验的Vue初学者而言，建议将本书读完。虽然上手时往往会觉得Vue并不困难，但是在实际开发中容易遇到许多问题，而初学者往往不知道问题的根源和解决方法，只能从头重新回顾。本书中有丰富的案例，推荐初学者跟着案例一步步亲自动手实现。
对于有前端框架使用经验或Vue 2.x开发经验的读者而言，推荐根据需要阅读第3~10章，并关注其中Vue 3.0与Vue 2.x的改变，特别是那些非兼容性的改变，这将在很大程度上影响项目的开发习惯与重构等方面。
本书的绝大多数知识点都配有实例代码，请扫描目录上方二维码获取。运行这些代码并上手操作将会加深理解，在阅读本书时不妨打开编译器运行、修改样例。
在实战章节中，本书并没有放入style相关的代码，相信阅读到此处的读者可以一定程度上定制自己喜欢的风格。书中也介绍了易用的样式插件，读者可以轻松地实现样例中的样式，甚至完全换成另外一种风格。
本书配套视频请先扫描封底刮刮卡中的二维码，再扫描书中对应位置二维码观看。
本书的作者为吕云翔、江一帆，曾洪立参与了部分内容的编写并进行了素材整理及配套资源制作等。
由于作者的水平和能力有限，书中难免有疏漏之处，恳请各位同仁和广大读者给予批评指正，也希望各位能将实践过程中的经验和心得与我们交流。

作者
2021年7月

本书主要介绍Vue 3.0的语法及其在实际项目中的运用，并对Vue 2.x的升级与删改进行了讲解。从Vue作为框架的自身特性出发，与其他一些主流框架进行对比，然后深入Vue语法的具体解析。除了编写单个Vue页面，本书也介绍了如何从零开始完整搭建使用Vue的前端项目。此外，对工程开发中常用的插件与工具也做了介绍，如Vuex、CLI和Elementplus等。 本书的示例与图解丰富且实用，内容通俗易懂，适合前端框架的初学者和对Vue 2.x有了解的开发者。希望通过阅读本书，读者对Vue的语法逻辑与实际使用都有透彻的理解。

本书主要介绍Vue 3.0的语法及其在实际项目中的运用，并对Vue 2.x的升级与删改进行了讲解。从Vue作为框架的自身特性出发，与其他一些主流框架进行对比，然后深入Vue语法的具体解析。除了编写单个Vue页面，本书也介绍了如何从零开始完整搭建使用Vue的前端项目。此外，对工程开发中常用的插件与工具也做了介绍，如Vuex、CLI和Elementplus等。 本书的示例与图解丰富且实用，内容通俗易懂，适合前端框架的初学者和对Vue 2.x有了解的开发者。希望通过阅读本书，读者对Vue的语法逻辑与实际使用都有透彻的理解。

吕云翔,1986-1992： 北方交通大学讲师； 1992-1994： 比利时VUB大学应用信息技术硕士； 1994-1996： 比利时VUB大学MBA；  1996-2003： IT公司项目经理 2003-至今： 北航软件学院副教授。已出版二十几本教材。
江一帆，2017-2021：北京航空航天大学学士；2021-至今：美国南加州大学研究生。      江一帆，2017-2021：北京航空航天大学学士；2021-至今：美国南加州大学研究生。

第1章Vue.js介绍

1.1什么是Vue.js

1.2Vue与其他框架

1.2.1Vue与React

1.2.2Vue与AngularJS

1.2.3Vue与Angular(Angular2)

1.2.4Vue与其他框架

1.3Vue 3.0的简述

1.3.1Vue 3.0的新特性

1.3.2从Vue 2.x开始的重大改变

1.3.3库与工具的支持

1.4本章小结

1.5练习题

第2章个Vue应用

2.1准备Vue 3.0

2.1.1引入Vue.js

2.1.2安装Vue Devtools

2.2Vue实例和数据绑定

2.2.1构建Vue 3.0项目

2.2.2项目实例： Hello Vue3

2.2.3setup函数与生命周期

2.2.4数据

2.2.5数据实例： 显示响应式对象

2.2.6方法

2.2.7方法实例： 修改响应式对象的值

2.3本章小结

2.4练习题

第3章Vue的内置指令与语法

3.1插值绑定

3.1.1文本插值与表达式

3.1.2过滤器

3.1.3HTML插值

3.2计算属性

3.2.1计算属性的概念

3.2.2计算属性

3.2.3侦听属性

3.3vbind属性绑定

3.3.1vbind指令

3.3.2绑定class、style与prop

3.4vmodel双向绑定

3.4.1vmodel指令

3.4.2vmodel与修饰符

3.4.3双向绑定实例： 制作问卷

3.5vif/vshow条件渲染

3.5.1vif、velseif与velse指令

3.5.2vshow指令

3.5.3vif对比vshow指令

3.5.4条件渲染实例： 按钮权限控制

3.6vfor列表渲染

3.6.1vfor指令

3.6.2在vfor里使用对象

3.6.3列表的更新

3.6.4列表渲染的key

3.6.5vfor与vif指令共用

3.6.6列表渲染实例： 帖子列表

3.7von事件绑定

3.7.1von指令

3.7.2事件修饰符

3.8指令在Vue 3.x中的变化

3.8.1vif与vfor的key

3.8.2vif与vfor的优先级

3.8.3vbind合并行为

3.8.4vfor中的ref数组

3.8.5vmodel

3.9本章小结

3.10练习题

第4章class与style绑定

4.1绑定HTML class

4.1.1对象语法

4.1.2数组语法

4.2绑定内联样式

4.2.1对象语法

4.2.2数组语法

4.3本章小结

4.4练习题

第5章过滤器

5.1内置过滤器

5.1.1字母过滤器

5.1.2json过滤器

5.1.3限制过滤器

5.1.4currency过滤器

5.1.5debounce过滤器

5.2本章小结

5.3练习题

第6章过渡与动画

6.1过渡与动画概述

6.1.1基于class的动画和过渡

6.1.2基于style的动画和过渡

6.2单元素的过渡

6.2.1进入与离开过渡

6.2.2CSS过渡与动画

6.2.3自定义过渡class类名

6.2.4JavaScript过渡

6.3其他过渡

6.3.1多元素过渡

6.3.2过渡模式

6.3.3列表过渡

6.3.4列表过渡案例： 打乱列表

6.4本章小结

6.5练习题

第7章组件

7.1组件的注册

7.1.1全局注册

7.1.2局部注册

7.2组件的数据传递

7.2.1props参数 

7.2.2组件通信

7.2.3vmodel参数

7.2.4Vue 3.0中的vmodel修饰符

7.3插槽内容分发

7.3.1插槽的基本用法

7.3.2插槽的作用域

7.3.3插槽的后备内容

7.3.4具名插槽

7.3.5作用域插槽

7.4动态组件

7.4.1动态组件的基础用法

7.4.2keepalive

7.5组件案例： 完善标签页组件

7.6组件在Vue 3.0中的变化

7.6.1函数式组件

7.6.2内联模板Attribute

7.7本章小结

7.8练习题

第8章前端路由

8.1vuerouter的基本用法

8.1.1vuerouter的安装

8.1.2vuerouter的基本使用

8.1.3跳转

8.2动态路由匹配

8.2.1带参数的动态路由匹配

8.2.2响应参数变化

8.2.3参数全匹配

8.3路由匹配的语法

8.3.1自定义正则表达式

8.3.2可选参数

8.3.3可重复参数

8.4嵌套路由

8.5命名路由

8.6重定向和别名

8.6.1重定向

8.6.2别名

8.7向路由组件传递参数

8.7.1向路由组件传递参数的基本语法

8.7.2传递参数的模式

8.8vuerouter 4.0的变化

8.8.1vuerouter的创建

8.8.2新的history选项

8.8.3删除*路由

8.8.4routerlink的修改

8.8.5去除router.app

8.8.6向route组件的slot传递内容

8.8.7$route属性编码

8.9本章小结

8.10练习题

第9章状态管理与Vuex

9.1Vuex简介

9.1.1状态管理模式

9.1.2安装Vuex

9.1.3Vuex的基本使用

9.2Vuex中的状态

9.2.1单一状态树

9.2.2将Vuex状态加入Vue组件

9.2.3mapState的使用

9.2.4组件的本地状态

9.3Vuex中的getter

9.3.1仓库的getter

9.3.2属性式访问

9.3.3方法式访问

9.3.4mapGetter的使用

9.4Vuex中的mutation

9.4.1mutation的有效负载

9.4.2通过对象提交

9.4.3mutation的同步

9.5Vuex中的action

9.5.1action的基本使用

9.5.2调度action

9.5.3组成action

9.6Vuex中的模块

9.7本章小结

9.8练习题

第10章Vue项目的搭建与部署

10.1项目目录介绍

10.1.1dist文件夹

10.1.2node modules文件夹

10.1.3src文件夹

10.2前端页面开发

10.2.1Vue文件

10.2.2导入import

10.3打包与部署

10.3.1项目打包

10.3.2项目部署

10.3.3通过GitHub Action自动部署

10.4本章小结

10.5练习题

第11章实战项目： 制作面向知识传播的社区论坛

11.1项目目标

11.2项目搭建

11.3编写前端页面

11.3.1顶部导航栏

11.3.2课程列表页

11.3.3课程内容页

11.3.4学生管理页

11.3.5课程讨论页

11.4本章小结

参考文献

本书主要介绍Vue 3.0的语法及其在实际项目中的运用，并对Vue 2.x的升级与删改进行了讲解。从Vue作为框架的自身特性出发，与其他一些主流框架进行对比，然后深入Vue语法的具体解析。除了编写单个Vue页面，本书也介绍了如何从零开始完整搭建使用Vue的前端项目。此外，对工程开发中常用的插件与工具也做了介绍，如Vuex、CLI和Elementplus等。 本书的示例与图解丰富且实用，内容通俗易懂，适合前端框架的初学者和对Vue 2.x有了解的开发者。希望通过阅读本书，读者对Vue的语法逻辑与实际使用都有透彻的理解。

吕云翔,1986-1992： 北方交通大学讲师； 1992-1994： 比利时VUB大学应用信息技术硕士； 1994-1996： 比利时VUB大学MBA；  1996-2003： IT公司项目经理 2003-至今： 北航软件学院副教授。已出版二十几本教材。
江一帆，2017-2021：北京航空航天大学学士；2021-至今：美国南加州大学研究生。      江一帆，2017-2021：北京航空航天大学学士；2021-至今：美国南加州大学研究生。