vue内置指令主要内容有哪些（Vue｜内置指令）
Vue的内置指令是带有v-前缀的特殊属性 ，它的作用是当表达式的值改变时将其一系列连带影响 ，响应地作用于DOM元素 。
推荐专栏：微信小程序实战开发专栏内置指令
开始前的准备 ，在目录下创建文件夹及对应的页面如下
创建好页面容器及对应的Vue实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>内置指令</title> <script src="../js/vue.js" type="text/javascript"></script> </head> <body> <!-- 准备好一个容器 --> <div id="root"> </div> <script type="text/javascript"> //Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示 。 // 创建vue实例 const vm = new Vue({ el: #root, //函数式 data: function () { return { name: 摔跤猫子 }; } }); </script> </body> </html>v-text指令
v-text指令作用是用于向其所在的节点标签渲染文本内容 ，使用方式如下
<div v-text="name">hi,</div>可以看到能够直接将在data中定义的name进行展示 ，但是原有标签中的hi ，这个内容被直接覆盖
它与差值语法的区别在于 ，v-text会将节点中的内容全部替换,而差值语法可以进行拼接
<!-- 1.差值语法 --> <div>hi ，{{name}}</div> <!-- 2.通过指令 --> <div v-text="name">hi,</div>v-html指令
v-html指令用于将html结构进行渲染 ，使用上述的v-text以及差值语法是不支持的 ，它只会将其通过字符的方式进行解析展示
在data中定义字段如下 htmlStr: <h2 style="color:red;">摔跤猫子</h2>,在html中通过差值语法或v-text渲染 ，节点标签以及样式都无法识别
<div>{{htmlStr}}</div>使用v-html渲染
<div v-html="htmlStr"></div>注意事项：v-html可以识别html结构 ，但是使用v-html时需要注意安全性问题 ，需要建立在内容可信任的基础上渲染数据随意渲染HTML是非常危险的操作 ，容易遭受XSS攻击
具体XSS攻击方式可参考此文章：点了下链接信息就泄露了 ，ta们是怎么做到的？v-cloak指令
v-cloak指令没有特定的值,不用给它指定等于号以及后面的数据,它只是一个特殊属性,等vue实例加载创建完成并接管指定的容器后,该属性会自动被剔除
<div v-cloak>{{name}}</div>类似于当页面因为网速过慢或页面加载内容过多等原因导致Vue实例无法迅速将节点内容渲染 ，那么页面上就会直接显示双括弧等标签 ，这种情况是不友好的 ，v-cloak属性即可解决这种问题 ，等渲染加载完成后再将其进行展示
v-once指令
v-once指令用于对该属性所在的标签节点在vue实例进行初次渲染后 ，就将其标记为静态内容 ，屏蔽双向绑定及其效果；后续一系列对该数据的操作都不会更新 ，常用于优化性能或数据标记
使用v-once指定可以用最简单的方式实现效果 ，不用定义其他函数或字段进行记录
<h2 v-once>初始访问量:{{TrafficVolume}}</h2> <h2>当前访问量:{{TrafficVolume}}</h2> <button @click="TrafficVolume++">点击增加访问量</button>v-pre指令
v-pre指令会直接跳过带有该指令的节点标签 ，直接忽视 ，拿来就用 。可以在没有使用差值语法的标签使用该指令 ，用于提升页面编译渲染速度 ，Vue在渲染时会直接忽略带有此指令的标签
<h2 v-pre>你好,{{name}}</h2> <h2 v-pre>当前访问量:{{TrafficVolume}}</h2>创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！