VUE指令-事件绑定v-on
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
v-on:event
|
<!-- 格式v-on:keycode="方法(参数)" --> <div style="height: 150px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v3.v-on:keycode="方法(参数)"</div> <hr /> <div> <div> <input v-on:keyup.up="commit" style="font-size: 20px;">KeyCode</input> </div> </div> </div>
<!-- 格式v-on:click="方法(参数)" --> <div style="height: 150px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v2.v-on:click="方法(参数)"</div> <hr /> <div> <div> <button v-on:click="mod('v-on事件',$event)" style="font-size: 20px;">onClick</button> </div> </div> </div>
<!-- 格式v-on:click="方法" --> <div style="height: 150px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v1.格式v-on:click="方法"</div> <hr /> <div> <div> <button v-on:click="add" style="font-size: 20px;">onClick</button> </div> </div> </div>
<!-- 格式v-on:click="表达式" --> <div style="height: 150px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v0.v-on:click="表达式"</div> <hr /> <div> <div> <button v-on:click="count ++" style="font-size: 20px;">onClick</button> <p>{{count}}</p> </div> </div> </div> |
<!DOCTYPE html> <html style="height: 100%;"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../lib/vue.v2.5.12.js" ></script> <title>v-on</title> </head> <body style="height: 100%;"> <style> .style0{ font-size: 25px; color: green; } .style1{ background: gold; } </style> <!-- VUE指令v-on事件绑定指令 REF: http://www.runoob.com/vue2/vue-events.html https://cn.vuejs.org/v2/guide/events.html --> <div id="appVue"> <!-- 格式v-on:keycode="方法(参数)" --> <div style="height: 150px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v3.v-on:keycode="方法(参数)"</div> <hr /> <div> <div> <input v-on:keyup.up="commit" style="font-size: 20px;">KeyCode</input> </div> </div> </div> <!-- 格式v-on:click="方法(参数)" --> <div style="height: 150px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v2.v-on:click="方法(参数)"</div> <hr /> <div> <div> <button v-on:click="mod('v-on事件',$event)" style="font-size: 20px;">onClick</button> </div> </div> </div> <!-- 格式v-on:click="方法" --> <div style="height: 150px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v1.格式v-on:click="方法"</div> <hr /> <div> <div> <button v-on:click="add" style="font-size: 20px;">onClick</button> </div> </div> </div> <!-- 格式v-on:click="表达式" --> <div style="height: 150px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v0.v-on:click="表达式"</div> <hr /> <div> <div> <button v-on:click="count ++" style="font-size: 20px;">onClick</button> <p>{{count}}</p> </div> </div> </div> </div> <script> new Vue({ el: "#appVue", data: { count:999 }, methods:{ add:function(){ console.log("onClick") }, mod:function(var0,var1){ console.log(var0); console.log(var1); }, commit:function(){ console.log("commit"); } } } ) </script> </body> </html>
REF:
