Vue中的内置指令

一、回顾指令

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

v-model 双向数据绑定

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

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

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

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

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

二、内置指令

v-text指令

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

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

 <div id="root">
        <h2>{{name}}</h2>
        <h2 v-text="name"></h2>
        <h2 v-text="str"></h2>
    </div>

<script>
        Vue.config.productionTip = false; //设置为 false 以阻止 vue 在启动时生成生产提示。

        new Vue({
            el: '#root',
            data:{
                name:'尚硅谷',
                str: '<h2>你好啊</h2>'
            }
        })
</script>

v-html指令

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

2.与插值语法的区别：

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

(2).v-html可以识别html结构

v-html存在安全性问题！！

<div id="root">
        <h2>{{name}}</h2>
        <h2 v-text="name"></h2>
        <h3 v-html="str"></h3>
    </div>

<script>
        Vue.config.productionTip = false; //设置为 false 以阻止 vue 在启动时生成生产提示。

        new Vue({
            el: '#root',
            data:{
                name:'尚硅谷',
                str: '<h2>你好啊</h2>'
            }
        })
    </script>

v-cloak指令

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>
        Vue.config.productionTip = false; //设置为 false 以阻止 vue 在启动时生成生产提示。

        new Vue({
            el: '#root',
            data: {
                n: 1
            }
        })
    </script>

v-pre指令

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

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

<div id="root">
        <h2 v-pre>vue很简单</h2>
        <h2>当前的n值是：{{n}}</h2>
        <button @click="n++">点我n+1</button>
    </div>

<script>
        Vue.config.productionTip = false; //设置为 false 以阻止 vue 在启动时生成生产提示。

        new Vue({
            el: '#root',
            data: {
                n: 1
            }
        })
    </script>