目錄
事件處理??
模板語法
事件處理
事件監(jiān)聽
<div id="example-1">
<button v-on:click="counter += 1">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>
var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
}
})
| 類別 | 于模板中 | 于方法中 |
|---|---|---|
| 寫法 | v-on:click | $on(click) |
| 用時(shí) |
事處理器
于方法中
var example2 = new Vue({
el: '#example-2',
data: {
name: 'Vue.js'
},
// 在 `methods` 對(duì)象中定義方法
methods: {
greet: function (event) {
// `this` 在方法里指向當(dāng)前 Vue 實(shí)例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}
})
// 也可以用 JavaScript 直接調(diào)用方法
example2.greet() // => 'Hello Vue.js!'
于模板中
事修飾符
鼠標(biāo)
阻止傳播：stop
避免重載：prevent
使用冒泡：capture
自身觸發(fā)：self
觸發(fā)一次：once
原生事件：passive
鍵盤
松開按鍵：keyup
按鍵別名
.enter
.tab
.delete (捕獲“刪除”和“退格”鍵)
.esc
.space
.up
.down
.left
.right
定義
Vue.config.keyCodes.f1 = 112
使用
v-on:keyup.f
系統(tǒng)
.ctrl
.alt
.shift
.meta
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
