iT邦幫忙

2021 iThome 鐵人賽

DAY 5
0
Modern Web

我的Vue學習筆記系列 第 5

Day05-v-on事件處理

Vue中還有一個很重要的指令就是事件綁定v-on,讓DOM可以去做更多的事情。

v-on事件綁定(簡寫'@')

使用的方式為v-on:[事件名稱]="運算式",像count++較簡短的運算可以直接寫,而比較複雜的運算式可以使用methods處理,給予一個事件名稱做綁定。

<div id="app">
    <p>count : {{count}}</p>
    <button v-on:click="count++">add</button>
    <button v-on:click="add">add</button>
</div>
const vm = Vue.createApp({
    data() {
        return {
            count: 0,
        }
    },
    methods: {
        add() {
            this.count++
        }
    }

}).mount('#app');

event物件

若需要傳入參數可以用$event帶入,就像範例中input改數字後會傳入methodsadd(amount,event),再次按下add按鈕就會count+5,改變了原本的count+1。

<div id="app">
    <p>count : {{count}}</p>
    <input v-model.number="amount"></input>
    <button v-on:click="add(amount,$event)">add</button>
</div>
const vm = Vue.createApp({
    data() {
        return {
            count: 0,
            amount: 1
        }
    },
    methods: {
        add(amount, event) {
            this.count += amount
            console.log(event.target.tagName, amount)
        }
    }

}).mount('#app');

Modifiers修飾子

事件修飾

  • .stop : event.stopPropagation(),click事件不會向外層傳遞
  • .prevent : event.preventDefault(),阻擋元素預設行為
  • .capture : 點擊內層元素會先觸發有綁.capture的外層
  • .self : 觸發元素本身
  • .once : 觸發一次
  • .passive : 阻止event.preventDefault()

鍵盤修飾

@keyup.enter

  • .enter
  • .tab
  • .delete
  • .esc
  • .space
  • .up
  • .down

系統修飾

  • .ctrl
  • .alt
  • .shift
  • .meta : meta 對應command 鍵(⌘);Windows 系統鍵盤對應Windows 徽標鍵(⊞)
  • .exact
<!--ctrl+任何按鈕都會觸發-->
<button v-on:click.ctrl="onClick">A</button>
<!--只有ctrl才會觸發-->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>

鼠標按鈕修飾

  • .left
  • .right
  • .middle

參考資料

監聽事件
https://cn.vuejs.org/v2/guide/events.html#按键码


上一篇
Day04-Vue指令
下一篇
Day06-條件判斷與列表渲染
系列文
我的Vue學習筆記30

尚未有邦友留言

立即登入留言