```
常见的指令
v-model
v-text
v-html
v-bind:属性 : :class
v-on:事件
事件对象
事件函数 第一个参数
$event 保存 事件对象
事件修饰符： .stop .prvent .self .capture .once
:class
div :class="a" 解析成 实例 数据a的值
div :class="{active:1==1}"
div :class="{active:isActive}"
div :class="[a,b,'box',{active:isActive}]"
:style
:style="{width:100+200+300+'px',height:a}"
{
data:{
a:"300px"
}
}
条件渲染
v-if
v-else
v-show
列表渲染
v-for
li v-for="(item,index) in data"
```
## MVVM原理
es5 Object.defineProperty()
Object.keys(obj)
Object.values()
MVVM
M改变 视图V自动刷新 VM
当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。
这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在 property 被访问和修改时通知变更。这里需要注意的是不同浏览器在控制台打印数据对象时对 getter/setter 的格式化并不同，所以建议安装 vue-devtools 来获取对检查数据更加友好的用户界面。
每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。
## 虚拟dom
利用js对象的 结构 描述 一个dom 树状结构
```
<div class="box" id="wrap">
<p class="op">
你好
</p>
<span>我很好</span>
你好吗？
</div>
{
tag:'div',
attr:{
className:'box',
id:'wrap'
},
children:[
{
tag:'p',
attr:{
className:'op'
},
children:[
'你好'
]
},
{
tag:'span',
attr:null,
children:[
'我很好'
]
},
'你好吗'
]
}
为什么要用vdom？
网页加载过程
加载dom树 ---> 加载css树--->加载render树-->gpu渲染 图显示出来
网页 操作dom 性能消耗 比较大
vue mvvm 数据变了 视图自动刷新
刷新：需要有一个 比较好的 机制 （尽量减少dom操作）
vue框架构建项目，在初次渲染时，在 dom加载完成后，生成一个虚拟dom树，缓存起来，后面我们数据更新之后，不是直接更新dom，而是先生成一个虚拟dom树，跟上一次缓存起来的虚拟dom进行比较（diff算法），通过算法比较后，得到最优（最少操作dom的方案）,根据这个方案去更新真实dom
循环key（每一层元素加一个独一无二的标志相当于电影院座位号）: 提高diff算法比较虚拟dom的速度，提高网页加载速度
```
## 数组 和 对象操作 bug
```
关于对象：
数据，对象，如果不是在 data中 初始定义的，而是 动态添加的一个 this的数据，defineProperty劫持不到
导致，数据改变视图不刷新（使用某个数据，现在data中定义）
关于数组：
数组[下标] = 值 直接通过下标 改变 数组中的 某个值
数组.length = newLength 直接改变length也捕获不到
数组问题解决？
vue提供一个方法 set手动来刷新视图
调用两种：
Vue.set(数据,属性,值)
this.$set(数据,属性,值)
关于操作length 不要直接操作length splice()删除
```
