VUE课程---9、事件绑定v-on
一、总结
一句话总结：
vue模板中可以通过v-on来绑定事件，比如click点击事件等等，事件要使用的方法可以定义在vue对象的配置对象的methods属性中
<div id="app"> <button v-on:click="show">点我有惊喜</button> <button v-on:mouseover="show">点我有惊喜</button> <!--v-on指令可以简写为@--> <button @mouseover="show">点我有惊喜</button> </div> <script src="../js/vue.js"></script> <script> new Vue({ el:'#app', //element data:{ msg:'欢迎来到vue的世界' }, methods:{ show:function () { alert('我有一只小毛驴，我从来也不骑'); } } }); </script>
1、事件绑定v-on:指令的简写形式是什么？
事件绑定v-on:指令可以简写为 @事件名
<button v-on:mouseover="show">点我有惊喜</button> <!--v-on指令可以简写为@--> <button @mouseover="show">点我有惊喜</button>
2、vue的v-on指令的事件绑定的流程？
1、在视图的标签里面通过v-on指令来绑定事件
2、在vue对象的配置对象的methods属性中定义了我们要使用的方法
<div id="app"> <button v-on:click="show">点我有惊喜</button> <button v-on:mouseover="show">点我有惊喜</button> <!--v-on指令可以简写为@--> <button @mouseover="show">点我有惊喜</button> </div> <script src="../js/vue.js"></script> <script> new Vue({ el:'#app', //element data:{ msg:'欢迎来到vue的世界' }, methods:{ show:function () { alert('我有一只小毛驴，我从来也不骑'); } } }); </script>
二、事件绑定v-on
博客对应课程的视频位置：9、事件绑定v-on
https://www.fanrenyi.com/video/26/226
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>事件绑定v-on</title> 6 </head> 7 <body> 8 <!-- 9 10 vue的v-on指令的事件绑定的流程 11 1、在视图的标签里面通过v-on指令来绑定事件 12 2、在vue对象的配置对象的methods属性中定义了我们要使用的方法 13 14 --> 15 <div id="app"> 16 <!-- <button id="btn">点我有惊喜</button>--> 17 <!--在vue里面可以通过v-on事件绑定机制来给元素添加事件--> 18 <!--在视图里面能够使用的属性或者方法必须是在vue对象里面定义过的--> 19 <!-- <button v-on:click="alert('我有一只小毛驴，我从来也不骑');">点我有惊喜</button>--> 20 <!-- <button v-on:click="show">点我有惊喜</button>--> 21 <button v-on:mouseover="show">点我有惊喜</button> 22 <!--v-on指令可以简写为@--> 23 <button @mouseover="show">点我有惊喜</button> 24 </div> 25 <script src="../js/vue.js"></script> 26 <script> 27 new Vue({ 28 el:'#app', //element 29 data:{ 30 msg:'欢迎来到vue的世界' 31 }, 32 methods:{ 33 show:function () { 34 alert('我有一只小毛驴，我从来也不骑'); 35 } 36 } 37 }); 38 // document.getElementById('btn').onclick=function () { 39 // alert('我有一只小毛驴，我从来也不骑'); 40 // }; 41 </script> 42 </body> 43 </html>
