Vue｜内置指令

Vue���内置指令是带有v-前缀的特殊属性，它的作用是当表达式的值改变时将其一系列连带影响，响应地作用于DOM元素。

推荐专栏：微信小程序实战开发专栏

• 内置指令
• • v-text指令
  • v-html指令
  • v-cloak指令
  • v-once指令
  • v-pre指令

    内置指令

    开始前的准备，在目录下创建文件夹及对应的页面如下

    创建好页面容器及对应的Vue实例

            内置指令                            //Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。        // 创建vue实例        const vm = new Vue({            el: '#root',            //函数式            data: function () {                return {                    name: '摔跤猫子'                };            }        });    

    v-text指令

    v-text指令作用是用于向其所在的节点标签渲染文本内容，使用方式如下

    hi,

    可以看到能够直接将在data中定义的name进行展示，但是原有标签中的hi，这个内容被直接覆盖

    它与差值语法的区别在于，v-text会将节点中的内容全部替换,而差值语法可以进行拼接

            hi，{{name}}                hi,

    v-html指令

    v-html指令用于将html结构进行渲染，使用上述的v-text以及差值语法是不支持的，它只会将其通过字符的方式进行解析展示

    在data中定义字段如下

    htmlStr: '
    摔跤猫子
    ',

    在html中通过差值语法或v-text渲染，节点标签以及样式都无法识别

    {{htmlStr}}

    使用v-html渲染

    注意事项：v-html可以识别html结构，但是使用v-html时需要注意安全性问题，需要建立在内容可信任的基础上渲染数据随意渲染HTML是非常危险的操作，容易遭受XSS攻击

    具体XSS攻击方式可参考此文章：点了下链接信息就泄露了，ta们是怎么做到的？

    v-cloak指令

    v-cloak指令没有特定的值,不用给它指定等于号以及后面的数据,它只是一个特殊属性,等vue实例加载创建完成并接管指定的容器后,该属性会自动被剔除

    {{name}}

    类似于当页面因为网速过慢或页面加载内容过多等原因导致Vue实例无法迅速将节点内容渲染，那么页面上就会直接显示双括弧等标签，这种情况是不友好的，v-cloak属性即可解决这种问题，等渲染加载完成后再将其进行展示

    v-once指令

    v-once指令用于对该属性所在的标签节点在vue实例进行初次渲染后，就将其标记为静态内容，屏蔽双向绑定及其效果；后续一系列对该数据的操作都不会更新，常用于优化性能或数据标记

    使用v-once指定可以用最简单的方式实现效果，不用定义其他函数或字段进行记录

      
    初始访问量:{{TrafficVolume}}
      
    当前访问量:{{TrafficVolume}}
      点击增加访问量

    v-pre指令

    v-pre指令会直接跳过带有该指令的节点标签，直接忽视，拿来就用。可以在没有使用差值语法的标签使用该指令，用于提升页面编译渲染速度，Vue在渲染时会直接忽略带有此指令的标签

     
    你好,{{name}}
     
    当前访问量:{{TrafficVolume}}