VUE课程参考---6、事件绑定v-on

一、总结

一句话总结：

-、vue模板中可以通过v-on来绑定事件，比如click点击事件等等

-、vue实例中定义方法可以写在methods中

<div id="app">
    <button v-on:click="showMsg2">vue事件绑定</button>
    <!--v-on: 指令可以简写为@-->
    <button @click="showMsg2">vue事件绑定2</button>
</div>
<script>
    let vm=new Vue({
        el:'#app',
        data:{
            msg:'我有一头小毛驴，我从来都不骑'
        },
        methods:{
            showMsg2:function () {
                alert('vue事件绑定2：'+this.msg);
            }
        }
    });
</script>

1、事件绑定v-on:的简写形式是怎样？

事件绑定v-on:指令可以简写为 @事件名

<div id="app">
    <button v-on:click="showMsg2">vue事件绑定</button>
    <!--v-on: 指令可以简写为@-->
    <button @click="showMsg2">vue事件绑定2</button>
</div>
<script>
    let vm=new Vue({
        el:'#app',
        data:{
            msg:'我有一头小毛驴，我从来都不骑'
        },
        methods:{
            showMsg2:function () {
                alert('vue事件绑定2：'+this.msg);
            }
        }
    });
</script>

二、事件绑定v-on

博客对应课程的视频位置：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>6、事件绑定v-on</title>
 6 </head>
 7 <body>
 8 <!--
 9 事件绑定v-on
10 
11 vue模板中可以通过v-on来绑定事件，比如click点击事件等等
12 vue实例中定义方法可以写在methods中
13 
14 v-on: 指令简写：
15 v-on: 指令可以简写为@
16 
17 -->
18 <div id="app">
19     <p>{{msg}}</p>
20     <button id="btn">不要点我，疼</button>
21     <!--会报没有alert方法，因为alert是window对象自带的方法，而不是vue-->
22 <!--    <button v-on:click="alert('vue事件绑定')">vue事件绑定</button>-->
23     <!--vue模板中可以通过v-on来绑定事件-->
24     <button v-on:click="showMsg">vue事件绑定</button>
25     <!--v-on: 指令可以简写为@-->
26     <button @click="showMsg2">vue事件绑定2</button>
27 </div>
28 <script src="../js/vue.js"></script>
29 <script>
30     let vm=new Vue({
31         el:'#app',
32         data:{
33             msg:'我有一头小毛驴，我从来都不骑'
34         },
35         methods:{
36             showMsg:function () {
37                 //alert('vue事件绑定');
38                 //如果在vue方法调用vue中的数据，要用this，这里的this就是代表vue实例
39                 console.log('showMsg中的this');
40                 console.log(this);
41                 alert('vue事件绑定：'+this.msg);
42             },
43             showMsg2:function () {
44                 //alert('vue事件绑定');
45                 //如果在vue方法调用vue中的数据，要用this，这里的this就是代表vue实例
46                 // console.log('showMsg中的this');
47                 // console.log(this);
48                 alert('vue事件绑定2：'+this.msg);
49             }
50         }
51     });
52     console.log(vm);
53 
54     document.getElementById('btn').onclick=function () {
55         alert('叫你不要点我，你还点！！！');
56     }
57 </script>
58 </body>
59 </html>