搜索到
1
篇与
的结果
-
内置指令 1. v-text作用：向其所在的节点中渲染文本内容注：v-text会替换掉节点中的内容，{{xxx}}则不会<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-text指令</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- v-bind：单向绑定，可简写为:xxx v-model：双向数据绑定 v-for：遍历数组、对象、字符串 v-on：绑定事件监听，可简写为@ v-if：条件渲染 v-else：同理 v-show：同理 --> <div id="root"> <div>你好，{{name}}</div> <div v-text="name">你好，</div> <div v-text="str"></div> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 const vm = new Vue({ el: '#root', data: { name: '孙笑川', str: '<h3>孙笑川</h3>' } }) </script> </body> </html>2. v-html作用：向指定节点渲染包含html结构的内容与插值语法的区别：1. v-html会替换掉节点中所有的内容，{{xxx}}不会；2. v-html可以识别html结构注：存在安全性问题，1. 在网站上动态渲染任意html很危险，容易导致XSS攻击；2. 提交内容上不使用html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-html指令</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <div>你好，{{name}}</div> <div v-html="str"></div> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 const vm = new Vue({ el: '#root', data: { name: '孙笑川', str: '<h3>孙笑川</h3>' } }) </script> </body> </html>3. v-cloak定义：本质是一个特殊属性（没有值），Vue实例创建完毕并接管容器后，会删掉v-cloak属性使用css配合该指令，可以解决网速慢等原因引起的页面直接展示{{xxx}}的问题<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-cloak指令</title> <style> [v-cloak]{ display: none; } </style> </head> <body> <div id="root"> <div v-cloak>你好，{{name}}</div> </div> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 new Vue({ el: '#root', data: { name: '孙笑川', } }) </script> </body> </html>4. v-once定义：v-once所在节点在初次动态渲染后，就视为静态内容了以后数据的改变不会引起v-once所在结构的更新，可用于性能优化<!DOCTYPE html> <html lang="en"> <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}}</h2> <h2>当前值：{{n}}</h2> <button @click="n++">点我n+1</button> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 new Vue({ el: '#root', data: { n: 1 } }) </script> </body> </html>5. v-pre定义：跳过其所在节点的编译过程可以利用该指令跳过：没有使用指令语法、插值语法的节点，加快编译<!DOCTYPE html> <html lang="en"> <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>你好，孙笑川</h2> <h2>当前值：{{n}}</h2> <button @click="n++">点我n+1</button> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 new Vue({ el: '#root', data: { n: 1, } }) </script> </body> </html>
