Vue.js 事件處理器

事件監聽可以使用 v-on 指令：

v-on

<divid="app"><buttonv-on:click="counter += 1">增加 1</button><p>這個按鈕被點擊了 {{ counter }} 次。</p></div><script>new Vue({
el: "#app",
data: {
counter: 0
}
})</script>

通常情況下，我們需要使用一個方法來調用 JavaScript 方法。

v-on 可以接收一個定義的方法來調用。

v-on

<divid="app"><!-- `greet` 是在下面定義的方法名 --><buttonv-on:click="greet">Greet</button></div><script>var app = new Vue({
el: "#app",
data: {
name: "Vue.js"
},
// 在 `methods` 對象中定義方法
methods: {
greet: function (event) {
// `this` 在方法里指當前 Vue 實例
alert("Hello " + this.name + "!")
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}
})
// 也可以用 JavaScript 直接調用方法
app.greet() // -> "Hello Vue.js!"</script>

除了直接綁定到一個方法，也可以用內聯 JavaScript 語句：

v-on

<divid="app"><buttonv-on:click="say("hi")">Say hi</button><buttonv-on:click="say("what")">Say what</button></div><script>new Vue({
el: "#app",
methods: {
say: function (message) {
alert(message)
}
}
})</script>

嘗試一下 ?

事件修飾符

Vue.js 為 v-on 提供了事件修飾符來處理 DOM 事件細節，如：event.preventDefault() 或 event.stopPropagation()。

Vue.js通過由點(.)表示的指令後綴來調用修飾符。

• .stop

• .prevent

• .capture

• .self

• .once

<!-- 阻止單擊事件冒泡 -->

按鍵修飾符

Vue 允許為 v-on 在監聽鍵盤事件時添加按鍵修飾符：

<!-- 只有在 keyCode 是 13 時調用 vm.submit() -->

記住所有的 keyCode 比較困難，所以 Vue 為最常用的按鍵提供了別名：

<!-- 同上 -->

全部的按鍵別名：

• .enter

• .tab

• .delete (捕獲 "刪除" 和 "退格" 鍵)

• .esc

• .space

• .up

• .down

• .left

• .right

• .ctrl

• .alt

• .shift

• .meta

實例

<p><!-- Alt + C -->

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！