Vue基础语法之v-on

一、js文件

var app = new Vue({
    el:'#app',
    methods:{
        onClick:function(){
            console.log('onClick')
        },
        onEnter:function(){
            console.log("onEnter")
        },
        onOut:function(){
            console.log("onOut")
        },
        onSubmit:function(e){
            e.preventDefault();
            console.log("onSubmit")
        },
        onSubmit2:function(){
            console.log("onSubmit2")
        },
        onKeyup:function(){
            console.log("onKeyup")
        }
    }
});

二、html文件

    
    



    

        点击
        

            
            提交
        
        

            
            提交
        
        

            
            提交
        
        

            
            提交
        
    

三、效果展示

effect.gif

四、代码对比

五、备注：

v-on: 在某些时候可以使用简写@ 符号

一、直接绑定事件：
        @事件名="方法"   =>   @click="onClick"
        methods:{
              onClick:function(){
                  console.log('onClick')
            }
        }

二、绑定事件类
          v-on="{事件:方法}"        =>     v-on="{mouseenter:onEnter,mouseout:onOut}"
           methods:{
                  onEnter:function(){
                      console.log("onEnter")
                },
                onOut:function(){
                      console.log("onOut")
               },
         }
三、阻止默认形为（提交时刷新）
      v-on:事件="方法($event)"     =>      @submit="onSubmit($event)"
      methods:{
            onSubmit:function(e){
                e.preventDefault();
                console.log("onSubmit")
          }
      }
四、阻止默认形为二（提交时刷新）
        v-on:事件.行为="方法"         =>        @submit.prevent="onSubmit2"
                                           //  @submit.stop="onSubmit2"
        methods:{
              onSubmit2:function(){
                  console.log("onSubmit2")
            }
        }
五、键盘事件（最好配合阻止默认行为一起使用）
      v-on:事件.键值="方法"       =>       @keyup.enter="onEnter"
      methods:{
              onKeyup:function(){
                  console.log("onKeyup")
          }
      }