包邮Vue.js前端开发技术与实践(第二版)

第1章 Vue的开发环境 1 1.1 VS Code编辑器 1 1.1.1 下载及安装VS Code 1 1.1.2 VS Code的界面介绍 2 1.1.3 插件的获取及安装 3 1.1.4 前端开发常用插件 4 1.1.5 VS Code常用快捷操作 5 1.2 Vue的调试工具 7 1.3 Node.js环境 10 第2章 Vue项目开发ES6基础 12 2.1 变量、常量声明 12 2.2 变量的解构赋值 16 2.3 rest参数 18 2.4 扩展运算符 19 2.5 箭头函数 19 2.6 模板字符串 21 2.7 异步编程 21 2.7.1 Promise 22 2.7.2 async/await 23 2.8 模块 25 2.8.1 ES6模块化规范 25 2.8.2 在HTML文件中引入JS模块 25 2.8.3 模块的导出与导入 25 2.8.4 动态导入 27 2.8.5 直接导入并执行模块代码 28 第3章 初识Vue 29 3.1 Vue框架的优点 29 3.2 Vue高效开发示例分析 30 3.3 Vue实现数据驱动 32 3.4 引入Vue3方式 33 3.5 创建无构建步骤的Vue应用程序 33 3.5.1 创建Vue应用实例 33 3.5.2 挂载应用实例 34 3.5.3 使用Vue3开发的步骤 34 3.6 API风格 37 3.6.1 组合式API的两个核心概念 37 3.6.2 创建组合式API应用实例 38 3.7 Vue3提供API的方式 39 3.7.1 全局构建版本提供API的方式 39 3.7.2 使用ES模块构建版本提供API的 方式 40 3.8 Vue Devtools工具的使用 42 3.9 Vue组件基础 43 第4章 Vue指令 47 4.1 指令概述 47 4.2 数据绑定 48 4.2.1 文本节点数据绑定 48 4.2.2 属性节点数据绑定 52 4.2.3 样式绑定 53 4.2.4 条件渲染 58 4.2.5 列表渲染 63 4.2.6 v-pre指令和v-once指令 67 4.3 数据双向绑定 68 4.3.1 input和textarea元素 69 4.3.2 radio和checkbox元素 70 4.3.3 select元素 72 4.3.4 双向绑定修饰符 73 4.4 事件绑定 75 4.4.1 监听事件 75 4.4.2 事件修饰符 77 第5章 Vue常用组合式API 85 5.1 setup函数 85 5.2 计算属性 87 5.3 watch侦听器 88 5.4 watchEffect侦听器 91 5.5 reactive函数 92 5.6 Vue组件实例生命周期 93 5.6.1 生命周期概述 93 5.6.2 生命周期状态与钩子函数示例 95 5.7 组合式函数 100 5.8 综合应用案例 102 第6章 工程化的Vue项目 105 6.1 前端工程化概述 105 6.2 Node.js基础 106 6.2.1 Node.js的模块化开发规范 106 6.2.2 Node.js的包 107 6.2.3 包(模块)加载规则 111 6.3 创建Vue工程化项目 112 6.3.1 创建项目 112 6.3.2 安装并启动项目 113 6.4 项目的配置目录及配置文件 115 6.4.1 package.json文件与node_modules 目录 115 6.4.2 src目录与index.html文件 117 6.4.3 public、vite.config.js等目录和 文件 119 6.5 工程化项目开发简单示例 120 第7章 Vue组件通信 124 7.1 组件注册 124 7.1.1 全局注册及调用 124 7.1.2 局部注册及调用 126 7.2 组件的层级关系 127 7.3 父子组件之间的通信 130 7.3.1 Props传值(父组件传递数据给子 组件) 130 7.3.2 插槽slot(父组件传模板内容给子 组件) 133 7.3.3 组件事件(子传父) 139 7.3.4 组件v-model 141 7.3.5 透传Attributes 143 7.3.6 子组件暴露属性和方法给父组件 147 7.4 跨级组件通信 149 7.4.1 依赖注入 149 7.4.2 全局属性的对象 153 7.4.3 状态管理 155 7.5 兄弟组件通信 157 第8章 Vue的内置组件与第三方组件库 158 8.1 内置组件 158 8.1.1 Transition组件 158 8.1.2 TransitionGroup组件 169 8.1.3 KeepAlive组件 172 8.1.4 Teleport组件 173 8.1.5 Suspense组件 174 8.2 第三方组件库 178 8.2.1 常用组件库介绍 178 8.2.2 组件库的使用 179 第9章 Vue Router 182 9.1 Vue Router的基本用法 182 9.1.1 Vue Router提供的组件 182 9.1.2 在项目中使用Vue Router的 步骤 183 9.1.3 Vue Router使用示例 183 9.2 在创建项目时引入Vue Router 187 9.3 设置路由被激活的链接样式 188 9.4 命名路由 189 9.5 路由别名 190 9.6 路由重定向 191 9.7 命名视图 191 9.8 嵌套路由 193 9.9 路由传递参数 195 9.9.1 路由对象 195 9.9.2 query方式传递参数 196 9.9.3 params方式传递参数 197 9.10 编程式的导航 198 9.10.1 路由器对象 198 9.10.2 路由器对象的导航方法 200 9.10.3 编程式的导航实例 200 第10章 Pinia状态管理 203 10.1 Pinia的安装和注册 203 10.2 Store的基本使用方法 204 10.2.1 定义Store 204 10.2.2 使用Store 205 10.3 创建项目时选择引入Pinia 208 10.4 电商案例 209 10.4.1 案例分析 209 10.4.2 实现步骤 210 第11章 前后端数据交互技术 214 11.1 前后端交互相关基础概念 214 11.2 API接口文档 216 11.3 JSON Server服务器 219 11.4 接口调用技术 221 11.4.1 Axios基本介绍 221 11.4.2 Axios的基本用法 222 11.4.3 Axios的常用请求方法 223 11.4.4 Axios的响应结果 229 11.4.5 配置Axios全局默认值 230 11.4.6 Axios的配置对象config 230 11.4.7 Axios拦截器 231 11.4.8 在工程化项目中使用Axios 232 11.5 工程化项目的前后端数据交互案例 233 11.5.1 案例介绍 233 11.5.2 案例实现步骤 233 第12章 基于Vue+Vant移动端的项目开发 ?实践 237 12.1 项目介绍 237 12.2 技术方案 240 12.3 创建项目并搭建Vant移动端的开发 环境 243 12.4 安装配置Axios 244 12.5 项目的目录及文件结构 245 12.6 配置路由 246 12.7 各模块功能的实现 248 12.7.1 老黄历查询功能的实现 248 12.7.2 二十四节气查询功能的实现 251 12.7.3 中药查询功能的实现 256 12.7.4 今日国内油价查询功能的实现 257 12.7.5 导航栏的实现 260 12.7.6 配置App.vue 260 12.8 在浏览器中测试项目 261 12.9 项目打包 262 参考文献 263