Vue内置指令整理

vue的内置指令

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

2. v-model : 双向绑定数据

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

4. v-on : 绑定事件监听，可以简写为 @

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

6. v-else : 条件渲染（动态控制节点是否存在）,和v-if配合使用

7. v-show : 条件渲染（动态控制节点是否展示） 以上语法在以前的文章都有说明

8. v-text : 渲染文本，类似插值语法，但是会完全覆盖标签之间的文本，比较少用

<!-- 使用v-text渲染文本 -->
<h4 v-text="msg"></h4>

9. v-html : 向指定的节点中渲染包含html的内容
   9.1 与插值语法的区别：
   （1）会替换掉节点中所有的内容，插值语法不会
   （2）可以识别html结构 9.2 要注意的是，v-html有安全性问题
   （1）在网站上动态渲染任意的html是非常危险的，容易导致xss共计
   （2）一定要在可信的内容上使用v-html，永远不要再用户提交的内容上使用v-html

<!-- 使用v-html渲染具有html结构的内容 -->
<h4 v-html="link"></h4>


data() {
    return {
        link: '<a href="https://www.baidi.com">点击跳转</a>'
    }
}

10. v-cloak : 与css配合解决网速慢时，页面展示出未经解析的模板（插值语法{{xxx}}）的问题
    10.1 本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性

<style>
    /* css样式 属性选择器 包含v-cloak属性的节点 控制在加载出来数据之前不展示数据 */
    [v-cloak] {
        display: none;
    }
</style>


<!-- name未解析之前 包含v-cloak属性，display为none 解析之后会删掉v-cloak属性，元素正常显示 -->
<h2 v-cloak>{{name}}</h2>

11. v-once : 控制所在节点职动态渲染一次，用于获取初始值
    11.1 v-once所在的节点在初次动态渲染后，就是为动态属性了
    11.2 以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能

<!-- 只显示初始化的值 -->
<h4 v-once>初始化的值是： {{ name }}</h4>

12. v-pre : 跳过模板解析，当做文本处理
    12.1 跳过所在节点的编译过程
    12.2 可以利用它跳过： 没有使用指令语法，没有使用插值语法的节点，会加快编译

<!-- 跳过模板检查 提升编译性能 -->
<h4 v-pre>这是一个不需要解析的静态文本</h4>


<!-- 不再进行模板解析 输出的内容是： 初始化的值是： {{ name } -->
<p v-pre>初始化的值是： {{ name }}</p>