v-on就是用于綁定事件的
例如：有個按鈕凡泣，當(dāng)點擊的時候執(zhí)行一些操作

<div class="app">
    <button v-on:click="myclick">click me</button>
</div>  

上述代碼中枉疼，v-on:后面的值是一個方法，可以寫成myclick()鞋拟，沒有參數(shù)可以寫成myclick骂维。
另外這種事件對應(yīng)的方法不是定義在data選項中，而是定義在vue實例的methods選項中贺纲，里面都是一個一個的function

var app = new Vue({
    el:'.app',
    data:{
        
    },
    methods:{
        myclick:function(){
            console.log(111111);
        }
    }
});

v-on也可以綁定多個事件
多個事件可以單獨多個v-on綁定

<div class="app">
    <button v-on:mouseenter='onenter' v-on:mouseleave='leave'>click me</button>
</div>  

也可以使用一個v-on航闺，里頭用對象的形式書寫，對象的鍵名就是事件名猴誊，對象的鍵值就是對應(yīng)事件要執(zhí)行的方法潦刃。多個事件之間通過,分開

<div class="app">
    <button v-on="{mouseenter:onenter,mouseleave:leave}">click me</button>
</div>  

當(dāng)然也可以混合使用

<div class="app">
    <button v-on="{mouseenter:onenter,mouseleave:leave}" v-on:click="myclick">click me</button>
</div>  

但是需要注意，在vue實例中方法一定要有懈叹，不然就報錯乖杠。

var app = new Vue({
    el:'.app',
    data:{
        
    },
    methods:{
        myclick:function(){
            console.log("clicked");
        },
        onenter:function(){
            console.log("mouseented");
        },
        leave:function(){
            console.log("mouseleaved");
        }
    }
});

例子：在綁定form表單中的提交事件時

<div class="app">
    <form v-on:submit='onSubmit($event)'>
        <!-- $event是vue里面的事件對象，vue能認(rèn)識 -->
        <input type="text" >
        <button type="submit">提交</button>
    </form>
</div>  

var app = new Vue({
    el:'.app',
    data:{
        
    },
    methods:{
        onSubmit:function(e){
            e.preventDefault();
            //阻止瀏覽器的默認(rèn)行為澄成，因為在表單提交的時候胧洒，瀏覽器會默認(rèn)發(fā)送一個get或者post請求到指定頁面，刷新整個頁面墨状。
            console.log("onSubmited");
        }
    }
});

注意：
$event是vue里面的事件對象卫漫，vue能認(rèn)識
在表單提交的時候，瀏覽器會默認(rèn)發(fā)送一個get或者post請求到指定頁面肾砂，刷新整個頁面列赎。阻止瀏覽器的默認(rèn)行為，可以用事件對象e.preventDefault()

但像上述form表單提交的這種瀏覽器默認(rèn)事件通今，每次都要寫e.preventDefaul()其實還是比較麻煩粥谬。vue中可以更好的解決，只要在事件的后面添加一個prevent修飾符即可辫塌，表示阻止默認(rèn)事件

<div class="app">
    <form v-on:submit.prevent='onSubmit'>
        <input type="text" >
        <button type="submit">提交</button>
    </form>
</div>  

var app = new Vue({
    el:'.app',
    data:{
        
    },
    methods:{
        onSubmit:function(){
            console.log("onSubmited");
        }
    }
});

綁定事件中漏策，除了prevent修飾符，還有stop,表示停止冒泡事件

<div class="app">
    <div v-on:click.stop='onClick'>
    </div>
</div>  

另外,當(dāng)綁定的事件是keyup臼氨、keypress掺喻、keydown鍵盤事件時，當(dāng)需要判斷按下是回車時储矩。
在以前我們需要判斷事件對象的keyCode感耙，雖然功能特別簡單，但是每次去寫還是特別麻煩持隧。所以對應(yīng)也有修飾符即硼，如enter修飾符，表示按鍵是enter鍵

<div class="app">
    <div v-on:keydown.enter='mykeydownFn'>
    </div>
</div>  

跟v-bind一樣屡拨，v-on也非常常用只酥，對應(yīng)也有快捷方式：
**v-on:事件名** 可以簡寫為 **@事件名**

<div class="app">
    <div @keydown.enter='mykeydownFn'>
    </div>
</div>  

以上就是v-on指令的基本使用褥实！