1. MVVM思想： （MVVM(model-view-viewModel)是双向数据绑定的，VUE本身实现了数据和试图的相互监听影响。数据改变vm会帮我们更新视图，视图改变vm会帮我们更新数据。MVC(model-view-controller)是单向数据绑定，数据更改可以重新渲染视图，但视图改变不会更新数据。）
* M -- model -- 数据层
* V -- view -- 视图层
* vm -- viewModel -- 数据和视图的监听层
2. el, data, motheds
* el -- element 监听当前的dom节点，querySelector获取元素， 但是el获取的不能是html和body
* data 当前监听的数据，可以用vm.xxx = xxx 操作， 是vue的变量
* methods 视图中需要使用的方法，methods中的方法都是实例中用到的。
1. data中的属性和methods中的属性不能重复。
2. methods中的this是当前的实例vm，data中的this不是当前实例。
3. methods中的属性和data中的属性都会挂载到实例上。
3.小胡子语法( mustache语法 )
* 使用 -- {{ 数据变量 }}
* 注意：
1. 只能编写表达式（变量， 赋值表达式， 函数执行， 三元表达式等）；
1. 不能写语句。如for循环、if、switch、var等；
3. 最终展示的是表达式的结果；
4. 小胡子语法中绑定的数据值是对象类型时，会基于JSON.stringify把其编译为字符串再展现出来（）而不是直接toString处理的；
4.视图渲染
* 视图自动更新的前提是这个数据被vue劫持，没被劫持的数据改变对应的视图是不是自动更新的。
1. data中的**对象**新增的属性值，不会触发视图的自动更新（**只有在data中定义的属性才会被vue劫持**）
* 解决办法：1. 初始化的时候就定义好，赋值undefined
2. 不修改属性名，直接替换对象的整体值（指向新的堆内存），整个对象替换，每一个后代属性都会被劫持，
例如：使用Object.assign()(注意新的对象放在前面)，使用...obj（原对象在新对象中展开）
3. 可以基于vm.$set内置方法修改数据 vm.$set(对象, 属性名, 属性值)
4. $forceUpdate 强制通知视图更新，但是不会设置get、set
2. 初始数据是数组的情况下，修改数据的情况下是不会自动更新视图
* 解决办法 1. vm.$set
2. push, pop, shift, unshift, splice, sort, reverse 这几个数组方法可以触发视图重新渲染
3. 重写数组的值（指向新的堆内存）
5. 常用指令 drective
* vue中v-xxx的行内属性，统称为指令。
* vue加载成功并进行处理时，会按照相关的规则解析和渲染视图
1. v-text
* 定义 -- 给非表单元素设置内容，会把所有的内容当成文本显示。等同于小胡子语法
* 使用 -- v-text = " 变量 "
* 注意 -- vue在没加完时，小胡子语法会在页面展示{{ xxx }}, 加载完才会显示真真的内容，导致用户体验不好， 可以用v-text代替
2. v-html
* 定义 -- 给非表单元素设置内容，等同于innerHTML, 支持对标签的自动识别
* 使用 -- v-html = " 变量 "
* 注意 -- 可信任的地方使用 用户操作的一般不添加此指令
3. v-for
* 定义 -- 循环展示标签， 加给谁谁循环
* 使用 -- v-for= ' (data, index) in arr ' data代表当前项， index是当前的索引
* 注意 -- data, index 是自己定义的变量，两个都写要加括弧
* 使用场景 -- 可循环数组、字符串、数字、对象
4. v-bind
* 定义 -- 给元素的内置属性动态绑定数据
* 使用 -- v-bind:src = " 变量 " 简写：:src = " 变量 "
* 注意 -- 是专门用来处理行内属性（src，class，style）的指令
5. v-clock
* 定义 -- 解决小胡子语法的显示问题
* 使用 -- <div v-clock>{{ text }} </div> 需要配合css: [v-clock] { display: block }
* 原理：
1. 当模板渲染之前，执行的是普通的html，这时，我们写的css样式起作用，让元素隐藏，看不见小胡子。
2. 当模板渲染完成之后，vue会自动把整个行内样式移除，此时页面上展示的是渲染好的html。
6. v-once
* 定义 -- 绑定的数据是一次性，后面不论数据怎么改变，视图也都不会渲染。
* 使用 -- v-once
* 注意 -- vue 对有这个属性的元素，只渲染一次
7. v-pre
* 定义 -- 不用vue渲染
* 使用 -- v-pre
* 注意 -- 可以用来提升vue的编译效率
8. v-if
* 定义 -- 控制当前元素是否在结构中加载 -- 控制的是组件的加载和卸载 =》DOM的增加和删除
* 使用 -- v-if = " 判断体 "
* 注意 -- 判断体为TRUE则会在dom中渲染，为FALSE时会删除。 有对应的v-else-if 、 v-else 使用时中间不能穿插其他标签
* 扩展 -- template 当多个元素判断条件一样，又不想在添加父结构标签，可以使用template标签将其包裹起来，这样不会产生父结构标签
9. v-show
* 定义 -- 基于display:none 控制元素的显示隐藏
* 使用 -- v-show = " 变量 "
* 注意 -- v-show 后面是一个boolean类型
****
v-show和v-if的区别：
1. 条件不成立时，v-if不加载dom标签， v-show设置display:none属性
2. v-if有较大的性能开销，v-show有较大的初始加载开销
10. v-model
* 定义 -- 表单和数据之间的双向绑定
* 使用 -- v-model = " value "
* 原理 -- 1. 先把数据绑定给表单元素， 一般把数据赋值给表单元素的value；
2. 监听表单元素的内容变换；
3. 内容改变后，会把对应的数据也改变；
4. 对应的数据改变，视图中所有的用到数据的地方会重新渲染
* 表单中使用 v-model
1. 按照v-model分组，单选框准备的的数据是一个值，复选框准备的数据是一个数组。
2. 每一个框都一个value，被选中的，数据值就是当前选中的value，相反，对应的值是多少，对应value的元素也会被选中。
6. vue中的事件处理
1. 指令
* 用来实现事件绑定的指令 -- DDOM2级事件绑定
* v-on 简写 @
2. 使用
* 语法
1. v-on:事件类型 = " Fn() "
2. @事件类型 = " Fn() "
* 传参
1. Fn -- 不需要传递实参时，小括弧省略
2. Fn(a, b) -- 需要传递实参，注意形参和实参的个数相对应
3. Fn($event, a, b) -- 用$event接受事件对象，且只能用其接收对象。**如：$event.target.value**
3. 常规修饰符
* @xxx.prevent = " Fn " -- 阻止默认行为 相当于原生的：**preventDefault**
* @xxx.stop = " Fn " -- 组织冒泡传播 相当于原生的：**stopPropergation**
* @xxx.once = " Fn " -- 当前函数只能执行一次
* @xxx.self = " Fn " -- 只有点击这个元素本身才能触发
* @xxx.capture = "Fn" -- 控制函数在捕获阶段执行 相当于原生的：ele.addEventListeren(' click ', Fn, { capture: false})
* @xxx.passive = "Fn" -- 先默认执行 后执行函数 ele.addEventListeren(' click ', Fn, { capture: false, passive: true}) // passive: true 优先执行默认
注意：1. 修饰符可以串联 如：<a v-on:click.stop.prevent = "Fn">点击</a>
2.修饰符串联时，注意顺序 如： v-on.click.prevent.self 会阻止所有点击； 而 v-on.click.self.prevent 只会阻止对元素自身的点击
4. 按键修饰符
* 使用 -- @keydown按键（或键盘码）= "Fn"
* 支持 -- .enter .tab .delete .esc .space .up .down .left .right