VUE入門學習之事件處理
目錄
- 1. 函式繫結
- 2. 帶引數和$event
- 3. 多個函式繫結一個事件
- 4. 事件修飾符
- 5. 按鍵修飾符
- 6.系統修飾鍵
- .exact修飾符
- 滑鼠按鈕修飾符
- 總結
1. 函式繫結
可以用v-on:click="methodName"或者快捷方式@click="methodName"繫結事件處理函式
@click="methodName()"也可以,@click="methodName"猜測是簡寫
<div v-on:click="add">{{ count }}</div> <div @click="add">{{ count }}</div>
data() { return { count: 0,}; },methods: { add() { this.count++; },},
2. 帶引數和$event
可以直接在往事件繫結的函式裡傳引數和$event
<div @click="set(0,$event)">{{ count }}</div>
data() { return { count: 0,set(value,event) { console.log(event); this.count = value; },
3. 多個函式繫結一個事件
多個函式直接用逗號分隔,這裡即使是沒有入參的函式,也要加括號,否則不會執行那個函式
比如<div @click="set(0,$event),log">{{ count }}</div> 只會執行set
<div @click="set(0,log()">{{ count }}</div>
data() { return { count: 0,log() { console.log("log---"); },
4. 事件修飾符
使用修飾符時,順序很重要;相應的程式碼會以同樣的順序產生
<!-- 阻止單擊事件繼續傳播 -->
<a @click.stop="doThis"></a><!-- 提交事件不再過載頁面 -->
<form @submit.prevent="onSubmit"></form><!-- 修飾符可以串聯 -->
<a @click.stop.prevent="doThat"></a><!-- 只有修飾符 -->
<form @submit.prevent></form><!-- 新增事件監聽器時使用事件捕獲模式 -->
<!-- 即內部元素觸發的事件先在此處理,然後才交由內部元素進行處理 -->
<div @click.capture="doThis">...</div><!-- 只當在 event.target 是當前元素自身時觸發處理函式 -->
<!-- www.cppcns.com即事件不是從內部元素觸發的 -->
<div @click.self="doThat">...</div><!-- 點選事件將只會觸發一次能被用到自定義的元件事件上 -->http://www.cppcns.com;
<a @click.once="doThis"></a><!-- 滾動事件的預設行為 (即滾動行為) 將會立即觸發 -->
<!-- 而不會等待 `onScroll` 完成 -->
<!-- 這其中包含 `event.preventDefaultwMkQq()` 的情況 -->
<!-- 尤其能夠提升移動端的效能 -->
<div @scroll.passive="onScroll">...</div>
5. 按鍵修飾符
- .enter
- .tab
- .delete(捕獲“刪除”和“退格”鍵)
- .esc
- .space
- .up
- .down
- .left
- .right
<!-- 只有在 `key` 是 `Enter` 時呼叫 `vm.submit()` -->
<input @keyup.enter="submit" /><!-- 只有在 `key` 是 PageDown時呼叫 `vm.onPageDown()` -->
<input @keyup.page-down="onPageDown" />
6.系統修飾鍵
事件觸發時修飾鍵必須處於按下狀態
- .ctrl
- .alt
- .shift
- .meta
<!-- 按住Alt, 按Enter -->
<input @keyup.alt.enter="clear" /><!-- 按住Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
.exact修飾符
<!-- 即使 Alt 或 Shift 被一同按下時也會觸發 -->
<button @click.ctrl="onClick">A</button><!-- 有且只有 Ctrl 被按下的時候才觸發 -->
<button @click.ctrl.exact="onCtrlClick">A</button><!-- 沒有任何系統修飾符被按下的時候才觸發 -->
<button @click.exact="onClick">A</button>
滑鼠按鈕修飾符
<button @click.left="log('left cllilck')">滑鼠左擊</button> <buthttp://www.cppcns.comton @click.right="log('right cllilck')">滑鼠右擊</button> <button @click.middle="log('middle cllilck')">滑鼠中擊</button>
總結
本篇文章就到這裡了,希望能夠給你帶來幫助,也希望您能夠多多關注我們的更多內容!