目录


源代码


第1章Vue简介

1．1MVVM设计模式

1．2Vue框架的特点

1．3第一个Vue范例

1．3．1把模型数据绑定到视图

1．3．2把视图上的输入数据与模型绑定

1．3．3改变模型数据对视图的影响

1．4Vue组件的选项

1．4．1data选项

1．4．2template选项

1．4．3methods选项

1．5Vue组件实例的生命周期

1．6Vue编译模板和渲染DOM的基本原理

1．6．1编译模板

1．6．2渲染DOM

1．7异步渲染DOM

1．8防抖动函数debounce()

1．9Vue的开发和调试工具

1．9．1NPM

1．9．2vuedevtools调试工具

1．10小结

1．11思考题

第2章Vue指令

2．1内置Vue指令

2．1．1vbind指令

2．1．2vmodel指令

2．1．3vshow指令

2．1．4vif/velseif/velse指令

2．1．5vfor指令

2．1．6von指令

2．1．7von指令的事件修饰符

2．1．8vtext指令

2．1．9vhtml指令

2．1．10vpre指令

2．1．11vonce指令

2．1．12vcloak指令

2．2自定义Vue指令

2．2．1注册自定义指令

2．2．2自定义指令的钩子函数

2．2．3自定义指令的动态参数和动态值

2．2．4把对象字面量赋值给自定义指令

2．2．5钩子函数简写

2．2．6自定义指令范例： vimg指令

2．2．7自定义指令范例： vdrag指令

2．2．8自定义指令范例： vclickoutside指令

2．3小结

2．4思考题

第3章计算属性和数据监听

3．1计算属性

3．1．1读写计算属性

3．1．2比较计算属性和方法

3．1．3用计算属性过滤数组

3．1．4计算属性实用范例：实现购物车

3．2数据监听

3．2．1用Web Worker执行数据监听中的异步操作

3．2．2在watch选项中调用方法

3．2．3比较同步操作和异步操作

3．2．4深度监听

3．2．5立即监听

3．2．6比较计算属性和数据监听watch选项

3．3Vue的响应式系统的基本原理

3．4小结

3．5思考题

第4章绑定表单

4．1绑定文本域

4．2绑定单选按钮

4．3绑定复选框

4．4下拉列表

4．5把对象与表单绑定

4．6小结

4．7思考题

第5章绑定CSS样式

5．1绑定class属性

5．1．1绑定对象类型的变量

5．1．2绑定计算属性

5．1．3绑定数组

5．1．4为Vue组件绑定CSS样式

5．2绑定style属性

5．2．1绑定对象类型的变量

5．2．2绑定数组

5．2．3与浏览器兼容

5．3范例： 变换表格奇偶行的样式

5．4小结

5．5思考题

第6章CSS过渡和动画

6．1CSS过渡

6．1．1为<transition>组件设定名字

6．1．2为<transition>组件显式指定过渡样式类型

6．1．3使用钩子函数和Velocity函数库

6．1．4设置初始过渡效果

6．1．5切换过渡的DOM元素

6．1．6过渡模式

6．1．7切换过渡的组件

6．2CSS动画

6．2．1使用第三方的CSS动画样式类型库

6．2．2使用钩子函数和Velocity函数库

6．3过渡组合组件<transitiongroup>

6．4动态控制过渡和动画

6．5小结

6．6思考题

第7章Vue组件开发基础

7．1注册全局组件和局部组件

7．1．1注册全局组件

7．1．2注册局部组件

7．2组件的命名规则

7．3向组件传递属性

7．3．1传递动态值

7．3．2对象类型的属性

7．3．3数组类型的属性

7．3．4绑定静态数据

7．3．5传递对象

7．3．6属性的不可改变性

7．3．7单向数据流

7．3．8属性验证

7．4nonprop属性

7．4．1单节点模板中根节点对nonprop属性的继承

7．4．2在单节点模板中禁止nonprop属性的继承

7．4．3多节点模板中节点与nonprop属性的绑定

7．5组件树

7．6监听子组件的事件

7．6．1验证事件

