搭建Vue开发环境

• 下载Vue.js
• 安装浏览器扩展：Vue.js devtools

Vue基础

模板语法

• 插值：’{‘{‘’}’’}’

数据绑定

• v-bind 单向
• v-model 双向

MVVM模型

1. M：模型(Model) ：data中的数据
2. V：视图(View) ：模板代码
3. VM：视图模型(ViewModel)：Vue实例

数据代理

Vue中的数据代理：

• 通过vm对象来代理data对象中属性的操作（读/写）

Vue中数据代理的好处：

• 更加方便的操作data中的数据

基本原理：

• 通过Object.defineProperty()把data对象中所有属性添加到vm上。
• 为每一个添加到vm上的属性，都指定一个getter/setter。
• 在getter/setter内部去操作（读/写）data中对应的属性。

事件处理

v-on: @

• 事件的回调需要配置在methods对象中，最终会在vm上

事件修饰符

1. prevent：阻止默认事件（常用）；
2. stop：阻止事件冒泡（常用）；
3. once：事件只触发一次（常用）；
4. capture：使用事件的捕获模式；
5. self：只有event.target是当前操作的元素时才触发事件；
6. passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

键盘事件

• keyup
• keydown
• keypress

计算属性

• 计算属性是基于它们的响应式依赖进行缓存的
• 与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
• 1.计算属性最终会出现在vm上，直接读取使用即可。

监视属性

computed和watch之间的区别

• computed能完成的功能，watch都可以完成。
• watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。

绑定样式

条件渲染

• v-if

列表渲染

• v-for

收集表单数据

• v-model

过滤器

内置指令

• v-text
• v-html
• v-cloak
• v-once
• v-pre

自定义指令

生命周期

• 常用的生命周期钩子：
  1. mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
  2. beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

组件

• 非单文件组件（不常用）
• 单文件组件

在学习前端之前，我只有一些408和C语言的基础，也从来没接触过实际开发。具体的学习路线我是参考了黑马的前端开发学习路线。听课的话都是b站上公开的课程。

1. HTML+CSS基础 ：5天

看课。比较基础，前期跟看了一段时间视频，中期感觉视频讲的略啰嗦，于是直接看笔记，遇到案例再看视频。因为知道实际开发会用到后面的框架，所以以掌握知识为主，较少跟着敲代码。

重点：理解CSS盒子模型，移动端网页适配方式(rem、vw/wh)，响应式(媒体查询)，流式布局(主要是flex)，会用less，会用BootStrap框架。

课程视频
学习笔记
学习笔记(移动端css)

2. JavaScript基础：5天

看课+跟敲代码。有一些其他语言基础，因此跳过了大部分循环声明函数体的基础。

重点：主要是要理解webAPI=DOM+BOM，会操作DOM。

课程视频

3. jQuery：2天

看课+跟敲代码。基本是提高对JS的易用性的封装，所以很好学。

重点：隐式迭代，筛选与排他，链式编程，BootStrapJS插件
项目：ToDolist

课程视频

4. Ajax：2天

这部分和前面很不一样，涉及到数据通信，第一次看不太理解。

5. Vue：7天

看课+跟敲代码
重点：MVVM模型，模板语法，生命周期

课程视频
学习笔记

【课程主页】

【课程视频】

课程需求

• 必须：GAMES101
• 非必须：着色器编程基础（GLSL 或 HLSL 等等）

（已修完，笔记待整理）

3D变换

3D变换相对于2D变换来说只是多增加了一个维度，可由2D变换举一反三得来

3D旋转

3D旋转在绕Y轴旋转时理解有些特殊，绕Y轴旋转的矩阵表现出来是转置的状态

• X x Y = Z
• Y x Z = X
• X x Z = -Y

罗德里格斯旋转公式 Rodrigues’ Rotation Formula

我们说在三维空间内绕某一轴旋转，默认这个轴是过原点的，罗德里格斯旋转公式就是总结了绕任意过原点的轴旋转的公式

视图变换

视图/相机变换

首先定义相机

• 相机位置
• 相机方向
• 相机朝上方向

规定相机永远在原点，沿着-Z看，相机朝上方向为Y，变化的永远是其他物体

（这里建议看视频）

投影变换

正交投影

透视投影

如何透视投影？

先将Frustum远平面及远平面到近平面之间的所有平面挤压到近平面大小，变成Cuboid的样子，然后做一次正交投影

如何做挤压？

（同样建议看视频）

2D线性变换

我们将如下图所示的简单矩阵乘法定义为对向量的线性变换。

缩放

镜像

错切

旋转

齐次坐标

平移无法写成线性变换

解决办法：齐次坐标

2D变换的齐次坐标形式

反向变换

复合变换

注意：先旋转，再平移，写作 T·R·向量，从右往左写

3D变换

增加一个维度，其他类似

向量乘法

点乘 Dot (scalar) Product

得到的结果是一个数，表示a在b上的投影长度

图形学应用：

• 找到两个向量的夹角
• 找到一个向量在另一个上的投影
• 测量两个方向多近
• 分解一个向量
• 确定前后

叉乘 Cross (vector) Product

• 与两个初始向量正交
• 方向由右手法则确定
• 在构建坐标系时很有用

图形学应用：

• 确定左右
• 确定里外

正交规范基与坐标系 Orthonormal Bases / Coordinate Frames

• 在表示点、坐标、位置时非常重要。
• 通常会有许多组坐标系统：全局坐标系统、局部坐标系统、世界坐标系统、模型坐标系统，以及模型的部分坐标系统
• 转换这些系统/基之间是一个非常重要的议题

矩阵

(基本纯线代内容，不再赘述)

向量乘法的矩阵形式

（Lecture4的罗德里格斯旋转公式会用到这个性质）

【课程主页】

【课程视频】

什么是计算机图形学？

（SFX特效、动作捕捉）；动画（毛发、光线、几何与渲染、模拟与碰撞）；设计（CAD、碰撞测试、工业设计、室内设计）；数据可视化；虚拟现实（AR与VR、；电子绘画（如ipad手绘）；模拟（物理模拟、仿真）；GUI（图形学用户接口）；字体（点阵与矢量）

为什么学习计算机图形学？

• 思维挑战
• 真实的东西在虚拟世界内如何作用
• 需要对于真实世界的理解（输入）
• 需要新的显示方法、设备与技术（输出）
• 技术挑战
• 数学（投影、曲线、表面）
• 光线与阴影的物理
• 体现3D物体并操作
• 动画与模拟
  （此节课不包括学习3D建模软件）

本门课程内容

这门课程 包含 以下四个方面：

光栅化、曲线与网格、光线追踪、动画与模拟

• 光栅化：将三维空间的几何形体显示在屏幕上，是实时（30+fps）计算机图形学的主要应用
• 曲线与网格：如何表示一条光滑的曲线、一个曲面，如何细分以得到更复杂的曲面，形变时如何保持拓扑结构
• 光线追踪：动画和电影内使用，慢但能生成非常真实的画面（tradeoff，权衡）。本节课还介绍实时光线追踪
• 动画与模拟：弹球（挤压与回弹），布料模拟

这节课 不包含 ：

OpenGL等计算机图形学API、计算机视觉（Computer Vision，一切需要猜测的事情，识别）、硬件编程

（已修完，笔记待整理）