[TOC] ### 一、Vue3.x監聽事件 vue中監聽事件可以使用`v-on:click`或者 `@click` ,`@click` 為`v-on:click`的簡寫，例如： ~~~ data() { return { counter: 1 } } ~~~ **template模板**： ~~~ div id="basic-event"> <button @click="counter += 1">Add 1</button> <p>The button above has been clicked {{ counter }} times.</p> </div> ~~~ ### 二、Vue3.x定義方法 執行方法 獲取數據 改變數據 **業務邏輯：** ~~~ export default { data() { return { num: 1, msg: "你好vue", }; }, methods: { setMsg() { this.msg = "我是方法里改變后的msg"; }, getMsg() { alert(this.msg); }, }, }; ~~~ **template模板**： ~~~ <template> <div> <h2>{{ msg }}</h2> <button @click="setMsg()">設置msg</button> <br /> <br> <button @click="getMsg()">獲取msg</button> <br> <br> <h2>Num:{{num}}</h2> <button @click="num += 1">Add 1</button> </div> </template> ~~~ ### 三、Vue3.x方法傳值、方法的相互調用 **業務邏輯：** ~~~ export default { data() { return { msg: "你好vue", }; }, methods: { setMsg(msg) { this.msg = msg; }, run() { this.getMsg() }, getMsg() { alert(this.msg); } }, }; ~~~ **template模板**： ~~~ <template> <div> {{msg}} <br> <br> <button @click="setMsg('這只執行方法傳值改變msg')">執行方法傳值</button> <br> <br> <button @click="run()">執行run方法</button> </div> </template> ~~~ ### 四、事件對象 有時我們還需要在內聯語句處理程序中訪問原始DOM事件。您可以使用特殊`$event`變量將其傳遞給方法 #### 一、單個參數 **業務邏輯：** ~~~ export default { data() { return { msg: "你好vue", }; }, methods: { eventFn(e){ console.log(e); // e.srcElement dom節點 e.srcElement.style.background='red'; console.log(e.srcElement.dataset.aid); /*獲取自定義屬性的值*/ } }, }; ~~~ **template模板**： ~~~ <button data-aid='123' @click="eventFn($event)">事件對象</button> ~~~ #### 二、多個參數 ~~~ <button @click="warn('Form cannot be submitted yet.', $event)"> Submit </button> ~~~ ~~~ methods: { warn(message, event) { // now we have access to the native event if (event) { event.preventDefault() } alert(message) } } ~~~ ### 五、Vue3.x 多事件處理程序 您可以在事件處理程序中使用逗號分隔多個事件處理程序，如下所示： **業務邏輯：** ~~~ methods: { one(event) { // first handler logic... }, two(event) { // second handler logic... } } ~~~ **template模板**： ~~~ <button @click="one($event), two($event)"> Submit </button> ~~~ ### 六、事件修飾符 vue中阻止冒泡 阻止默認行為，可以通過事件對象`event.preventDefault()`或`event.stopPropagation()`實現，還可以通過事件修飾符實現。 **vue中給我們提供了很多的修飾符：** ~~~ .stop .prevent .capture .self .once .passiv ~~~ **stopPropagation:** ~~~ <a @click.stop="doThis"></a> ~~~ **preventDefault:** ~~~ <a @click.prevent="doThat"></a> ~~~ **stopPropagation And preventDefault** ~~~ <a @click.stop.prevent="doThat"></a> ~~~ ### 七、按鍵修飾符 監聽鍵盤事件時，我們通常需要檢查特定的鍵。Vue允許在監聽關鍵事件時`v-on`或`@`在監聽關鍵事件時添加按鍵修飾符： ~~~ <input @keyup.enter="submit" /> ~~~ Vue為最常用的鍵提供別名： * `.enter` * `.tab` * `.delete`（同時捕獲“刪除”和“退格”鍵） * `.esc` * `.space` * `.up` * `.down` * `.left` * `.right`