7．6．2通过vmodel指令绑定属性

7．6．3通过vmodel指令绑定多个属性

7．6．4vmodel指令的自定义修饰符

7．6．5处理子组件中DOM元素的原生事件

7．7综合范例： 自定义组件<combobox>

7．8小结

7．9思考题

第8章Vue组件开发高级技术

8．1插槽<slot>

8．1．1<slot>组件的渲染作用域

8．1．2<slot>组件的默认内容

8．1．3为<slot>组件命名 

8．1．4<slot>组件的动态名字

8．1．5<slot>组件的自定义属性

8．2动态组件<component>

8．3异步组件

8．3．1异步组件的选项

8．3．2局部异步组件

8．4组件的生命周期

8．5组件的混入块

8．5．1合并规则

8．5．2全局混入块

8．5．3自定义合并策略

8．5．4使用混入块的注意事项

8．6组件之间的互相访问

8．6．1访问根组件

8．6．2访问父组件

8．6．3访问子组件

8．6．4依赖注入

8．7组件的递归

8．8定义组件模板的其他方式

8．9<teleport>组件与DOM元素的通信

8．9．1在<teleport>组件中包裹子组件 

8．9．2多个<teleport>组件与同一个DOM元素通信

8．10小结

8．11思考题

第9章render()函数和虚拟DOM

9．1render()函数

9．2真实DOM

9．3虚拟DOM

9．4h()函数的用法

9．4．1虚拟DOM中虚拟节点的唯一性

9．4．2h()函数的完整范例

9．4．3创建组件的虚拟节点

9．5用render()函数实现模板的一些功能

9．5．1实现vif和vfor指令的流程控制功能

9．5．2实现vmodel指令的数据绑定功能

9．5．3实现von指令的监听事件功能

9．5．4实现事件修饰符和按键修饰符的功能

9．5．5实现插槽功能

9．5．6生成动态组件的节点

9．5．7自定义指令

9．6在render()函数中使用JSX语法

9．7综合范例： 博客帖子列表

9．8小结

9．9思考题

第10章Vue CLI脚手架工具

10．1Vue CLI简介以及安装

10．2创建Vue项目 

10．2．1vue create命令的用法

10．2．2删除预配置

10．2．3vue ui命令的用法

10．3Vue项目的结构

10．3．1单文件组件

10．3．2程序入口main．js文件

10．3．3项目的index．html文件和SPA单页应用

10．3．4运行项目

10．4安装和配置Visual Studio Code

10．4．1安装Vetur和ESLint插件

10．4．2在VSCode中打开helloworld项目

10．4．3在VSCode中运行helloworld项目

10．5创建单文件组件<Hello>

10．5．1创建Hello．vue文件

10．5．2修改App．vue文件

10．5．3运行修改后的helloworld项目

10．6创建正式产品

10．7在Tomcat中发布正式产品

10．7．1安装Tomcat

10．7．2把helloworld正式产品发布到Tomcat中

10．8小结

10．9思考题

第11章Vue Router路由管理器

11．1简单的路由管理

11．2路由管理器的基本用法

11．3在Vue项目中使用路由管理器

11．3．1创建Home．vue和About．vue组件文件

11．3．2在组件中加入图片

11．3．3在index．js中创建路由管理器实例

11．3．4在main．js中使用路由管理器

11．3．5在App．vue中加入<routerlink>组件和<routerview>组件

11．3．6运行helloworld项目

11．4路由模式

11．5动态链接

11．5．1链接中包含路径参数

11．5．2链接中包含查询参数

11．5．3链接与通配符匹配

11．6嵌套的路由

11．6．1创建Items父组件的文件Items．vue

11．6．2创建Item子组件的文件Item．vue

11．6．3在index．js中设置父组件和子组件的路由

11．6．4在根组件的模板中加入Items父组件的导航链接

11．7命名路由

11．7．1重定向

11．7．2使用别名

11．8命名视图

11．9向路由的组件传递属性

11．9．1向命名视图的组件传递属性

11．9．2通过函数传递属性

11．10编程式导航

11．11导航守卫函数

