v-on事件绑定指令

v-on:事件绑定

v-on简写:@

绑定click事件时；

代码：

<script>
        window.onload= () =>{
            
            
            let vm=new Vue({
            el:'#two',
            data:{
            

            },
            methods:{
                
                show:function(){
                    alert("欢迎来到perfect*博客园！！！");
                    console.log('欢迎来到perfect*博客园！！！');
                },
                
    
            }
            })
        }
            
</script>
    
    <body>
        <div id="two">
            <button v-on:click="show">欢迎来到perfect*博客园</button>
            
            
      </div>
    </body>

执行click事件时进行数据的相加：

vue:

<script>
        window.onload= () =>{
            
            
            let vm=new Vue({
            el:'#two',
            data:{
                result:0
            

            },
            methods:{
                

                
                add(a,b){
                    console.log("add");
                    console.log(this==vm);
                    this.result=a+b;
                    
                }
            }
            })
        }
            
</script>

html:

<div id="two">
            
            
            <button v-on:click="add(1,2)">进行绑定数据相加的方法add()</button>
            result:{{result}}
            
            
      </div>

使用v-on的简写@时：

在vue中修改add方法即可：

add(a,b){
                    console.log("add");
                    console.log(this==vm);
                    this.result +=a+b;
                    
                }

使用v-on的简写@：

<button @click="add(1,2)">进行绑定数据相加的方法add()</button>
            result:{{result}}

以上示例所有代码：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>v-on</title>
 6     </head>
 7     <script type="text/javascript" src="../js/vue.js" ></script>
 8     <script>
 9         window.onload= () =>{
10             
11             
12             let vm=new Vue({
13             el:'#two',
14             data:{
15                 result:0
16             
17 
18             },
19             methods:{
20                 
21 //                show:function(){
22 //                    alert("欢迎来到perfect*博客园！！！");
23 //                    console.log('欢迎来到perfect*博客园！！！');
24 //                },
25                 
26                 add(a,b){
27                     console.log("add");
28                     console.log(this==vm);
29                     this.result +=a+b;
30                     
31                 }
32             }
33             })
34         }
35             
36 </script>
37     
38     <body>
39         <div id="two">
40             <!--<button v-on:click="show">欢迎来到perfect*博客园</button>-->
41             
42            <button @click="add(1,2)">进行绑定数据相加的方法add()</button>
43             result:{{result}}
44         
45             
46             
47             
48       </div>
49     </body>
50 </html>

使用v-on绑定事件

注意：在编写代码中如果使用简写，所有需要用到的地方都用简写哦！！！！

猜你喜欢