v-on就是用于**綁定事件**的，例如：有個按鈕，當點擊的時候執行一些操作。

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

上述代碼中，v-on:后面的值是一個方法，可以寫成myclick()，沒有參數可以寫成myclick。
另外這種事件對應的方法不是定義在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，里頭用對象的形式書寫，對象的鍵名就是事件名，對象的鍵值就是對應事件要執行的方法。多個事件之間通過,分開。

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

當然也可以混合使用：

<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能認識 --> <input type="text" > <button type="submit">提交</button> </form> </div> var app = new Vue({ el:'.app', data:{ }, methods:{ onSubmit:function(e){ e.preventDefault(); //阻止瀏覽器的默認行為，因為在表單提交的時候，瀏覽器會默認發送一個get或者post請求到指定頁面，刷新整個頁面。 console.log("onSubmited"); } } });

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

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

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

另外,當綁定的事件是keyup、keypress、keydown鍵盤事件時，當需要判斷按下是回車時。
在以前我們需要判斷事件對象的keyCode，雖然功能特別簡單，但是每次去寫還是特別麻煩。所以對應也有修飾符，如enter修飾符，表示按鍵是enter鍵。

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

跟v-bind一樣，v-on也非常常用，對應也有快捷方式：v-on:事件名 可以簡寫為 @事件名

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

---

作者：jCodeLife
鏈接：https://www.jianshu.com/p/5d2ca05b70b3
來源：簡書

總結

以上是生活随笔為你收集整理的vue学习：v-on的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。