11．11．1全局导航守卫函数

11．11．2验证用户是否登录

11．11．3设置受保护资源

11．11．4在单页面应用中设置目标路由的页面标题

11．11．5特定路由的导航守卫函数

11．11．6组件内的导航守卫函数

11．12数据抓取

11．12．1导航后抓取

11．12．2导航前抓取

11．13设置页面的滚动行为

11．13．1scrollBehavior()函数的返回值

11．13．2延迟滚动

11．14延迟加载路由

11．14．1把多个组件打包到同一个文件中

11．14．2在路由的组件中嵌套异步组件

11．15动态路由

11．16小结

11．17思考题

第12章组合API

12．1setup()函数的用法

12．1．1props参数

12．1．2context参数

12．1．3ref()函数

12．1．4reactive()函数

12．1．5toRefs()函数

12．1．6readonly()函数

12．1．7定义计算属性

12．1．8注册组件的生命周期钩子函数

12．1．9通过watch()函数监听数据

12．1．10通过watchEffect()函数监听数据

12．1．11获取模板中DOM元素的引用

12．1．12依赖注入(provide/inject)

12．2分割setup()函数

12．2．1把setup()函数分割到多个函数中 

12．2．2把setup()函数分割到多个文件中

12．3小结

12．4思考题

第13章通过Axios访问服务器

13．1Axios的基本用法

13．1．1同域访问和跨域访问

13．1．2获取响应结果

13．1．3处理错误

13．2在Vue项目中使用Axios

13．2．1异步请求

13．2．2POST请求方式

13．2．3对象和查询字符串的转换

13．2．4下载图片 

13．2．5上传文件

13．2．6设置反向代理服务器

13．3Axios API的用法

13．4请求配置

13．4．1创建axios实例

13．4．2设定默认的请求配置

13．4．3请求配置的优先顺序

13．4．4取消请求的令牌

13．5并发请求

13．6请求拦截器和响应拦截器

13．7前端与后端的会话

13．7．1通过Cookie跟踪会话

13．7．2通过token令牌跟踪会话

13．8前端与后端代码的整合

13．9小结

13．10思考题

第14章通过Vuex进行状态管理

14．1Vuex的基本工作原理

14．2Vuex的基本用法

14．3在Vue项目中使用Vuex

14．3．1strict严格模式

14．3．2通过计算属性访问状态

14．3．3状态映射函数： mapState()

14．3．4更新荷载

14．3．5更新映射函数： mapMutations()

14．3．6把更新函数的名字设为常量

14．3．7更新函数只能包含同步操作

14．4仓库的getters选项

14．4．1getters映射函数： mapGetters()

14．4．2为getters选项的属性设置参数

14．5仓库的actions选项

14．5．1传入更新荷载

14．5．2动作映射函数： mapActions()

14．6异步动作

14．6．1异步动作范例

14．6．2使用async/await的范例

14．7表单处理

14．7．1在处理input事件的方法中提交更新函数

14．7．2可读写的计算属性

14．8仓库的模块化

14．8．1模块的局部状态

14．8．2访问根状态

14．8．3命名空间

14．9通过Composition API访问仓库

14．10状态的持久化

14．11小结

14．12思考题

第15章创建综合购物网站应用

15．1前端组件的结构

15．2前端开发技巧

15．2．1状态管理

15．2．2状态同步

15．2．3运用Composition API提高代码可重用性

15．2．4在组件中显示图片

15．2．5路由管理

15．2．6每个组件的页面标题

15．2．7用户登录流程

15．2．8受保护的资源

15．2．9异步处理Axios的请求

15．2．10单独运行前端项目

15．3后端架构

15．3．1实现业务数据

15．3．2实现业务逻辑服务层

15．3．3实现DAO层

15．3．4实现控制器层

15．3．5前端与后端的数据交换

15．4发布和运行netstore应用

15．4．1安装SAMPLEDB数据库

15．4．2发布后端netstore项目

15．4．3调试和运行前端netstore项目

15．4．4创建并发布前端项目的正式产品

15．4．5运行netstore应用

15．5小结

附录A思考题答案