vue学习:v-on
v-on就是用于**綁定事件**的,例如:有個按鈕,當點擊的時候執行一些操作。
<div class="app"> <button v-on:click="myclick">click me</button> </div>上述代碼中,v-on:后面的值是一個方法,可以寫成myclick(),沒有參數可以寫成myclick。
另外這種事件對應的方法不是定義在data選項中,而是定義在vue實例的methods選項中,里面都是一個一個的function。
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鍵。
跟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的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: nginx配置ssl(配置文件)
- 下一篇: vue学习:v-text,v-html,