《Vue.js 2.x实践指南》其实在一年前就已经完稿了,只是由于疫情的缘故耽搁了很久才下厂印刷。阅读本书需要具备HTML、CSS和JS基础,本书针对的用户群体主要是:想要快速学习vue技术,并能够用vue进行实际项目开发的读者以及高校计算机专业学生。书中通过一个H5移动应用和一个PC Web应用来讲述了vue的实践应用。注:本书提供PPT课件。
书中项目截图:
书目录大纲:
第 1 章 7 ◄ VUE开发前奏 ► 7 1.1 网站交互方式 8 1.1.1 多页WEB应用(MPA) 8 1.1.2 单页WEB应用(SPA) 9 1.2 前后端分离的开发模式 11 1.3 前端三大开发框架 12 1.4 为什么要学习流行框架(MVVM框架) 13 1.5 框架和库的区别 14 1.6 模块化和组件化 14 1.7 后端中的MVC与前端中的MVVM 之间的区别 15 1.8 NODE.JS安装 16 1.9 PROMISES介绍 17 1.9.1 在PROMISES出现之前的文件读取方式 17 1.9.2 PROMISES基本概念介绍 19 1.10 ES7语法糖ASYNC/AWAIT 22 1.11 开发工具 23 1.11.1 VISUAL STUDIO CODE 24 1.11.2 VUEDEVTOOLS 25 1.11.3 CHROME 25 第 2 章 26 ◄ VUE基础入门 ► 26 2.1 VUE发展历史 26 2.2 什么是VUE.JS 27 2.3 VUE基本代码 27 2.4 VUE常用指令介绍 30 2.4.1 V-CLOAK指令 30 2.4.2 V-HTML指令 32 2.4.3 V-BIND&V-ON指令 33 2.4.4 示例:跑马灯特效 34 2.5 事件修饰符 35 2.6 V-MODEL双向数据绑定 40 2.7 V-FOR和KEY属性 42 2.8 V-IF和V-SHOW 46 2.9 在VUE中使用样式 47 2.9.1 使用CLASS样式 47 2.9.2 使用内联样式 48 2.10 过滤器 49 2.10.1 全局过滤器 49 2.10.2 私有过滤器 50 2.11 键盘修饰符以及自定义键盘修饰符 51 2.12 自定义指令 52 2.13 增删改查示例 53 第 3 章 58 ◄ VUE进阶 ► 58 3.1 VUE生命周期 58 3.2 AXIOS介绍 61 3.2.1 跨域请求 64 3.2.2 NODE手写JSONP服务器剖析JSONP原理 65 3.3 VUE过渡动画 67 3.3.1 单元素/组件的过渡 67 3.3.2 列表过渡 73 第 4 章 75 ◄ VUE组件开发 ► 75 4.1 组件介绍 75 4.1.1 全局组件定义的三种方式 75 4.1.2 使用COMPONENTS定义私有组件 77 4.1.3 组件中展示数据和响应事件 77 4.1.4 组件切换 78 4.2 组件传值 80 4.2.1 父组件向子组件传值 80 4.2.2 子组件向父组件传值 81 4.2.3 事件总线(EVENTBUS) 83 4.3 组件案例:留言板 85 4.4 使用REF获取DOM元素和组件引用 88 4.5 VUEX 90 4.5.1 安装VUEX 91 4.5.2 配置VUEX的步骤 91 4.6 RENDER函数 94 第 5 章 97 ◄ 路由VUE-ROUTER ► 97 5.1 什么是路由 97 5.1.1 前端路由的原生代码实现 97 5.2 安装VUE-ROUTER的两种方式 98 5.3 VUE-ROUTER的基本使用 99 5.3.1 404 101 5.4 设置选中路由高亮 102 5.5 为路由切换启动动画 103 5.6 路由传参QUERY&PARAMS 103 5.6.1 QUERY 104 5.6.2 PARAMS 105 5.7 使用CHILDREN属性实现路由嵌套 105 5.8 使用命名视图 107 5.9 WATCH监听 110 5.10 COMPUTED:计算属性的使用 111 5.11 WATCH、COMPUTED、METHODS的对比 113 5.12 NRM的安装及使用 114 5.1.3 VUE-ROUTER中编程式导航 115 第 6 章 117 ◄ WEBPACK介绍 ► 117 6.1 WEBPACK概念的引入 117 6.2 WEBPACK:最基本的使用方式 118 6.3 WEBPACK最基本的配置文件的使用 121 6.4 WEBPACK-DEV-SERVER的基本使用 122 6.5 使用HTML-WEBPACK-PLUGIN插件 配置启动页面 124 6.6 WEBPACK-DEV-SERVER的常用命令参数 125 6.7 WEBPACK-DEV-SERVER配置命令的另一种方式 127 6.8 LOADER:配置处理CSS样式表的第三方LOADER 127 6.9 LOADER:分析WEBPACK调用第三方LOADER的过程 129 6.10 NPM INSTALL --SAVE 、--SAVE-DEV 、 -D、-S、-G 的区别 130 6.11 LOADER:配置处理LESS文件的LOADER 131 6.12 LOADER-配置处理SCSS文件的LOADER 131 6.13 WEBPACK中URL-LOADER的使用 132 6.14 WEBPACK中使用URL-LOADER处理字体文件 136 6.15 WEBPACK中BABEL的配置 137 第 7 章 140 ◄ WEBPACK和VUE的结合 ► 140 7.1 WEBPACK中导入VUE和普通网页 使用VUE的区别 140 7.1.1 在WEBPACK中使用VUE 140 7.1.2 在WEBPACK中配置.VUE组件页面总结 146 7.2 EXPORT DEFAULT 和 EXPORT 的使用方式 147 7.3 结合WEBPACK使用VUE-ROUTER 149 7.4 结合WEBPACK实现CHILDREN子路由 152 7.5 组件中STYLE标签LANG属性和SCOPED 属性的介绍 153 7.5.1 重写子组件中的样式 154 7.6 抽离路由模块 156 第 8 章 158 ◄ WEBPACK中UI组件的使用 ► 158 8.1 使用饿了么的MINT UI 组件 158 8.1.1 BUTTON组件 159 8.1.2 TOAST组件 160 8.2 MINT UI按需导入 162 8.3 MUI介绍 164 8.4 MUI的使用 164 8.5 VANT UI 165 8.6 ELEMENT UI 166 8.6.1 引入ELEMENT 166 8.6.2 ELEMENT常见应用场景及解决方案 166 第 9 章 176 ◄ 移动图书商城 ► 176 9.1 MOCKJS介绍 176 9.2 APP首页设计 177 9.3 使用阿里巴巴矢量库 178 9.3.1 UNICODE、FONT CLASS和SYMBOL的区别 179 9.3 APP.VUE 组件的基本设置 181 9.3.1 设置路由激活时高亮的两种方式: 181 9.3.2 实现 TABBAR 页签不同组件页面的切换 182 9.3.3 路由切换添加过渡效果 183 9.4 首页轮播图 184 9.4.1 什么是 BASE64 编码? 187 9.5 首页九宫格 188 9.6 图书分类组件 191 9.7 制作顶部滑动导航 194 9.8 制作图片列表 198 9.9 在ANDROID手机浏览器中调试APP 201 9.10 真机调试 202 9.11 封装轮播组件 204 9.12 商品详情页 205 9.12.1 自定义V-TAP指令 208 9.13 购物车小球动画 209 9.13.1 GETBOUNDINGCLIENTRECT 211 9.14 封装购买数量组件 211 9.15 设计购物车数据存储 213 9.16 我的购物车 215 9.17 增加页面返回 220 9.18 总结 221 第 10 章 222 ◄ 天下会管理平台 ► 222 10.1 VUE前端开发规范 222 10.1.1 统一开发环境 222 10.1.2 技术框架选型 222 10.1.3 命名规范 223 10.1.4 注意事项 224 10.1.5 ESLINT配置JS语法检查并自动格式化 225 10.2 通过VUE-CLI来搭建项目 227 10.3 完善项目结构 230 10.3.1 设置浏览器图标 230 10.3.2 完善SRC源码目录结构 230 10.3.3 引入ELEMENT UI 231 10.3.4 封装AXIOS请求 231 10.3.5 AJAX跨域支持 236 10.3.6 封装全局的CSS变量文件 238 10.3.7 VUE-WECHAT-TITLE动态修改TITLE 239 10.3.8 封装全局的配置文件BASE-CONFIG.JS 239 10.4 项目介绍及其界面设计 240 10.5 项目设计和分析 242 10.5.1 帮主首页 242 10.5.2 其他管理界面 244 10.5.3 设计路由 248 10.5.4 设计业务逻辑层 251 10.5.5 VUEX设计 252 10.5.6 权限设计 254 10.5.7 菜单组件 254 10.6 表单验证 260 10.7 登录 266 10.7.1 帐号密码登录 267 10.7.2 在线生成二维码 270 10.7.3 制作网站ICO图标 270 10.7.4 存储登录信息 271 10.7.5 回车自动登录 272 10.7.6 防止登录按钮频繁点击 272 10.8 增删改查列表 273