内置指令

常用

v-bind: 单向绑定,可简写为:xxx

v-model: 双向绑定

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

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

v-if: 条件渲染(动态节点是否存在)

v-show: 条件渲染(动态节点是否展示)

其他

v-text: 渲染文本内容,不会解析标签不能拼接文本

v-html: 渲染文本内容,可以解析标签,但存在安全性问题,会暴露cookie

 

v-cloak(没有值):

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

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

v-once:

    1.v-once所在的节点在初次动态渲染后,就改变为静态内容了

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

v-pre:

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

    2.可利用它跳过:没有使用指令语法、没有使用差值语法的节点

示例

<div id="root">
    <span v-text="str" v-cloak>11</span>
    <span v-html="str" v-cloak>11</span>
    <h2 v-pre>我不需要解析{{n}}</h2>
    <h2 v-once>初始的{{n}}</h2>
    <h2>当前的{{n}}</h2>
    <button @click="n++">点我n+1</button>
</div>
<script>
    new Vue({
        el: '#root',
        data:{
            str:"<h2>sdsad</h2>",
            n:10,
        }
    })
</script>