v-pre 跳过元素和它的子元素的编译过程 跳过没有指令的节点，加快编译 使用的不多 举个例子：
div id="app-1" > {{ msg }} </div> <script> new Vue({ el:'#app-1', data:{ msg:['漂亮'], } })加了v-pre之后
v-cloak 解决闪烁问题 使用不多 v-once 只渲染元素一次，选然后变为静态元素，不在发生改变 v-text 更新元素的textContent innerText 相当于插值表达式 {{ }} v-text 替换元素中的所有文本 {{ }}又称mustache语法 （胡子的意思） 只替换自己，不清空元素的内容 v-text优先级高于{{ }} 举例：
<div id="app-1" v-text = 'msg1' > {{ msg }} </div> <script> new Vue({ el:'#app-1', data:{ msg:['漂亮'], msg1:'今天天气很好' } }) </script>比较textContent与innerText 1.dom.textContent = ‘xxx’; dom.innerText = ‘xxx’; 两个都可以把指定节点里面的所有子节替换掉
<div id="demo"> '好开心的一天'<br> <span>可以全部改变吗？</span> <script> const a = 1; </script> <style> a:{} </style> </div>改变之后：
2.textContent获取所有元素，innerText不获取所有元素
<div id="demo"> '好开心的一天' <script> const a = 1; </script> <style> a:{} </style> </div> <script> console.log(demo.textContent); console.log(demo.innerText); </script>3.innerText会受css样式的影响，不会返回隐藏元素的文本
<div id="demo"> '好开心的一天'<br> <span style="display: none;">innerText，textContent哪个会获取到</span> <script> const a = 1; </script> <style> a:{} </style> </div>4.innerText触发重排重排、重绘对性能有影响 更新元素使用textContent ，从性能角度出发，textContent不会触发重排 5.textContent是标准方法，innerText IE引入
v-html 更新元素的innerHTML
比较危险 ，xss攻击 所以要在可信内容上使用v-html，永远不用在用户提交的内容上 比如：当在输入框输入标签内容时 会造成死循环
<input type="text" class='input1'> <button class='button1'>提交</button> <div id='app'> <div v-html='msg'></div> </div> <script> const oInput = document.getElementsByClassName('input1')[0]; const oButton = document.getElementsByClassName('button1')[0]; let msg = 'null'; const vm = new Vue({ el:'#app', data:{ msg:"今天又是早起的一天" } }) // oInput.oninput = function(){ // msg = oInput.value; // } oButton.onclick = function(){ vm.msg = oInput.value; } </script>测试结果：
-当输入文本时，测试结果正常 -输入一个span标签 会把input的内容当作html插入到页面上 -再输入一个img标签试试： 结果为死循环。这就是v-html不用在用户提交内容上的原因。
[条件渲染] v-if（为真值就展示，为假值不展示）
<div id="app"> <div v-if="show">Allie最漂亮啦</div> </div> <script> const vm = new Vue({ el:'#app', data:{ show:true //为false则不展示 内容 } }) </script>v-else-if(当v-if不成立时)
<div id="app"> <div v-if="type === 'A'">Allie最漂亮啦</div> <div v-else-if = "type ==='B'">Allie今天看起来不怎么好</div> </div> <script> const vm = new Vue({ el:'#app', data:{ // show:true, type:'B' } }) </script>v-else
<div id="app"> <div v-if="type === 'A'">Allie最漂亮啦</div> <div v-else-if = "type ==='B'">Allie今天看起来不怎么好</div> <div v-else>Allie是一个小黑妞啦</div> </div> <script> const vm = new Vue({ el:'#app', data:{ // show:true, type:'c' } }) 对多个元素进行控制展示使用 <template v-if></template>元素，它最终不会被渲染到页面当中v-show 和v-if用法一样 但两者有一点小区别：v-show是通过控制css属性来控制是否要展示，页面上渲染了，但是通过diaplay：none控制为不展示。v-if如果为假值则会真正移除。
v-if 和 v-show 1.v-if是惰性的，如果在初始渲染时条件为假，则什么也不做，知道条件第一次变为真时，才会开始渲染条件块。v-show不管条件是什么，元素总会被渲染，并且只是简单基于css进行切换。 2.v-if有更高的切换开销，v-show会有更高的初始渲染开销，如果需要非常频繁地切换，则是使用v-show较好，如果在运行时条件很少改变，则使用v-if较好。 3.v-show不支持元素 4.v-show不支持v-else
