本书是面向Web前端开发学习者的一本入门教材,以通俗易懂的语言、丰富实用的案例,详细讲解Vue.js的开发技术。
全书共9章。第1章讲解了Vue.js基本概念;第2、3章讲解Vue.js的基本使用;第4章讲解过渡和动画的实现方式与应用;第5、6章讲解vue-router路由和Vuex数据仓库的使用;第7章讲解Vue开发环境的详细配置;第8章讲解服务器端渲染的理论与实践;第9章讲解“微商城”项目的开发实战。
本书既可作为高等院校计算机相关专业的Web前端开发课程的教材,也可作为广大IT技术人员和编程爱好者的优秀读物。
*** 配套资源中附送“在线商城”和“轻社区”两个项目的完整源码和详细开发文档。
本书针对想要从事与Web前端开发相关的工作,已经具备了HTML5、CSS3、JavaScript的基础知识,但是没有Vue.js基础或基础比较薄弱的人群。详细讲解了Vue.js的基础知识、过渡和动画、路由、Vuex、开发环境、服务器端渲染等技术,尽可能地确保读者可以学以致用,具备解决实际问题的能力。
本书根据知识的难易程度,采用先易后难的方式部署教材章节顺序。在知识讲解时以环环相扣的推进方式阐述出每个技术的作用以及相互之间的联系。并通过实用的案例和项目,帮助读者提高对Vue.js的整体认识,积累开发经验。
第1章 Vue简单入门 【教学导航】 1.1 初识Vue 1.1.1 前端技术的发展 1.1.2 什么是Vue 1.1.3 Vue的优势 1.2 Vue开发环境 1.2.1 Visual Studio Code编辑器 1.2.2 Vue的下载和引入 1.2.3 git-bash命令行工具 1.2.4 Node.js环境 1.2.5 npm包管理工具 1.2.6 Chrome浏览器和vue-devtools扩展 1.2.7 Hello World案例 1.3 webpack打包工具 1.3.1 安装webpack 1.3.2 webpack简单使用 1.3.3 构建Vue项目 本章小结 课后习题 第2章 Vue开发基础(上) 【教学导航】 2.1 Vue实例 2.1.1 创建Vue实例 2.1.2 el唯一根标签 2.1.3 data初始数据 2.1.4 methods定义方法 2.1.5 computed计算属性 2.1.6 watch状态监听 2.1.7 filters过滤器 2.2 Vue数据绑定 2.2.1 绑定样式 2.2.2 内置指令 2.2.3 学生列表案例 2.3 Vue事件 2.3.1 事件监听 2.3.2 事件修饰符 2.4 Vue组件 2.4.1 什么是组件 2.4.2 局部注册组件 2.4.3 template模板 2.4.4 组件之间数据传递 2.4.5 组件切换 2.5 Vue生命周期 2.5.1 钩子函数 2.5.2 实例创建 2.5.3 页面挂载 2.5.4 数据更新 2.5.5 实例销毁 本章小结 课后习题 第3章 Vue开发基础(下) 【教学导航】 3.1 全局API 3.1.1 Vue.directive 3.1.2 Vue.use 3.1.3 Vue.extend 3.1.4 Vue.set 3.1.5 Vue.mixin 3.2 实例属性 3.2.1 vm.$props 3.2.2 vm.$options 3.2.3 vm.$el 3.2.4 vm.$children 3.2.5 vm.$root 3.2.6 vm.$slots 3.2.7 vm.$attrs 3.3 全局配置 3.3.1 productionTip 3.3.2 silent 3.3.3 devtools 3.4 组件进阶 3.4.1 mixins 3.4.2 render 3.4.3 createElement 本章小结 课后习题 第4章 Vue过渡和动画 【教学导航】 4.1 过渡和动画基础 4.1.1 什么是过渡和动画 4.1.2 transition组件 4.1.3 自定义类名 4.1.4 使用@keyframes创建CSS动画 4.1.5 钩子函数实现动画 4.1.6 Vue结合Velocity.js实现动画 4.2 多个元素过渡 4.2.1 不同标签名元素过渡 4.2.2 相同标签名元素过渡 4.2.3 过渡模式 4.3 多个组件过渡 4.4 列表过渡 4.4.1 什么是列表过渡 4.4.2 列表的进入和离开过渡 4.4.3 列表的排序过渡 4.4.4 列表的交错过渡 4.4.5 可复用的过渡 本章小结 课后习题 第5章 Vue路由 【教学导航】 5.1 初识路由 5.2 vue-router 5.2.1 vue-router工作原理 5.2.2 vue-router基本使用 5.2.3 路由对象属性 5.3 用户登录注册案例 5.3.1 案例分析 5.3.2 准备工作 5.3.3 代码实现 5.4 动态路由 5.4.1 什么是动态路由 5.4.2 query方式传参 5.4.3 params方式传参 5.5 嵌套路由 5.5.1 什么是嵌套路由 5.5.2 嵌套路由案例 5.6 命名路由 5.6.1 什么是命名路由 5.6.2 命名路由案例 5.7 命名视图 5.7.1 什么是命名视图 5.7.2 命名视图案例 5.8 编程式导航 5.8.1 router.push() 5.8.2 router.replace() 5.8.3 router.go() 本章小结 课后习题 第6章 Vuex状态管理 【教学导航】 6.1 初识Vuex 6.1.1 什么是Vuex 6.1.2 Vuex下载和安装 6.1.3 计数器案例 6.1.4 Vuex状态管理模式 6.2 Vuex配置选项 6.2.1 actions 6.2.2 mutations 6.2.3 getters 6.2.4 modules 6.2.5 plugins 6.2.6 devtools 6.3 Vuex中的API 6.3.1 模块注册 6.3.2 状态替换 6.4 购物车案例 6.4.1 案例分析 6.4.2 代码实现 本章小结 课后习题 第7章 Vue开发环境 【教学导航】 7.1 Vue CLI脚手架工具 7.1.1 安装前注意事项 7.1.2 全局安装@vue/cli 7.1.3 vue create创建项目 7.1.4 GUI创建项目 7.2 插件 7.2.1 CLI插件 7.2.2 安装插件 7.3 CLI服务和配置文件 7.3.1 CLI服务 7.3.2 配置文件 7.3.3 配置多页应用 7.4 环境变量和模式 7.4.1 环境变量 7.4.2 模式 7.5 静态资源管理 本章小结 课后习题 第8章 服务器端渲染 【教学导航】 8.1 初识服务器端渲染 8.1.1 客户端渲染与服务器端渲染的区别 8.1.2 服务器端渲染的注意事项 8.2 服务器端渲染的简单实现 8.2.1 创建vue-ssr项目 8.2.2 渲染Vue实例 8.2.3 Express搭建SSR 8.2.4 Koa搭建SSR 8.3 webpack搭建服务器端渲染 8.3.1 基本流程 8.3.2 项目搭建 8.4 Nuxt.js服务器端渲染框架 8.4.1 创建Nuxt.js项目 8.4.2 页面和路由 8.4.3 页面跳转 本章小结 课后习题 第9章 “微商城”项目 【教学导航】 9.1 开发前准备 9.1.1 项目展示 9.1.2 技术方案 9.1.3 项目开发流程 9.2 项目搭建 9.2.1 创建项目 9.2.2 配置路由 9.2.3 配置Vuex 9.2.4 配置axios 9.2.5 目录结构 9.3 商城首页 9.3.1 页面结构 9.3.2 顶部标题栏 9.3.3 轮播图 9.3.4 九宫格展示区域 9.3.5 底部导航栏 9.4 新闻资讯 9.4.1 新闻资讯列表 9.4.2 新闻详情 9.5 图片分享 9.5.1 图片列表 9.5.2 图片详情 9.6 商品购买 9.6.1 商品详情页 9.6.2 购物车 9.7 分类列表 9.7.1 页面结构搭建 9.7.2 better-scroll运用 本章小结 课后习题