Vue的基本语法

最常用的属性

1. el : " " 指定vue所操作的dom范围，属性值是你获取的节点
2. data 就是vue的model，是存放数据的，属性值是一个对象或者是一个函数，在组件中的data是一个函数
3. methods 是vue中的事件方法

Vue的基本内容

Vue的渲染

1. 指令式渲染：
   （1） v-html, v-text 采用{{}}语法 ==>插值运算
   （2） v-html：它可以加标签，它会解析成html
   （3） v-text：不能加标签，如果加了，它会当作字符串展示出来

插值表达式

（1）{{data中的表达式}}

v-text与表达式的区别

（1）默认v-text没有闪烁的问题，而插值表达式有闪烁问题
（2）v-text 会覆盖元素中原本的内容，但是插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空

v-html 与 v-text的区别

（1）v-html会解析html格式
（2）v-text与插值表达式会把内容当作文本来解析
（3）v-html和v-text 都会覆盖元素中原有的内容

v-cloak

（1）v-cloak 能够解决插值表达式闪烁的问题

<p v-cloak> {{ msg }} </p>

并在css中设置
[v-cloak]{
display:none;
}
让所有设置v-cloak 的元素隐藏，当加载完毕之后，元素身上的v-cloak 就会小时

条件指令 : v-if

v-if=" a "
后面的值如果是true节点就显示，false 就隐藏

v-show=""

改变css中的display
后面的值如果是true 节点就显示，false 就隐藏

v-if与v-show 的区别

v-if是对节点的删除和添加，v-show是对display属性值none 和block的切换

v-if与v-show的区别及使用场景

共同点：都是动态显示DOM元素
不同点：
v-if：
v-if是动态的向DOM树内添加或删除DOM元素
v-if 切换一个局部编译/卸载的过程，切换时会合适销毁和重建内部事件监听和子组件
v-if 是懒惰性的，初始条件=false 什么也不做 只有在条件第一次=true 时，才开始局部编译
v-show 势在任何体哦阿健下（首次条件是否为真） 都会被编译，然后缓存，而且DOM元素保留。
v-if有更高的切换消耗
使用场景：
v-if 适合运营条件不大可能改变
v-show:
v-show 有更高的初始化渲染小号
v-show 只是简单的基于css切换
v-show 是通过设置DOM元素的display实现控制显隐的
使用场景：
v-show 适合频繁勤换
循环指令: v-for=""
值是一个数组 {{item, index}} in 数组名
值是一个对象 {{ value,key}} in 对象名 value 是属性值 key是属性
在v-for中key 的使用注意事项
v-for 循环的时候，key 属性只能使用number 或string 且是唯一的
key在使用的时候，必需使用v-bind 属性绑定的形式，指定key的值
动态属性: v-bind:class="a"
v-on:click=“事件名”
缩写@click=“事件名”
v-model 数据绑定
可以在表单中使用v-model 实现数据双向绑定
text类型中文本都是字符串，v-model中的值相同

复选框v-model 中的值是boolean

单选框 v-model 中值是value


v-model 实现的原理
angular是mvc模式，ng-model 是靠脏值检测
vue靠的是数据劫持和发布者订阅者模式
数据劫持
　　Object.definePropery() 这个方法
　　　生成对象的方法 字面量 var obj={}/new Object()
　　　Object.definePropery() 给一个对象定义新属性或修改一个对象的属性
　　　object.getOwnPropertyDescriptor() 返回关于一个对象某个属性的描述符，
　　　　第一个参数是目标对象，第二个参数是 对象的某个属性
　　　　　　var obj={age:12}
　　　　　　console.log(object.getOwnPropertyDescriptor(obj,‘age’))
　　　　返回属性的意思：
　　　　configurable 配置选项，值为true代表这个属性可删除
　　　　enumerable 值为true 代表可枚举 可以使用 for in 遍历
　　　　value 这个属性的值
　　　　writeable 代表这个属性可以更改
　　　　　如果有了set和get属性就不能有writeable 和 value属性
常见的修饰符
　azy v-model 在每次 input 事件触发后将输入框的值与数据进行同步