Vue.js: Methods 與事件處理 (Event Handling)
17 Apr 2017分別說明 Method 與事件處理 (Event Handling) 如下。
Method
Vue Instance 在初始化時可設定選項物件，其中可設定 method，執行一些動作。
初始畫面如下。
一開始印出訊息的初始值「沒發生任何事情！」。
<div id="app">
<p>${ msg }</p>
</div>
var vm = new Vue({
el: '#app',
delimiters: ['${', '}'],
data: {
msg: '沒發生任何事情！',
},
methods: {
prompt() {
this.msg = '快來看這裡！我是新訊息！';
}
}
});
// 由於部落格會把使用雙花括號的內容吃掉，所以設定 delimiters 以顯示完整程式碼。
待執行prompt method 後顯示新訊息「快來看這裡！我是新訊息！」。
vm.prompt();
事件處理 (Event Handling)
為了能讓使用者與畫面互動，我們可以使用v-on:some_method (簡寫@some_method) 綁定事件監聽器，藉此使用我們在 vue instance 宣告的 method。
如下所示，點擊按鈕後觸發 click 事件，執行prompt()，然後將訊息「按鈕被按了！監聽到 click 事件。」顯示在畫面上。
<div id="app">
<button type="button" @click="prompt">按我取得訊息</button>
<p>${ msg }</p>
</div>
var vm = new Vue({
el: '#app',
delimiters: ['${', '}'],
data: {
msg: '沒發生任何事情！',
},
methods: {
prompt() {
this.msg = '按鈕被按了！監聽到 click 事件。';
}
}
});
事件修飾符 (Event Modifiers)
Vue.js 藉由事件修飾符 (Event Modifiers) 處理了許多 DOM 事件的細節，讓我們能專注於程式邏輯的撰寫。
.stop：等同於event.stopPropagation()，防止事件冒泡。.prevent：等同於event.preventDefault()，防止執行預設的行為。.capture：與事件冒泡的方向相反，事件捕獲 (event capturing) 是由外而內的。.self：只會觸發自己範圍內的事件，不包含子元素。.once：只會觸發一次
.stop
等同於event.stopPropagation()，防止事件冒泡。
當點擊按鈕「按我！」時，不但會觸發綁在按鈕上inner這個 method，還會觸發綁在外面<div>的middle和outer method。
<div id="app">
<div @click="outer">
<div @click="middle">
<button @click="inner">按我！</button>
</div>
</div>
</div>
var vm = new Vue({
el: '#app',
delimiters: ['${', '}'],
methods: {
inner() {
alert('這是裡面的 button');
},
middle() {
alert('這是中間的 div');
},
outer() {
alert('這是外面的 div');
}
}
});
使用.stop防止上例這種事件冒泡的狀況發生。
<div id="app">
<div @click="outer">
<div @click="middle">
<button @click.stop="inner">按我！</button>
</div>
</div>
</div>
.prevent
等同於event.preventDefault()，防止執行預設的行為。
使用<a href="#">當成點擊的按鈕時，通常會使用event.preventDefault()，防止瀏覽器的網址列出現#。
在這裡可以使用事件修飾符.prevent。
<div id="app">
<a href="#" type="button" @click.prevent="prompt">按我取得訊息</a>
<p>${ msg }</p>
</div>
var vm = new Vue({
el: '#app',
delimiters: ['${', '}'],
data: {
msg: '沒發生任何事情！',
},
methods: {
prompt() {
this.msg = '按鈕被按了！監聽到 click 事件。';
}
}
});
.capture
與事件冒泡的方向相反，事件捕獲 (event capturing) 是由外而內的。
- 事件冒泡：inner -> middle -> outer
- 事件捕獲：outer -> middle -> inner
因此，就使用.capture來捕捉事件捕獲。
<div id="app">
<div @click.capture="outer">
<div @click.capture="middle">
<button @click.capture="inner">按我！</button>
</div>
</div>
</div>
var vm = new Vue({
el: '#app',
delimiters: ['${', '}'],
methods: {
inner() {
alert('這是裡面的 button');
},
middle() {
alert('這是中間的 div');
},
outer() {
alert('這是外面的 div');
}
}
});
.self
只會觸發自己範圍內的事件，不包含子元素。
<div id="app">
<div @click.self="outer">
<div @click.self="middle">
<button @click="inner">按我！</button>
</div>
</div>
</div>
var vm = new Vue({
el: '#app',
delimiters: ['${', '}'],
methods: {
inner() {
alert('這是裡面的 button');
},
middle() {
alert('這是中間的 div');
},
outer() {
alert('這是外面的 div');
}
}
});
.once
沒有使用.once，只要按下按鈕就會執行。
<div id="app">
<a href="#" type="button" @click="add">按我+1</a>
<p>${ counter }</p>
</div>
var vm = new Vue({
el: '#app',
delimiters: ['${', '}'],
data: {
counter: 0,
},
methods: {
add() {
this.counter++;
}
}
});
使用.once，只要按下按鈕只會執行一次。
<div id="app">
<a href="#" type="button" @click.once="add">按我+1</a>
<p>${ counter }</p>
</div>
js 程式碼同上。
按鍵修飾符 (Key Modifiers)
監聽鍵盤事件的特定鍵值。
.enter.tab.delete：含 delete 和 backspace 鍵。.esc.space.up.down.left.right.ctrl.alt.shift.meta
.enter
在文字輸入框中按 enter 鍵，counter 的數字會不停 +1；如果按其他鍵則不會 +1。
<div id="app">
<input href="#" type="text" v-on:keyup.13="add" value="按 Enter +1" />
<p>${ counter }</p>
</div>
var vm = new Vue({
el: '#app',
delimiters: ['${', '}'],
data: {
counter: 0,
},
methods: {
add() {
this.counter++;
}
}
});
自行定義按鍵修飾符別名
可以透過config.keyCodes自行定義按鍵修飾符別名，例如：由於預先定義了 keycode 116 (即按鍵 F5) 的別名為「f5」，因此在文字輸入框中按下 F5，會觸發prompt method，出現 alert。
<div id="app">
<input type="text" v-on:keydown.f5="prompt">
</div>
Vue.config.keyCodes.f5 = 116;
var vm = new Vue({
el: '#app',
delimiters: ['${', '}'],
methods: {
prompt() {
alert('我是 F5！');
}
}
});
以上參考 methods 和 Event Handling。
