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

 ​​

 



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>


 

VUE课程---9、事件绑定v-on_html