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文件

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div>
        <button v-on="{mouseenter:onEnter,mouseout:onOut}" @click="onClick">点击</button>
        <form @submit="onSubmit($event)" action="">
            <input type="text">
            <button type="submit">提交</button>
        </form>
        <form @submit.prevent="onSubmit2" action="">
            <input type="text">
            <button type="submit">提交</button>
        </form>
        <form v-on:keyup="onKeyup" v-on:submit.prevent="onSubmit2" >
            <input type="text">
            <button type="submit">提交</button>
        </form>
        <form @keyup.enter="onEnter" v-on:submit.prevent="onSubmit2" >
            <input type="text">
            <button type="submit">提交</button>
        </form>
    </div>
</div>
</body>
<script src="lib/js/vue.js"></script>
<script src="asset/js/v-on.js"></script>
</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")
          }
      }

Vue基础语法之v-on

一、js文件

二、html文件

三、效果展示

四、代码对比

五、备注：

推荐阅读更多精彩内容