目录


第1章  初识Vue.js

1.1网站交互方式 /2 
1.1.1多页应用程序 /2 
1.1.2单页应用程序 /2 


1.2 MVVM模式 /3 
1.3 Vue.js是什么 /4 
1.4 安装 Vue.js /4 
1.5 第一个 Vue.js程序 

/5 
1.5.1安装 VSCode及其插件 /5 
1.5.2创建第一个 Vue.js应用 /6 
1.5.3声明式渲染 /8 
1.5.4 Vue.js的生命周期 /8 


1.6 插值与表达式 /10 
1.6.1文本插值 /10 
1.6.2原始 HTML插值 /11 
1.6.3 JavaScript表达式 /11
本章小结  /11习题1 /11


第2章  计算属性和监听器

2.1 计算属性 computed

  /13 
2.1.1什么是计算属性  /13 
2.1.2只有 getter方法的计算属性 /13 
2.1.3定义有 getter和 setter方法的计算属性 /14 
2.1.4计算属性和 methods的对比 /15





2.2 监听器属性 watch

 /17 
2.2.1 watch属性的用法 /17 
2.2.2 computed属性和 watch属性的对比 /19
本章小结  /19习题2 /19


第3章  内置指令

3.1 v-bind 

/21 
3.1.1 v-bind指令的用法 /21 
3.1.2使用 v-bind绑定 class   /21 
3.1.3使用 v-bind绑定 style  /24 


3.2条件渲染指令 

/25 
3.2.1 v-if指令 /25 
3.2.2  v-show指令 /25 


3.3 列表渲染指令 v-for

 / 27 
3.3.1基本用法 /27 
3.3.2数组更新 /29 
3.3.3过滤与排序 /30 


3.4 事件处理 

/32 
3.4.1使用 v-on指令监听事件 /33 
3.4.2使用$event访问原生的 DOM事件 /33 
3.4.3事件修饰符 /34 


3.5 表单与 v-model

  /35 
3.5.1基本用法 /35 
3.5.2修饰符 /37 
3.6 实战：购物车实例

  /38本章小结  /41习题3 /41


第4章  组件

4.1 组件的注册

 /44 
4.1.1全局注册 /44 
4.1.2局部注册 /45 


4.2 使用 props传递数据 

/47 
4.2.1基本用法 /47 


4.2.2单向数据流 /48 
4.2.3数据验证 /49 


4.3 组件的通信

 /51 
4.3.1使用自定义事件通信 /51 
4.3.2使用 v-model通信 /53 
4.3.3使用 mitt实现非父子组件通信  /54 
4.3.4提供/注入（组件链传值） /56 


4.4 插槽 

/57 
4.4.1单插槽 slot /58 
4.4.2多个具名插槽 /58 
4.4.3作用域插槽 /59 


4.5 动态组件与异步组件

 /60 
4.5.1动态组件 /60 
4.5.2异步组件 /62 


4.6 使用 ref获取 DOM元素和引用组件 

/62 
4.7 实战：正整数数字输入框组件 

/64本章小结  /65习题4 /65

第5章  过渡与动画

5.1 单元素/单组件过渡

  /68 
5.1.1过渡 class    /68 
5.1.2 CSS过渡 /69 
5.1.3 CSS动画 /71 
5.1.4同时使用过渡和动画 /72 
5.1.5 JavaScript钩子方法 /73 


5.2 多元素/多组件过渡

  /76 
5.2.1多元素过渡 /76 
5.2.2多组件过渡 /77 


5.3 列表过渡 

/79 
5.3.1列表的普通过渡  /79 
5.3.2列表的平滑过渡  /80 
5.3.3列表的变换过渡  /81 
5.3.4多维列表的过渡  /82
本章小结  /83习题5  /84 6.1 自定义指令的注册







第6章  自定义指令



6.2 实战：实时时间转换指令

 /88本章小结  /90习题6  /90


第7章  渲染函数

7.1DOM树 /92 
7.2什么是渲染函数 

/92 

7.3h()函数 

/95 
7.3.1基本参数 /95 
7.3.2约束 /95 
7.3.3使用 JavaScript代替模板功能  /96
本章小结 /100 习题 7 /100

第8章  响应性与组合API

8.1 响应性  /102 
8.1.1什么是响应性 /102 
8.1.2响应性的原理 /102 


8.2  为什么使用组合 API /103 
8.3  setup选项

  /105 
8.3.1 setup函数的参数 /105 
8.3.2 setup函数的返回值 /107 
8.3.3使用 ref创建响应式引用 /108 
8.3.4在 setup内部调用生命周期钩子函数 /109 


8.4 提供/注入 

