| 作者 |
| 步磊峰张帆 |
| 丛书名 |
| 出版社 |
| 机械工业出版社 |
| ISBN |
| 9782001061051 |
| 简要 |
| 简介 |
| 内容简介书籍计算机书籍 ---------------------------TypeScript图形渲染实战:基于WebGL的3D架构与实现--------------------------- 为了让广大3D图形爱好者能能够快速地学习WebGL图形编程,本书按照循序渐进的方式,由浅入深地讲解了WebGL图形编程的相关知识点。3D图形编程是一个庞大的主题,从宏观角度,笔者将整个3D图形编程分为三个层次,也即画出来、画的美和画的快。本书定位于画出来,目的是让读者使用TypeScript语言及WebGL 3D API编写一个WebGLApplication应用程序框架及WebGLUtilLib封装库,来渲染id Software公司的Quake3及Doom 3这两个引擎的场景和骨骼动画格式。 ---------------------------Vue.js项目开发实战--------------------------- 本书以实战开发为原则,以Vue.js的项目开发过程为主线,以JavaScript语言为基础,介绍了一整套面向Vue.js的项目开发技术。从NoSQL数据库的搭建到Express项目API的编写,最后由Vue.js显示在前端的页面中,使得读者可以非常迅速地掌握一门技术甚至是一个项目的开发能力。 本书分为4篇,第一篇是Vue.js基础环境的搭建,是全书的基石;第二篇是电影项目的设计,涵盖ES6、webpack、工程化环境搭建等关键技术;第三篇是电影项目的前、后端实现,涵盖Node.js后端技术、Vue.js各种组件和API等技术;最后一篇美化项目,通过学习一些Vue.js模板和框架,制作更美观的UI界面。本书不仅仅适合想学习Vue.js的读者,甚至对于一些“0”编程基础的爱好者或者是产品经理也同样适用。 |
| 目录 |
---------------------------TypeScript图形渲染实战:基于WebGL的3D架构与实现--------------------------- 前言 第1篇 数据结构基础 第1章 SystemJS与Webpack 2 1.1 准备工作 3 1.1.1 安装Node.js 3 1.1.2 安装Viusal Studio Code 4 1.2 安装和配置SystemJS 5 1.2.1 安装SystemJS 5 1.2.2 使用SystemJS 7 1.2.3 第一个TypeScript程序 8 1.3 安装和配置Webpack 9 1.3.1 安装Webpack 9 1.3.2 配置Webpack 11 1.3.3 调用build命令 12 1.3.4 配置tsconfig.json文件 12 1.3.5 调用build和dev命令 13 1.3.6 使用watch命令 14 1.3.7 联合使用watch和dev命令 15 1.3.8 使用Webpack压缩打包源码 16 1.4 SysemJS VS. Webpack 16 1.5 编译(Compile)VS.转义(Transpile) 18 1.6 断点调试 19 1.6.1 安装及配置Debugger for Chrome扩展 19 1.6.2 断点调试TypeScript程序 20 1.6.3 VS Code Debug快捷键 21 1.7 本章总结 21 第2章 TypeScript封装和实现常用容器 22 2.1 ArrayBuffer、DataView及类型数组实现原理 23 2.1.1 C/C++模拟JS/TS中的ArrayBuffer对象 23 2.1.2 C/C++模拟JS/TS中的DataView对象 24 2.1.3 C/C++版CDataView VS. JS/TS版DataView 25 2.1.4 C/C++模拟JS/TS中的Float32Array对象 26 2.1.5 C/C++版CFloat32Array VS. JS/TS版Float32Array 28 2.1.6 JS/TS中的类型数组对象 30 2.2 封装动态类型数组 31 2.2.1 TypedArrayList的成员变量及构造函数 31 2.2.2 TypedArrayList的push方法 32 2.2.3 TypedArrayList的slice方法和subarray方法 33 2.2.4 TypedArrayList的其他方法和属性 35 2.2.5 capacityChangedCallback回调函数 36 2.3 封装关联数组 36 2.3.1 JS/TS中的关联数组 37 2.3.2 TypeScript索引签名 37 2.3.3 ES 6 Map对象 38 2.3.4 封装成Dictionary字典对象 39 2.3.5 测试Dictionary对象 42 2.3.6 红黑树还是哈希表 42 2.4 实现SGI STL风格双向循环链表 44 2.4.1 泛型的ListNode结构 45 2.4.2 List中的头节点 45 2.4.3 双向循环概念 46 2.4.4 List的查询与遍历操作 46 2.4.5 List的插入操作 48 2.4.6 List的删除操作 50 2.4.7 List的push / pop / push_front / pop_front操作 51 2.5 封装队列与栈 51 2.5.1 声明IAdapter泛型接口 52 2.5.2 实现AdapterBase抽象基类 52 2.5.3 实现Queue子类和Stack子类 53 2.6 实现通用树结构 54 2.6.1 树结构的内存表示 54 2.6.2 树节点添加时的要点 55 2.6.3 树节点isDescendantOf和remove方法的实现 56 2.6.4 实现addChild等方法 58 2.6.5 查询树结构的层次关系 59 2.6.6 广度/深度优先遍历算法 60 2.6.7 队列及栈在广度/深度优先遍历中的应用 62 2.6.8 广度/深度线性遍历枚举器 63 2.6.9 树结构枚举器的实现 63 2.6.10 测试树结构迭代器 67 2.6.11 深度优先的递归遍历 71 2.7 本章总结 73 第2篇 WebGL图形编程基础 第3章 WebGLApplication框架 76 3.1 Application体系结构概述 77 3.2 第一个WebGL Demo 78 3.2.1 技术要点描述 78 3.2.2 Demo的成员变量与构造函数 80 3.2.3 资源同步加载 82 3.2.4 立方体、坐标系、三角形及文字渲染 83 3.2.5 更新操作 85 3.2.6 键盘输入事件处理 86 3.2.7 总结Application框架的使用流程 87 3.3 Application框架实现 87 3.3.1 成员变量与构造函数 88 3.3.2 启动/查询/停止Application 89 3.3.3 不间断地更新操作 90 3.3.4 CanvasInputEvent及其子类 92 3.3.5 DOM中的getBoundingRect方法 93 3.3.6 实现viewportToCanvasCoordinate方法 94 3.3.7 将DOM Event事件转换为CanvasInputEvent事件 95 3.3.8 实现EventListenerObject接口进行事件分发 96 3.3.9 让事件起作用 97 3.3.10 定时器Timer系统 97 3.3.11 增删定时器对象 98 3.3.12 触发多个定时任务的操作 100 3.3.13 WebGLApplication子类 101 3.3.14 CameraApplication子类 102 3.4 HTML页面系统 103 3.4.1 HTML页面系统简介 103 3.4.2 HTML页面源码 104 3.4.3 入口文件main.ts 105 3.5 异步资源加载及同步操作 107 3.5.1 使用Promise封装HTTP异步请求 107 3.5.2 实现AsyncLoadTestApplication类 109 3.5.3 异步run函数的覆写(override)与测试 110 3.5.4 Promise.all异步并发加载及同步操作 111 3.5.5 本书后续的资源加载及同步策略 114 3.6 本章总结 114 第4章 WebGL基础 116 4.1 WebGL中的类 116 4.2 准备工作 117 4.2.1 创建WebGLRenderingContext对象 117 4.2.2 WebGLContextAttributes对象与帧缓冲区 118 4.2.3 渲染状态 120 4.2.4 WebGLContextEvent事件 121 4.3 基本几何图元绘制Demo 122 4.3.1 视矩阵、投影矩阵、裁剪和视口 122 4.3.2 GLSL ES着色语言 123 4.3.3 WebGLShader对象 126 4.3.4 GLSL ES精度限定符与WebGLShaderPrecisionFormat对象 128 4.3.5 WebGLProgram对象 130 4.3.6 WebGLActiveInfo对象 132 4.3.7 WebGLUniformLocation对象 134 4.3.8 WebGLBuffer对象 137 4.3.9 渲染数据存储思考 140 4.3.10 Interleaved数组的存储、寻址及绘制 141 4.3.11 drawArrays绘制基本几何图元 144 4.3.12 详解基本几何图元 146 4.3.13 drawElements绘制方法 149 4.4 本章总结 152 第5章 WebGLUtilLib渲染框架 153 5.1 WebGLUtilLib框架类结构体系 153 5.2 GLAttribState类的实现 155 5.2.1 预定义顶点属性常量值 156 5.2.2 GLAttribState类的bit位操作 157 5.2.3 getInterleavedLayoutAttribOffsetMap方法 158 5.2.4 getSequencedLayoutAttribOffsetMap方法 160 5.2.5 getSepratedLayoutAttribOffsetMap方法 161 5.2.6 getVertexByteStride方法 162 5.2.7 setAttribVertexArrayPointer方法 163 5.2.8 setAttribVertexArrayState方法 164 5.3 GLProgram相关类的实现 166 5.3.1 常用的VS和FS uniform变量 166 5.3.2 GLProgram的成员变量和构造函数 167 5.3.3 loadShaders方法 168 5.3.4 绑定和解绑GLProgram 169 5.3.5 载入uniform变量 170 5.3.6 GLProgramCache类 171 5.3.7 GLShaderSource对象 172 5.3.8 初始化常用的着色器 173 5.4 GLMesh相关类的实现 174 5.4.1 VAO对象与GLMeshBase类 174 5.4.2 GLStaticMesh类实现细节 175 5.4.3 GLMeshBuilder类成员变量 178 5.4.4 GLMeshBuilder类构造方法 179 5.4.5 GLMeshBuilder类的color、texcoord、normal和vertex方法 181 5.4.6 GLMeshBuilder类的begin和end方法 184 5.5 GLTexture类的实现 187 5.5.1 GLTexture的成员变量和构造函数 187 5.5.2 GLTexture类的upload方法 188 5.5.3 mipmap相关的静态方法 189 5.5.4 GLTexture的bind / unbind、wrap和filter方法 190 5.5.5 GLTexture的createDefaultTexture静态方法 191 5.6 本章总结 192 第6章 3D图形中的数学基础 193 6.1 坐标系 193 6.1.1 OpenGL / WebGL中的坐标系 193 6.1.2 左手坐标系与右手坐标系 194 6.2 TSM数学库 196 6.3 向量 197 6.3.1 向量的概念 197 6.3.2 向量的大小(或长度) 198 6.3.3 两个向量之间的距离 199 6.3.4 单位向量 199 6.3.5 向量的加法 199 6.3.6 向量的减法 200 6.3.7 向量的缩放 201 6.3.8 负向量 202 6.3.9 向量的点乘 202 6.3.10 向量的叉乘 203 6.4 矩阵 204 6.4.1 矩阵的定义 205 6.4.2 矩阵的乘法 205 6.4.3 单位矩阵 206 6.4.4 矩阵的转置 207 6.4.5 矩阵的行列式与求逆 207 6.5 仿射变换 208 6.5.1 平移矩阵 209 6.5.2 缩放矩阵 209 6.5.3 绕任意轴旋转矩阵 210 6.6 视图矩阵与投影矩阵 211 6.6.1 视图(摄像机)矩阵 212 6.6.2 投影矩阵 213 6.7 四元数 214 6.8 平面 215 6.8.1 构造平面 216 6.8.2 平面的单位化 217 6.8.3 点与平面的距离与关系 217 6.9 矩阵堆栈 218 6.9.1 构造函数与worldMatrix属性 219 6.9.2 矩阵的入栈、出栈及load方法 219 6.9.3 仿射变换操作 220 6.10 摄像机 220 6.10.1 成员变量和构造函数 221 6.10.2 摄像机的移动和旋转 222 6.10.3 摄像机的更新 224 6.10.4 摄像机的相关属性 225 6.11 WebGLCoordSystem类 227 6.12 本章总结 228 第7章 多视口渲染基本几何体、坐标系及文字 230 7.1 使用GLMeshBuilder多视口渲染基本几何体 230 7.1.1 Demo的需求描述 230 7.1.2 Demo的成员变量和构造函数 231 7.1.3 drawByMatrixWithColorShader方法绘制流程 233 7.1.4 使用INTERLEAVED顶点存储格式绘制三角形 234 7.1.5 使用SEQUENCED顶点存储格式绘制四边形 235 7.1.6 使用SEPARATED顶点存储格式绘制立方体 236 7.1.7 创建多视口的方法 239 7.1.8 WebGL中的纹理坐标系 240 7.1.9 drawByMultiViewportsWithTextureShader方法绘制流程 240 7.1.10 绘制纹理立方体 242 7.1.11 实现Atlas纹理贴图效果 243 7.1.12 收尾工作 245 7.2 坐标系、文字渲染及空间变换Demo 246 7.2.1 Demo的需求描述 246 7.2.2 Demo的成员变量和构造函数 247 7.2.3 生成单视口或多视口坐标系数组 248 7.2.4 覆写(override)更新和渲染虚方法 249 7.2.5 覆写(override)键盘事件处理虚方法 250 7.2.6 drawFullCoordSystem方法 250 7.2.7 drawFullCoordSystemWithRotatedCube方法 252 7.2.8 DrawHelper类的drawFullCoordSystem方法 254 7.2.9 深度测试对坐标系绘制的影响 255 7.2.10 drawText方法 256 7.2.11 MathHelper类的obj2GLViewportSpace方法 258 7.2.12 3D图形中的数学变换流水线 258 7.3 本章总结 259 第3篇 开发实战 第8章 解析与渲染Quake3 BSP场景 262 8.1 Q3BspApplication入口类 262 8.2 解析Quake3 BSP二进制文件 264 8.2.1 Quake3BspParser类的常量定义 264 8.2.2 Q3BSPLump结构定义 265 8.2.3 解析BSP文件头 266 8.2.4 解析实体字符串数据 267 8.2.5 解析材质数据 269 8.2.6 解析顶点数据 270 8.2.7 解析顶点索引数据 273 8.2.8 解析渲染表面数据 273 8.2.9 Quake3与WebGL坐标系转换 276 8.3 渲染Quake3 BSP场景 277 8.3.1 Quake3BspScene的初始化 278 8.3.2 DrawSurface对象 278 8.3.3 封装Promise加载所有纹理 279 8.3.4 生成GLStaticMesh对象 280 8.3.5 绘制整个BSP场景 282 8.4 本章总结 283 第9章 解析和渲染Doom3 PROC场景 285 9.1 Doom3Application入口类 285 9.2 解析Doom3 PROC场景 286 9.2.1 Doom3词法解析规则 287 9.2.2 IDoom3Tokenizer词法解析器 287 9.2.3 Doom3 PROC文件格式总览 288 9.2.4 Doom3ProcParser的parse方法 289 9.2.5 Doom3Area、Doom3Surface及Doom3Vertex类 290 9.2.6 Doom3ProcParser的_readArea方法 292 9.2.7 Doom3ProcParser的_readSurface方法 293 9.2.8 Doom3ProcParser的_readPortals方法 295 9.2.9 Doom3ProcParser的_readNodes方法 297 9.3 使用Doom3ProcScene加载和渲染PROC场景 298 9.3.1 RenderSurface对象 299 9.3.2 Doom3ProcScene的draw方法 299 9.3.3 Doom3ProcScene类的loadTextures方法 300 9.3.4 Doom3ProcScene的parseDoom3Map方法 301 9.4 AABB包围盒 303 9.4.1 AABB包围盒与OBB包围盒的特点 304 9.4.2 构建AABB包围盒 304 9.4.3 计算AABB包围盒的9个顶点坐标值 306 9.4.4 计算变换后的AABB包围盒 307 9.4.5 AABB包围盒的两个常用碰检算法 307 9.5 摄像机视截体 308 9.5.1 摄像机视截体的概念 308 9.5.2 Frustum类的成员变量和构造函数 309 9.5.3 buildFromCamera方法的实现 310 9.5.4 让Camera类支持Frustum 312 9.5.5 Frustum与包围盒及三角形的可见行测试 313 9.5.6 让GLStaticMesh支持包围盒 314 9.5.7 更新Doom3ProcScene的draw方法 314 9.5.8 将Frustum绘制出来 315 9.5.9 Doom3ProcScene类增加包围盒绘制方法 316 9.6 本章总结 316 第10章 解析和渲染Doom3 MD5骨骼蒙皮动画 318 10.1 骨骼蒙皮动画原理 318 10.1.1 骨骼蒙皮动画效果演示 319 10.1.2 骨骼蒙皮动画中的各种坐标系 320 10.1.3 骨骼蒙皮动画数学关键点的问答 321 10.2 解析和渲染.md5mesh文件格式 322 10.2.1 .md5mesh文件解析流程 323 10.2.2 .md5mesh中的绑定姿态 324 10.2.3 解析绑定姿态 325 10.2.4 .md5mesh中的蒙皮数据 326 10.2.5 解析蒙皮数据 329 10.2.6 计算顶点最终位置 330 10.2.7 加载和生成纹理 331 10.2.8 绘制绑定姿态(BindPose) 332 10.3 解析和渲染.md5anim文件格式 333 10.3.1 .md5anim的解析流程 333 10.3.2 解析.md5anim中的关节层次信息 334 10.3.3 解析.md5anim中的包围盒数据 336 10.3.4 解析.md5anim中的baseframe数据 337 10.3.5 解析.md5anim中的frame数据 338 10.3.6 帧动作姿态结构 339 10.3.7 MD5Anim类的buildLocalSkeleton方法 340 10.3.8 MD5Anim类的updateToModelSpaceSkeleton方法 342 10.3.9 MD5SkinedMesh类的playAnim方法 342 10.3.10 MD5SkinedMesh的drawAnimPose方法 343 10.4 实现MD5SkinedMeshApplication Demo 344 10.5 本章总结 346 ---------------------------Vue.js项目开发实战--------------------------- 前言 第1篇 背景知识 第1章 初探网页开发 2 1.1 网页开发历史 2 1.1.1 传统网页开发 3 1.1.2 新前端网页开发 5 1.2 MVVM风格开发框架 6 1.2.1 为什么会出现MVVM 6 1.2.2 MVVM架构的最佳实践 7 1.2.3 MVC、MVP和MVVM开发模式对比 8 1.3 Vue.js来了 9 1.4 Vue.js的安装 10 1.4.1 使用独立版本 11 1.4.2 使用CDN安装 13 1.4.3 “npm大法”安装 15 1.4.4 使用Chrome浏览器测试Vue.js的双向绑定 17 1.5 Vue.js的主要特性 19 1.5.1 组件 19 1.5.2 模板 22 1.5.3 响应式设计 22 1.5.4 过渡效果 22 1.5.5 单文件组件 24 1.6 小结与练习 24 1.6.1 小结 24 1.6.2 练习 25 第2篇 项目设计 第2章 开启Vue.js之旅的准备工作 28 2.1 JavaScript运行与开发环境 28 2.1.1 神奇的包管理器——npm 28 2.1.2 好用的浏览器——Chrome 31 2.1.3 Vue.js的调试神器——vue-devtools 34 2.1.4 非常智能的IDE——WebStorm 36 2.2 认识ECMAScript 6(ES 6) 39 2.2.1 ES 6的前世今生 39 2.2.2 为什么要使用ES 6 40 2.3 ES 6的一些常用语法 40 2.3.1 Default Parameters(默认参数) 40 2.3.2 Template Literals(模板文本) 41 2.3.3 Multi-line Strings(多行字符串) 41 2.3.4 Destructuring Assignment(解构赋值) 42 2.3.5 Enhanced Object Literals(增强的对象文本) 42 2.3.6 Arrow Functions(箭头函数) 43 2.3.7 Promise实现 44 2.3.8 块作用域构造let 45 2.3.9 Classes(类) 46 2.3.10 Modules(模块) 46 2.4 使用Babel进行ES 6的转化 47 2.4.1 安装Babel 48 2.4.2 使用Babel 48 2.5 精简压缩生产环境的Webpack 51 2.5.1 Webpack是什么 51 2.5.2 配置一个完整项目的Webpack 52 2.5.3 不得不说的新版Webpack 4 56 2.6 小结与练习 59 2.6.1 小结 59 2.6.2 练习 59 第3章 从一个电影网站项目学习Vue.js 60 3.1 快速构建第一个Vue.js程序 60 3.1.1 通过CLI构建应用 60 3.1.2 输出Hello world! 63 3.1.3 开发环境与生产环境 66 3.2 电影网站的设计 70 3.2.1 网站的功能设计 70 3.2.2 网站的路由设计 71 3.2.3 网站的页面设计 72 3.3 电影网站的技术选择 73 3.3.1 服务的坚实后盾——数据库 73 3.3.2 数据的搬运和加工——服务器端 74 3.4 小结与练习 74 3.4.1 小结 74 3.4.2 练习 75 第4章 电影网站数据库的搭建 76 4.1 什么是数据库 76 4.1.1 什么是SQL 76 4.1.2 什么是NoSQL 78 4.1.3 两种数据库的对比分析 79 4.2 MongoDB基础入门 80 4.2.1 为什么选择MongoDB 80 4.2.2 安装MongoDB 81 4.2.3 启动MongoDB 83 4.2.4 安装MongoDB的可视化界面 87 4.2.5 MongoDB的基础操作 90 4.3 电影网站数据库的建立 92 4.3.1 数据库的分析与设计 93 4.3.2 数据集的建立 94 4.4 小结与练习 96 4.4.1 小结 96 4.4.2 练习 97 第3篇 Vue.js应用开发 第5章 电影网站服务器端的设计 100 5.1 使用JavaScript开发后端服务 100 5.1.1 神奇的Node.js 100 5.1.2 什么是Express 101 5.2 使用Express进行Web开发 102 5.2.1 安装Express 102 5.2.2 设计后台服务API 105 5.2.3 设计路由 107 5.3 服务器测试 108 5.3.1 一个测试HTTP请求的Postman插件 108 5.3.2 在Chrome中安装Postman插件 109 5.3.3 使用Postman插件进行数据测试 110 5.4 Express后台代码编写 112 5.4.1 新建工程 112 5.4.2 连接数据库 115 5.4.3 使用Supervisor监控代码的修改 118 5.5 用户系统开发 119 5.5.1 注册路由 122 5.5.2 登录路由 125 5.5.3 找回密码路由 128 5.5.4 提交评论路由 133 5.5.5 点赞路由 135 5.5.6 下载路由 137 5.5.7 发送站内信路由 138 5.5.8 接收站内信路由 141 5.6 前台API开发 143 5.6.1 显示排行榜 145 5.6.2 显示文章列表 145 5.6.3 显示文章内容 146 5.6.4 显示用户个人信息 147 5.7 后台API开发 148 5.7.1 添加电影 148 5.7.2 删除电影 151 5.7.3 更新电影 152 5.7.4 获取所有电影 153 5.7.5 获取用户评论 154 5.7.6 审核用户评论 154 5.7.7 删除用户评论 156 5.7.8 封停用户 157 5.7.9 更新用户密码 159 5.7.10 显示所有用户 160 5.7.11 管理用户权限 162 5.7.12 新增文章 163 5.7.13 删除文章 165 5.7.14 新增主页推荐 166 5.7.15 删除热点信息 168 5.8 小结与练习 169 5.8.1 小结 169 5.8.2 练习 170 第6章 Vue.js项目开发技术解析 171 6.1 Vue.js实例 171 6.1.1 何为构造器 171 6.1.2 实例的属性和方法 172 6.1.3 生命周期 173 6.2 Vue.js路由 175 6.2.1 RESTful模式的路由 175 6.2.2 安装vue-router 175 6.3 Vue.js路由配置vue-router 176 6.3.1 动态路由匹配 176 6.3.2 嵌套路由 179 6.3.3 编程式导航 181 6.3.4 命名路由 183 6.3.5 命名视图 184 6.3.6 重定向和别名 186 6.3.7 路由组件传递参数 187 6.3.8 HTML 5 History模式 188 6.4 数据获取 189 6.4.1 导航守卫 189 6.4.2 数据获取 193 6.5 电影网站项目路由设计 195 6.5.1 新建Vue.js项目 195 6.5.2 前台路由页面编写 198 6.5.3 路由测试 200 6.6 小结与练习 201 6.6.1 小结 201 6.6.2 练习 201 第7章 模板学习 202 7.1 Vue.js模板 202 7.1.1 什么是模板 202 7.1.2 为什么使用模板 203 7.2 Vue.js模板语法 203 7.2.1 文本输出 204 7.2.2 纯HTML输出 205 7.2.3 JavaScript表达式 206 7.2.4 指令参数 208 7.3 计算属性和观察者属性 209 7.3.1 计算属性 209 7.3.2 计算属性的缓存与方法 210 7.3.3 计算属性与被观察的属性 211 7.3.4 计算属性的setter方法 212 7.3.5 观察者 213 7.3.6 聊天机器人小实例 213 7.4 电影网站项目页面编写 219 7.4.1 主页 219 7.4.2 电影列表页 226 7.4.3 电影详情页 228 7.4.4 新闻详情页 231 7.4.5 用户登录页 233 7.4.6 用户注册页 234 7.4.7 用户密码找回页 235 7.4.8 用户详情页 237 7.4.9 站内信的发送页面 239 7.5 小结与练习 241 7.5.1 小结 241 7.5.2 练习 242 第8章 让页面变成动态页面 243 8.1 条件渲染 243 8.1.1 v-if应用 243 8.1.2 v-show应用 244 8.2 列表渲染 244 8.2.1 v-for列表渲染 245 8.2.2 使用of作为分隔符 245 8.2.3 v-for与v-if同时使用 247 8.2.4 key关键字使用 250 8.3 事件处理器v-on 250 8.3.1 方法事件处理器 251 8.3.2 内联处理器 252 8.3.3 事件修饰符 252 8.3.4 键值修饰符 253 8.3.5 修饰键 254 8.3.6 鼠标的3个按键修饰符 254 8.4 交互的灵魂——表单 255 8.4.1 文本输入 255 8.4.2 多行文本 256 8.4.3 复选框 257 8.4.4 单选按钮 257 8.4.5 选择按钮 258 8.5 值的绑定 260 8.5.1 复选框值的绑定 260 8.5.2 单选按钮值的绑定 260 8.5.3 选择列表的设置和值的绑定 261 8.5.4 完整的表单实例 261 8.6 修饰符 264 8.6.1 修饰符.lazy的使用 264 8.6.2 修饰符.number的使用 264 8.6.3 修饰符.trim的使用 264 8.6.4 修饰符实例 264 8.7 电影网站项目功能编写 266 8.7.1 主页服务器内容获取 266 8.7.2 主页获取推荐内容显示 267 8.7.3 主页列表显示 269 8.7.4 主页用户状态显示 272 8.7.5 电影列表页 273 8.7.6 电影详情页 275 8.7.7 新闻页面功能 280 8.7.8 用户登录功能 282 8.7.9 用户注册页面功能 284 8.7.10 用户密码找回功能 286 8.7.11 用户详情页逻辑 288 8.7.12 站内信逻辑 291 8.8 小结与练习 296 8.8.1 小结 296 8.8.2 练习 296 第4篇 页面优化 第9章 让页面变得更加美丽 298 9.1 使用CSS美化Vue.js 298 9.1.1 什么是CSS 298 9.1.2 如何在项目中使用CSS 299 9.2 动态绑定class,让页面变得美观 300 9.2.1 绑定对象语法 300 9.2.2 绑定数组语法 302 9.2.3 自动添加前缀 304 9.2.4 绑定多重值 305 9.3 丰富多彩的模板和UI框架 306 9.3.1 常用的UI框架 306 9.3.2 如何使用专门为Vue.js准备的UI框架 309 9.4 使用Vue-iView建立精美的应用 309 9.4.1 安装iView 310 9.4.2 iView的用法 312 9.4.3 应用iView主题 314 9.5 常用组件 315 9.5.1 栅格(Grid)组件 315 9.5.2 按钮 318 9.5.3 表单组件 319 9.5.4 表格 325 9.6 使用iView美化项目 328 9.6.1 在项目中使用iView 328 9.6.2 主页的样式改造 330 9.6.3 登录页的样式改造 333 9.7 小结与练习 335 9.7.1 小结 335 9.7.2 练习 336 附录 iView组件默认样式 337 |