<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="app"> <!-- v 指令 --> <!-- 1.有闪烁问题 2.可以放内容 --> <p v-cloak > {{ msg }} ！</p> <!-- 1.没有闪烁问题 2.会覆盖内容 --> <p v-text="msg2"></p> <!-- 1.会覆盖内容 2.把内容可以当做HTML --> <div v-html="msg3"></div> <!-- v-bind ,用于绑定属性的指令，这样就可以用js变量或表达式了 --> <button type="button" v-bind:title="msg + '可以用连接符'">绑定属性</button> <!-- v-bind ,可以简写 : --> <button type="button" :title="msg + '可以用连接符2'">绑定属性2</button> <!-- v-on 事件绑定机制 --> <button type="button" v-on:click="alertPlus" >绑定事件</button> <button type="button" v-on:mouseover="alertPlus" >绑定事件2</button> </div> <script type="text/javascript"> new Vue({ el:'.app', data:{ msg:'表达式', msg2:"<h1>html标签</h2>", msg3:"<h1>html标签</h2>", }, methods:{//methods 定义Vue实例所有可以用的方法 alertPlus: function(){ alert("hello 绑定事件") } } }) </script> </body> </html>
学习Vue第二节，v-cloak，v-text，v-html，v-bind，v-on使用
猜你喜欢
转载自www.cnblogs.com/shangrao/p/12823941.html
今日推荐
周排行