Vue指令之v-on
阿新 • • 發佈：2020-12-08
Vue指令之v-on
目錄
v-on指令是事件繫結指令，當用戶需要點選，按下鍵盤，滾動滑鼠等操作時，想要新增一些自己的邏輯處理時，就可以為特定的元素繫結一些特定的事件。
我們先在被vue例項掛載的標籤div中，放入一個按鈕為input標籤，在標籤內部寫入v-on指令，冒號(:)後面就是事件名，等號(=)後面就是需要繫結的事件名稱。
1.v-on怎麼使用？
<div id="app">
<input type="button" value="事件繫結" v-on:事件名="方法名">
</div>2.事件名到底寫什麼呢？
假設如果是點選事件就寫click，如果是滑鼠移入事件就寫monseenter，如果是滑鼠雙擊事件就寫dblclick
<div id="app"> <input type="button" value="事件繫結" v-on:click="方法名"> <input type="button" value="事件繫結" v-on:mouseenter="方法名"> <input type="button" value="事件繫結" v-on:dblclick="方法名"> </div>
3.方法名在哪裡定義呢？
方法我們寫在methods裡面
<body> <div id="app"> <input type="button" value="事件繫結" v-on:click="todo"> <input type="button" value="事件繫結" v-on:mouseenter="todo"> <input type="button" value="事件繫結" v-on:dblclick="todo"> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", methods:{ todo:function() { //方法執行的邏輯 } } }) </script> </body>
4.v-on的簡寫
從程式碼中，我們可以發現，在繫結的事件都是v-on開頭，Vue其實提供了一個簡潔的寫法，用@符號替代v-on
<div id="app">
<input type="button" value="事件繫結" @click="todo">
<input type="button" value="事件繫結" @mouseenter="todo">
<input type="button" value="事件繫結" @dblclick="todo">
</div>5.訪問data中的資料,通過this關鍵字
6.總結
- v-on指令作用是為元素繫結事件
- v-on指令可以簡寫為@
- 繫結的方法在methods中
- 方法內部通過this關鍵字訪問定義在data中的資料