v-on事件绑定指令

Posted jiguiyan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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绑定事件

注意:在编写代码中如果使用简写,所有需要用到的地方都用简写哦!!!!

以上是关于v-on事件绑定指令的主要内容,如果未能解决你的问题,请参考以下文章

Vue之DOM元素事件绑定_v-on指令

Vue模板语法——事件绑定

Vue学习之路7-v-on指令学习之简单事件绑定

petite-vue源码剖析-事件绑定`v-on`的工作原理

vue监听事件 v-on

Vue.js常用指令:v-on