【Vue.js 入門到實(shí)戰(zhàn)教程】04-Vue.js 中事件監(jiān)聽和異步處理的實(shí)現(xiàn)示例

來(lái)源 |?https://xueyuanjun.com/post/21920

document.querySelector('#button').addEventListener('click', () => {    let language = document.querySelector('#input');    app.languages.push(language.value);  // 將輸入語(yǔ)言添加到模型數(shù)據(jù)數(shù)組    language.value = '';  // 清空輸入框});

實(shí)際上，Vue.js 框架為這種事件監(jiān)聽和處理提供了專門的語(yǔ)法，我們可以在 HTML 元素中通過(guò) v-on 指令來(lái)監(jiān)聽對(duì)應(yīng)的事件，如果是按鈕點(diǎn)擊事件的話就是 v-on:click，然后在屬性值中設(shè)置對(duì)應(yīng)的事件處理函數(shù)：

    Web 編程語(yǔ)言：    
        
            {{ index }}: {{ language }}        
    
    
                添加    

我們可以在 Vue 對(duì)象實(shí)例中新增 methods 屬性來(lái)定義這個(gè)事件處理函數(shù)：

var app = new Vue({    el: '#app',    data: {        languages: [            'PHP',            'JavaScript',            'Python',            'Golang',            'Java'        ]    },    methods: {        addLanguage() {            let language = document.querySelector('#input');            this.languages.push(language.value);            language.value = '';        },    }});

由于對(duì) addLanguage 函數(shù)的調(diào)用是異步操作，在執(zhí)行它時(shí)，Vue 對(duì)象已經(jīng)完成實(shí)例化了，因此，可以通過(guò) this 來(lái)訪問(wèn) Vue 實(shí)例。

另外，v-on:click 可以被簡(jiǎn)寫為?@click（即將 v-on:?替換成?@），功能是完全一樣的：

添加

我們還可以通過(guò)引入模型綁定來(lái)讓上述新增列表元素代碼的實(shí)現(xiàn)更加 Vue Style：

    Web 編程語(yǔ)言：    
        
            {{ index }}: {{ language }}        
    
    
            

這里，我們?nèi)コ税粹o元素，改為在 input 元素上監(jiān)聽鍵盤的回車事件（keyup 表示鍵盤按鍵后抬起，enter 表示按下的是回車鍵）以簡(jiǎn)化流程。對(duì)應(yīng)的 JavaScript 代碼如下：

刷新頁(yè)面，在輸入框輸入「Ruby」并回車，可以看到和之前一樣的新增列表元素效果：

顯然，使用事件監(jiān)聽的方式異步處理新增列表元素操作要比之前的實(shí)現(xiàn)更好，避免了在組件初始化之前加載一堆函數(shù)，代碼也更優(yōu)雅，Vue.js 還封裝了常見的鍵盤和鼠標(biāo)事件，這樣就不需要編寫一大堆分支語(yǔ)句判斷邏輯，提升了編碼效率和體驗(yàn)。

注：你可以在 Vue.js 官方文檔查看系統(tǒng)內(nèi)置的鼠標(biāo)、鍵盤、事件修飾符（描述具體的鍵盤、鼠標(biāo)事件）。

因此，在 Vue.js 中推薦使用這種方式進(jìn)行事件監(jiān)聽和處理。

本文完~