1.v-once指令
日常开发中用的很多，只渲染元素和组件一次，随后的渲染，使用了此指令的元素/组件及其所有的子节点，都会当作静态内容并跳过，这可以用于优化更新性能。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>v-once 指令</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <!-- msg不会改变 --> <p v-once>{{msg}}</p> <!-- msg会改变 --> <p>{{msg}}</p> <p> <input type="text" v-model="msg" name=""> </p> </div> </body> </html> <script> var app = new Vue({ el: "#app", data: { msg: "hello" }, }); </script>
2.v-text指令
和插值表达式（双花括号）相似，渲染标签内容。
初始标签内没内容，不会出现插值表达式的闪烁问题。
v-test对应的数据会完全覆盖标签中的内容；插值表达式只会替换自己的占位符，其他内容不变。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>v-text 指令</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <!-- 在指令中不要写插值语法 直接写对应的变量名称 在 v-text 中 赋值的时候不要在写 插值语法 一般属性中不加 {{}} 直接写 对应 的数据名 --> <p v-text="msg"></p> <p v-text="word"></p> <!-- Vue 中只有在标签的 内容中 才用插值语法 --> <p>{{msg}}</p> <p>{{word}}</p> </div> </body> </html> <script> var app = new Vue({ el: "#app", data: { msg: "hello", word:"<h1>hello</h1>" }, }); </script>
3.v-html指令
v-html对应的数据会完全覆盖标签中的内容，但会把对饮数据当作html解析到页面上，而插值表达式和v-text只会把数据当作普通文本加载到页面上。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>v-html 指令</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <p v-html="msg"></p> <p>{{msg}}</p> </div> </body> </html> <script> var app = new Vue({ el: "#app", data: { msg: '<h1>我是一个html标签！</h1>' }, }); </script>
4.v-pre指令
显示原始信息跳过编译阶段，跳过这个元素和他的子元素编译过程，一些静态的内容不需要编译加这个指令可以加快渲染。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>v-pre 指令</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <span v-pre>{{ 我不需要被编译 }}</span> <!-- 显示的是{{ 我不需要被编译 }} --> <span v-pre>{{msg}}</span> <!-- 即使data里面定义了msg这里仍然是显示的{{msg}} --> </div> </body> </html> <script> var app = new Vue({ el: "#app", data: { msg: 'Hello Vue', }, }); </script>
5.v-cloak
网速慢时，页面会闪现标签里插值表达式，例如{{ msg }}。使用v-cloak，还没渲染完时有这个属性的的样式设为隐藏，渲染完v-cloak标签会自动消失变回显示。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>v-cloak 指令</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script> </head> <style type="text/css"> /*通过属性选择器 选择到带有属性v-cloak的标签 让他隐藏 */ [v-cloak] { /* 元素隐藏*/ display: none; } </style> <body> <div id="app"> <!--让带有插值 语法的 添加 v-cloak 属性 在数据渲染完场之后，v-cloak 属性会被自动去除， v-cloak一旦移除也就是没有这个属性了 属性选择器就选择不到该标签 也就是对应的标签会变为可见 --> <div v-cloak>{{msg}}</div> </div> </body> </html> <script> var app = new Vue({ el: "#app", data: { msg: 'Hello Vue', }, }); </script>