Vue的渲染

 Vue的渲染：　

　　　　
 指令式渲染：

v-html，v-text 

采用{{}}语法==>插值运算
v-html： 它可以加标签，它会解析成html

你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。

v-text： 不能加标签，如果加了，它会当作字符串展示出来
插值表达式:
{{ data中的数据 }}
v-text与插值表达式的区别：
默认v-text没有闪烁的问题的，而插值表达式有闪烁问题
v-text 会覆盖元素中原本的内容，但是插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空
v-html 与 v-text的区别：
v-html会解析html格式
v-text与插值表达式会把内容当做文本来解析
v-html 和 v-text都会覆盖元素中原有的内容

v-cloak:

v-cloak     能够解决 插值表达式闪烁的问题
并在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"
可以简写    :class="a"          v-bind可以省略

节点上绑定事件：

v-on:click="fn"        

可简写：@click="fn"
事件方法写在methods中
v-on 监听事件
v-on:click="事件名"
缩写@click="事件名"
v-model 数据绑定

• 可以在表单中使用v-model实现数据双向绑定
• text类型中的文本都是字符串，v-model中的值相同
• 复选框 v-model中的值是boolean
• 单选框  v-model中值是value

v-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属性
　　　　常见的修饰符：
　　　　　　.lazy  v-model 在每次 input 事件触发后将输入框的值与数据进行同步
               　　　　<input v-model.lazy="msg" >
                 　.number           自动将用户的输入值转为数值类型
               　　　　<input v-model.number="age" type="number">
                 　.trim                 自动过滤用户输入的首尾空白字符
                              <input v-model.trim="msg">
　　　　vue的事件修饰符
                 　　vue.js为 v-on 提供了事件修饰符
                 　　.stop                 阻止maop
                 　　.prevent           阻止默认事件
                 　　.captur             添加事件监听器时使用事件捕获模式
                 　　.self                  只当事件在该元素本身（比如不是子元素）触发是触发回调
                　　 .once                事件值触发一次
                 　　事件修饰符是可以串联的：
                 　　.stop和.self的区别：
                         　　.stop阻止事件冒泡
                         　　.self只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡行为