Vue.js前端开发项目化教程

高职高专“十四五”规划教材

本书可作为高等职业院校计算机相关专业教材，也可作为“1+X”Web前端开发等级（高级）证书试点院校师生参考书，并可供计算机培训教学使用。

本书以项目为引导，充分体现“做中学，学中做”的思想，详细介绍了Vue.js框架的基础知识及实战项目开发。全书分为上下两篇，上篇包括第1~10章，主要介绍了Vue.js的开发工具、Vue基础特性、条件判断与列表渲染、计算属性与监听属性、样式绑定、事件处理、表单控件绑定、自定义指令、Vue组件和样式的应用等基础知识；下篇包括第11~13章，主要介绍了Vue单页Web应用、Vue路由的应用、“五金购物街”项目实战等内容。

上篇 基础知识

1 Vue.js开发工具入门

1.1 Vue.js概述

1.2 Vue.js的安装与引入

1.3 开发工具Visual Studio Code简介

1.4 实训任务：创建第一个Vue实例

本章小结

思考题

2 Vue基础特性

2.1 Vue实例与选项

2.2 数据绑定

2.3 实训任务

本章小结

思考题

3 条件判断与列表渲染

3.1 条件判断

3.2 列表渲染

3.3 实训任务

本章小结

思考题

4 计算属性与监听属性

4.1 计算属性

4.2 监听属性

4.3 实训任务

本章小结

思考题

5 样式绑定

5.1 class属性绑定

5.2 内联样式绑定

5.3 实训任务

本章小结

思考题

6 事件处理

6.1 事件监听

6.2 内联样式绑定

6.3 实训任务

本章小结

思考题

7 表单控件绑定

7.1 绑定文本框

7.2 绑定复选框

7.3 绑定单选按钮

7.4 绑定下拉菜单

7.5 值绑定

7.6 使用修饰符

7.7 实训任务

本章小结

思考题

8 自定义指令

8.1 绑定文本框

8.2 钩子函数

8.3 自定义指令的绑定值

8.4 实训任务

本章小结

思考题

9 Vue组件的应用

9.1 注册组件

9.2 数据传递

9.3 自定义事件

9.4 内容分发

9.5 动态组件

9.6 实训任务：使用组件实现购物车功能

本章小结

思考题

10 Vue样式的应用

10.1 transition组件

10.2 CSS动画

10.3 钩子函数实现动画

10.4 自定义过渡类名

10.5 实训任务：新增列表项的动画效果

本章小结

思考题

下篇 工程化项目开发

11 Vue单页Web应用

11.1 项目目录结构

11.2 单文件组件

11.3 Webpack基础用法

本章小结

思考题

12 Vue路由的应用

12.1 路由的安装和使用

12.2 跳转方式

12.3 编程式导航

本章小结

思考题

13 “五金购物街”项目实战

13.1 项目介绍

13.2 项目开发前期准备

13.3 项目功能设计与开发

本章小结

思考题

参考文献