项目1  Vue.js入门

项目目标

项目描述

项目分析

项目准备

1.1  初识Vue.js

1.1.1  Vue.js的定义

1.1.2  Vue.js的特性

1.1.3  Vue.js的开发模式

1.2  Vue.js的开发环境

1.2.1  Visual Studio Code编辑器

1.2.2  Node.js环境

1.2.3  常见的包管理工具

1.2.4  浏览器

1.3  Vue.js项目

1.3.1  项目构建工具

1.3.2  项目的创建方式

1.3.3  项目的目录结构

1.3.4  项目的运行过程

项目实施1——搭建Vue.js的开发环境

项目实施2——创建订餐系统项目

项目实训

项目总结

项目考核

项目评价

项目2  Vue.js开发基础

项目目标

项目描述

项目分析

项目准备

2.1  Vue.js实例

2.1.1  Vue.js实例的创建方法

2.1.2  数据和方法

示例2-1  Hello Vue.js

2.2  数据绑定

2.2.1  文本插值

2.2.2  HTML绑定

2.2.3  属性绑定

2.2.4  JavaScript表达式

示例2-2  不同数据绑定方式的应用

2.2.5  响应式数据绑定

示例2-3  定义响应式数据

2.3  计算属性与侦听器

2.3.1  计算属性

示例2-4  反转字符串

2.3.2  侦听器

示例2-5  单位换算

项目实施1——制作订餐系统登录模块

项目实施2——制作订餐系统商家简介模块

项目实训

项目总结

项目考核

项目评价

项目3  Vue.js指令

项目目标

项目描述

项目分析

项目准备

3.1  认识指令

3.2  条件渲染指令

示例3-1  条件渲染指令的应用

3.3  循环渲染指令

示例3-2  循环渲染列表

3.4  属性绑定指令

3.4.1  class属性绑定

示例3-3  为class属性绑定数据

3.4.2  style属性绑定

示例3-4  为style属性绑定数据

3.5  事件处理指令

3.5.1  事件监听与处理

示例3-5  监听并处理单击事件

3.5.2  事件修饰符

3.6  表单输入绑定指令

3.6.1  双向数据绑定

示例3-6  制作调查问卷

3.6.2  表单修饰符

示例3-7  表单修饰符的简单应用

3.7  自定义指令

3.7.1  自定义指令的注册和使用

3.7.2  钩子函数

示例3-8  注册并使用自定义指令

3.7.3  简化形式

项目实施——制作订餐系统商品评价模块

项目实训

项目总结

项目考核

项目评价

项目4  Vue.js组件

项目目标

项目描述

项目分析

项目准备

4.1  认识组件

4.2  组件的定义方式

4.2.1  在HTML文件中定义组件

4.2.2  在Vue.js项目中定义组件

4.3  组件的注册和使用

4.3.1  组件注册

4.3.2  组件使用

示例4-1  注册并使用组件

4.4  组件之间的数据传递

4.4.1  父组件向子组件传递数据

示例4-2  实现父组件向子组件传递数据

4.4.2  子组件向父组件传递数据

示例4-3  实现子组件向父组件传递数据

4.4.3  跨级组件之间传递数据

示例4-4  实现跨级组件之间传递数据

4.5  插槽

4.5.1  默认插槽

4.5.2  具名插槽

4.5.3  作用域插槽

示例4-5  使用插槽分发模板内容

4.6  动态组件

4.6.1  定义动态组件

4.6.2  使用KeepAlive组件实现组件缓存

示例4-6  动态切换组件

4.7  组件的生命周期

示例4-7  使用生命周期钩子函数

项目实施——制作订餐系统商品订购模块

项目实训

项目总结

项目考核

项目评价

项目5  过渡动画

项目目标

项目描述

项目分析

项目准备

5.1  单元素或单组件过渡

5.1.1  Transition组件

5.1.2  使用CSS3样式实现过渡动画

5.1.3  使用animate.css实现过渡动画

5.1.4  使用钩子函数实现过渡动画

5.2  多元素过渡与多组件过渡

5.2.1  多元素过渡

5.2.2  多组件过渡

5.3  列表过渡

示例5-1  实现列表的过渡动画

5.4  可复用过渡

示例5-2  封装并复用过渡动画

项目实施——在订餐系统中添加过渡动画

项目实训

项目总结

项目考核

项目评价

项目6  路由管理

项目目标

项目描述

项目分析

项目准备

6.1  认识路由

6.2  Vue Router的安装与使用

6.2.1  Vue Router的安装

6.2.2  Vue Router的使用

示例6-1  安装并使用Vue Router

6.3  嵌套路由

示例6-2  定义并使用嵌套路由

6.4  动态路由匹配

6.4.1  定义路径参数

6.4.2  获取参数值

示例6-3  实现动态路由匹配

6.5  命名路由与路由视图

6.5.1  命名路由

6.5.2  命名路由视图

示例6-4  为路由和路由视图命名

6.6  重定向与别名

6.6.1  重定向

6.6.2  别名

示例6-5  实现路由重定向并为路由添加别名

6.7  编程式导航

示例6-6  使用编程式导航的方式实现页面导航

项目实施——切换显示订餐系统不同模块的内容

项目实训

项目总结

项目考核

项目评价

项目7  网络请求与状态管理

项目目标

项目描述

项目分析

项目准备

7.1  网络请求

7.1.1  Axios的安装

7.1.2  Axios的使用

7.1.3  拦截器

示例7-1  使用Axios实现网络请求

7.2  状态管理

7.2.1  Vuex的安装

7.2.2  Vuex的使用

7.2.3  持久化存储

示例7-2  使用Vuex进行状态管理

项目实施——实现登录功能并管理登录状态

项目实训

项目总结

项目考核

项目评价

项目8  综合案例——开发图书销售网站

项目目标

8.1  项目背景

8.2  需求分析

8.3  模块设计

8.4  项目搭建

8.5  项目开发

8.5.1  实现路由管理和状态管理

8.5.2  制作导航模块

8.5.3  制作登录模块

8.5.4  制作图书展示模块

8.5.5  制作图书详情模块

8.5.6  制作图书搜索模块

8.5.7  制作购物车模块

8.6  项目运行

项目评价

参考文献