/110 
8.4.1 provide方法 /111 
8.4.2 inject方法 /111 


8.5模板引用 /113 
8.6 响应式计算与侦听

  /113 
8.6.1响应式计算 /113 
8.6.2响应式侦听 /114 

本章小结  /116习题 8 /116

第9章  webpack

9.1 webpack介绍 /118 
9.2  webpack的安装与使用 /118 
9.2.1安装 Node.js和 NPM /118 
9.2.2 NPM常用命令  /119 
9.2.3安装 webpack /122 
9.2.4安装 webpack-cli    /122 
9.2.5安装 webpack-dev-server /123 
9.2.6 webpack的基本配置 /123 
9.2.7 webpack打包实例 

/125 


9.3加载器与插件 

/131 
9.3.1加载器 /131 
9.3.2插件 /137 


9.4 单文件组件与 vue-loader

  /139本章小结  /144习题 9 /144

第10章  Vue Router

10.1 什么是路由 /146 
10.2 Vue Router的安装

 /146 

10.3Vue Router的基本用法 

/151 
10.3.1  跳转与传参 /151 
10.3.2  配置路由 /152 


10.4Vue Router的高级应用  /156 
10.4.1  动态路由匹配 

/156 

10.4.2  嵌套路由 

/160 

10.4.3  编程式导航 

/165 

10.4.4  命名路由 /167 
10.4.5  重定向 /167 
10.4.6  使用 props传参 /168 
10.4.7  HTML5历史记录模式 /169 


10.5 路由钩子函数 /169 





10.5.1  全局前置钩子函数 /169 
10.5.2  全局解析钩子函数 /171 
10.5.3  全局后置钩子函数 /171 
10.5.4  某个路由的钩子函数 /171 
10.5.5  组件内的钩子函数 /172 


10.6  路由元信息 /173 
10.7 登录权限验证实例

 /174本章小结  /177习题 10  /177

第11章  Vuex

11.1 状态管理与应用场景 /180 
11.1.1  状态管理 /180 
11.1.2  应用场景 /181 


11.2Vuex的安装与基本应用 /181 
11.3 Vuex的核心概念 /182 
11.3.1  Vuex中的 state 

/182 

11.3.2  Vuex中的 getters 

/187 

11.3.3  Vuex中的 mutations   /191 
11.3.4  Vuex中的 actions 

/194 

11.3.5  Vuex中的 modules /199
本章小结 /201习题 11 /201

第12章  Vue UI组件库

12.1setup语法糖 /203 
12.1.1  属性与方法的绑定 

/203 

12.1.2  路由 

/204 

12.1.3  组件传值 

/206 


12.2 Element Plus /209 
12.2.1  Element Plus的安装 /209 
12.2.2  Element Plus组件的介绍 /210 
12.2.3  Element Plus组件的应用 

/211 

12.2.4  按需引入 Element Plus 

/215 


12.3 View UI Plus /217 

12.3.1  View UI Plus的安装 /217 
12.3.2  View UI Plus组件的介绍 /218 
12.3.3  View UI Plus组件的应用 

/219 

12.3.4  按需引入 View UI Plus 

/221 


12.4 Vant UI /222 
12.4.1  Vant UI的安装 /222 
12.4.2  Vant UI组件的介绍 /224 
12.4.3  Vant UI组件的应用 

/224 

12.4.4  按需引入 Vant UI 

/225 


12.5其他 UI组件库 /227本章小结 /228习题 12 /228

第13章  电子商务平台的前端设计与实现


13.1 系统设计 /230 
13.1.1  系统的功能需求 /230 
13.1.2  系统的模块划分 /230 


13.2  实现技术

 /231 
13.2.1  使用 Vite构建后台管理子系统 /231 
13.2.2  使用 Vue CLI构建电子商务子系统 /233 


13.3系统管理

 /233 

13.4 后台管理子系统的实现

 /238 
13.4.1  管理员登录界面 /238 
13.4.2  导航栏界面 /241 
13.4.3  类型管理界面  /246 
13.4.4  商品管理界面  /251 
13.4.5  订单管理界面  /260 
13.4.6  销量统计界面  /266 
13.4.7  订单统计界面  /268 


13.5 电子商务子系统的实现

 /270 
13.5.1  导航栏及搜索界面 /270 
13.5.2  首页界面 /273 
13.5.3  用户注册界面  /276 
13.5.4  用户登录界面  /278 
13.5.5  商品详情界面  /279 
13.5.6  我的购物车界面 /281 






13.5.7  我的订单界面  /283 
13.5.8  我的收藏界面  /287
本章小结 /289习题 13 /289



参考文献