51工具盒子01、初识 Vue {#01%E3%80%81%E5%88%9D%E8%AF%86-vue}
- 想让 Vue 工作，就必须创建一个 Vue 实例，且传入一个配置对象；
- root 容器里面的代码依然符合 html 语法，只不过混入了一些特殊的语法；
- root 容器里面的代码被称为【Vue 模板】；
- 容器和 vue 实例一对一关系 ；
- 真实开发中只有一个 vue 实例，并且会配合组件一起使用；
- {{xxx}}中要写 js 表达式，且 xxx 可以自动读取到 data 中的所有属性；
- 一旦 data 中的数据发生改变，页面中 使用该数据的地方也会改变。
02、Vue 模板语法 {#02%E3%80%81vue-%E6%A8%A1%E6%9D%BF%E8%AF%AD%E6%B3%95}
vue 模板语法有两大类： {#vue-%E6%A8%A1%E6%9D%BF%E8%AF%AD%E6%B3%95%E6%9C%89%E4%B8%A4%E5%A4%A7%E7%B1%BB%EF%BC%9A}
-
插值语法：
功能：用于解析标签体内容；
写法：{{xxx}}，xxx 是 js 表达式，且可以直接读取到 data 中的所有属性；
-
指令写法：
功能：用于解析标签等（包括：标签属性、标签体内容、绑定事件...）；
举例：v-bind:href="xxx" 或 简写为 :href="xxx" 同样 xxx 要写 js 表达式，且可以直接读取到 data 中的所有属性；
备注：vue 中有很多的指令，且形式都是：v-???，此处我们只拿 v-bind 举个例子
03、数据绑定 {#03%E3%80%81%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A}
Vue 中有两种数据绑定的方式： {#vue-%E4%B8%AD%E6%9C%89%E4%B8%A4%E7%A7%8D%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E7%9A%84%E6%96%B9%E5%BC%8F%EF%BC%9A}
-
单向绑定（v-bind）：数据只能从 data 流向页面；
-
双向绑定（v-model） ：数据不仅能从 data 流向页面，还可以从页面流向 data；
备注：
- 双向绑定一般都应用在表单类元素上（如：input、select 等）；
- v-model:value 可以简写为 v-model，因为 v-model 默认收集的就是 value 值。
04、el 与 data 的两种写法 {#04%E3%80%81el-%E4%B8%8E-data-%E7%9A%84%E4%B8%A4%E7%A7%8D%E5%86%99%E6%B3%95}
-
el 有两种写法
- new Vue 时候配置 el 属性；
- 先创建 Vue 实例，然后通过 vm.$mount('#root')指定 el 的值；
-
data 有两种写法
-
对象式
-
函数式
使用组件时，data 必须使用函数式，否则会报错。
注意：由 Vue 管理的函数，一定不要写箭头函数，一旦写了箭头函数，this 就不再是 Vue 实例了。
-
05、MVVM模型 {#05%E3%80%81mvvm%E6%A8%A1%E5%9E%8B}
MVVM模型： {#mvvm%E6%A8%A1%E5%9E%8B%EF%BC%9A}
- M：模型（Model）：data中的数据
- V：视图（View）：模板代码
- VM：视图模型（ViewModel）：Vue实例
备注： {#%E5%A4%87%E6%B3%A8%EF%BC%9A}
- data中所有的属性，最后都出现在vm身上；
- vm身上所有的属性及Vue原型上所有的属性，在Vue模板中都可以直接使用。
06、数据代理 {#06%E3%80%81%E6%95%B0%E6%8D%AE%E4%BB%A3%E7%90%86}
回顾Object.defineProperty方法 {#%E5%9B%9E%E9%A1%BEobject.defineproperty%E6%96%B9%E6%B3%95}
Object.defineProperty(person, 'age', {
// value: '18',
// enumerable: true, //控制属性是否可以枚举，默认值是false
// writable: true, //控制属性是否可以被修改，默认值是false
// configurable: true //控制属性是否可以被删除，默认值是false
// 当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
get() {
console.log('有人读取age属性');
return number;
},
// 当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
set(value) {
console.log('有人修改age属性');
number = value;
}
})
</code>
</pre>
### 何为数据代理 {#%E4%BD%95%E4%B8%BA%E6%95%B0%E6%8D%AE%E4%BB%A3%E7%90%86}
```javascript
let obj = { x: 100 }
let obj2 = { y: 200 }
// 数据代理：通过一个对象代理对另一个对象中属性的操作（读 / 写）
Object.defineProperty(obj2, 'x', {
get() {
return obj.x;
},
set(value) {
obj.x = value
}
})
</code>
</pre>
### Vue中的数据代理 {#vue%E4%B8%AD%E7%9A%84%E6%95%B0%E6%8D%AE%E4%BB%A3%E7%90%86}
1. Vue中的数据代理：
通过vm对象来代理data对象中属性的操作（读/写）
2. Vue中数据代理的好处：
更加方便的操作data中的数据
3. 基本原理：
通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性，都指定一个getter/setter。
在getter/setter内部去操作（读/写）data中对应的属性。
07事件处理 {#07%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86}
------------------------------------------------
### 事件的基本使用 {#%E4%BA%8B%E4%BB%B6%E7%9A%84%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8}
1. 使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
2. 事件的回调需要配置在methods对象中，最终会在vm上；
3. methods中配置的函数，不要使用箭头函数！否则this就不是vm了；
4. methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
5. @click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；
### 事件修饰符 {#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6}
1. prevent：阻止默认事件（常用）；
2. stop：阻止事件冒泡（常用）；
3. once：事件只触发一次（常 用）；
4. capture：使用事件的捕获模式；
5. self：只有event.target是当前操作的元素时才触发事件；
6. passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
### 键盘事件 {#%E9%94%AE%E7%9B%98%E4%BA%8B%E4%BB%B6}
1. Vue中常用的按键别名：
回车 =\> enter
删除 =\> delete（捕获"删除"和" 退格"键）
退出 =\> esc
空格 =\> space
换行 =\> tab（特殊，必须配合keydown使用）
上 =\> up
下 =\> down
左 =\> left
右 =\> right
2. Vue未提供别名的按键，可以使用按键原始的key值去绑定，但主要要转为kebab-case（短横线命名）
3. 系统修饰键（用法特殊）：ctrl、alt、shift、meta
(1). 配合keyup使用：按下修饰键的同时，在按下其他键，随后释放其他键，事件才被触发。
(2). 配合keydown使用：正常触发事件。
4. 也可以使用keyCode去指定具体的按键 （不推荐）
5. Vue.config.keyCodes.自定义键名=键码，也可以去定制按键别名
```
