Vue.js 前端开发技术与实践

第1章 Visual Studio Code编辑器 1 1.1 下载及安装VS??Code 1 1.2 VS??Code的界面介绍 2 1.3 插件的获取及安装 3 1.4 前端开发常用的插件 4 1.5 VS??Code常用的快捷操作 5 第2章 Vue项目开发中常用的ES6语法 8 2.1 变量、常量声明 8 2.2 变量的解构赋值 11 2.3 rest参数 13 2.4 箭头函数 13 2.5 模板字符串 14 2.6 Module 的语法 15 2.7 Promise的基本用法 16 第3章 Vue入门 19 3.1 Vue框架的优点 19 3.2 Vue高效开发示例分析 19 3.3 Vue实现数据驱动 21 3.4 下载及安装Vue 22 3.5 Vue开发 22 3.5.1 实例化Vue 22 3.5.2 Vue的开发步骤 23 3.6 Vue的调试工具 25 3.6.1 Vue Devtools工具的安装步骤 25 3.6.2 Vue Devtools工具的使用 25 第4章 Vue指令 26 4.1 数据绑定 26 4.1.1 文本节点绑定 26 4.1.2 属性节点绑定 29 4.1.3 样式绑定 30 4.1.4 条件渲染 35 4.1.5 列表渲染 40 4.1.6 v-pre指令和v-once指令 44 4.2 数据双向绑定 45 4.2.1 input元素和 textarea 元素 45 4.2.2 radio元素和checkbox元素 47 4.2.3 select元素 49 4.2.4 双向绑定修饰符 50 4.3 事件绑定 51 4.3.1 监听事件 51 4.3.2 事件修饰符 53 第5章 Vue实例对象 61 5.1 配置对象常用的配置选项 61 5.1.1 methods方法 61 5.1.2 计算属性computed 62 5.1.3 侦听器watch 63 5.1.4 过滤器filters 65 5.2 Vue实例生命周期 67 5.2.1 Vue实例生命周期各阶段 67 5.2.2 Vue实例生命周期状态与 钩子函数示例 68 5.3 常用的Vue实例属性 74 5.4 常用的Vue实例方法 75 5.4.1 实例方法/数据 75 5.4.2 实例方法/事件 77 5.4.3 实例方法/生命周期 78 第6章 Vue组件 81 6.1 Vue组件概述 81 6.2 组件的定义及调用 83 6.2.1 全局组件的定义及调用 83 6.2.2 局部组件的定义及调用 86 6.3 组件的层级关系 88 6.4 组件之间的通信 92 6.4.1 父组件传递数据给子组件 92 6.4.2 子组件传递数据给父组件 96 6.4.3 平级(兄弟)组件及任意组件的 数据传递 99 6.5 动态组件 100 6.6 内置组件keep-alive 102 6.7 插槽 103 6.8 单个文件组件 105 第7章 Vue过渡与动画 107 7.1 transition 组件 107 7.2 transition组件应用 CSS 过渡或动画 107 7.2.1 单元素/组件过渡 108 7.2.2 多个元素过渡 109 7.2.3 多个组件过渡 110 7.2.4 列表过渡 112 7.3 JavaScript 钩子 114 7.4 CSS 动画 117 第8章 Vue路由 119 8.1 Vue Router的安装和基本用法 119 8.1.1 安装Vue Router 119 8.1.2 Vue Router的基本用法 120 8.2 设置路由被激活的链接样式 123 8.3 设置路由切换过渡动画 124 8.4 嵌套路由 124 8.5 命名路由 126 8.6 路由别名 127 8.7 路由重定向 128 8.8 命名视图 129 8.9 路由传递参数 131 8.9.1 路由对象 131 8.9.2 params方式传递参数 132 8.9.3 query方式传递参数 132 8.10 编程式的导航 133 8.10.1 路由实例及方法 133 8.10.2 编程式的导航实例 134 第9章 Vue Cli脚手架 137 9.1 搭建Vue Cli开发环境 137 9.1.1 安装node.js 137 9.1.2 安装Vue Cli脚手架构建工具 139 9.2 使用Vue Cli创建项目 139 9.3 启动项目 142 9.4 项目的配置目录及配置文件 143 9.4.1 项目根目录 143 9.4.2 public目录 145 9.4.3 src目录 145 9.4.4 router目录 146 9.5 项目开发简单示例 147 第10章 Vuex状态管理 151 10.1 Vuex的安装和基本用法 151 10.1.1 Vuex的安装 151 10.1.2 Vuex的基本用法 151 10.2 Vuex中的配置选项 153 10.2.1 state配置选项 153 10.2.2 getters配置选项 156 10.2.3 mutations配置选项 158 10.2.4 actions配置选项 162 10.2.5 modules配置选项 166 10.3 模块化的打包系统中使用Vuex 168 10.3.1 在创建项目时选择安装Vuex 168 10.3.2 通过npm安装Vuex包 169 10.4 通讯录案例 170 10.4.1 案例分析 170 10.4.2 实现步骤 170 第11章 前后台数据交互技术 174 11.1 Web前后台数据交互方式 174 11.2 后台接口文档 174 11.3 接口调用技术 176 11.3.1 axios简介 176 11.3.2 axios的基本用法 177 11.3.3 axios的常用方法 177 11.3.4 axios的响应结果 179 11.3.5 axios的全局配置 180 11.3.6 在Vue Cli项目中使用axios 180 11.4 Vue Cli项目前后台数据交互案例 182 11.4.1 案例介绍 182 11.4.2 案例实现步骤 182 第12章 基于Vue+Vant移动端的 项目开发实践 187 12.1 项目介绍 187 12.2 技术方案 190 12.3 创建项目及搭建Vant移动端的开发环境 192 12.4 安装与配置axios 193 12.5 项目的目录及文件结构 195 12.6 配置路由 195 12.7 各模块功能的实现 197 12.7.1 老黄历查询功能的实现 197 12.7.2 今日国内油价查询功能的实现 200 12.7.3 车辆品牌车型查看功能的实现 203 12.7.4 笑话查阅功能的实现 204 12.7.5 导航栏功能的实现 206 12.7.6 配置App.vue 206 12.8 项目测试 207 12.9 项目打包 207 参考文献 208