【Vue.js 入门到实战教程】04-Vue.js 中事件监听和异步处理的实现示例

来源 | https://xueyuanjun.com/post/21920

我们在上篇教程中为按钮元素添加事件监听函数是通过传统的 JavaScript DOM 编程方式实现的：

document.querySelector('#button').addEventListener('click', () => {
    let language = document.querySelector('#input');
    app.languages.push(language.value);  // 将输入语言添加到模型数据数组
    language.value = '';  // 清空输入框
});

实际上，Vue.js 框架为这种事件监听和处理提供了专门的语法，我们可以在 HTML 元素中通过 v-on 指令来监听对应的事件，如果是按钮点击事件的话就是 v-on:click，然后在属性值中设置对应的事件处理函数：

<div id="app">
    Web 编程语言：
    <ul>
        <li v-for="(language, index) in languages">
            {{ index }}: {{ language }}
        </li>
    </ul>
    <div>
        <input type="text" id="input"/>
        <button v-on:click="addLanguage">添加</button>
    </div>
</div>

我们可以在 Vue 对象实例中新增 methods 属性来定义这个事件处理函数：

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 = '';
        },
    }
});

由于对 addLanguage 函数的调用是异步操作，在执行它时，Vue 对象已经完成实例化了，因此，可以通过 this 来访问 Vue 实例。

另外，v-on:click 可以被简写为 @click（即将 v-on: 替换成 @），功能是完全一样的：

<button @click="addLanguage">添加</button>

我们还可以通过引入模型绑定来让上述新增列表元素代码的实现更加 Vue Style：

<div id="app">
    Web 编程语言：
    <ul>
        <li v-for="(language, index) in languages">
            {{ index }}: {{ language }}
        </li>
    </ul>
    <div>
        <input type="text" v-model="newLanguage" @keyup.enter="addLanguage"/>
    </div>
</div>

这里，我们去除了按钮元素，改为在 input 元素上监听键盘的回车事件（keyup 表示键盘按键后抬起，enter 表示按下的是回车键）以简化流程。对应的 JavaScript 代码如下：

<script>
    var app = new Vue({
        el: '#app',
        data: {
            languages: [
                'PHP',
                'JavaScript',
                'Python',
                'Golang',
                'Java'
            ],
            newLanguage: '',
        },
        methods: {
            addLanguage() {
                this.languages.push(this.newLanguage); 
                this.newLanguage = '';
            },
        }
    });
</script>

刷新页面，在输入框输入「Ruby」并回车，可以看到和之前一样的新增列表元素效果：

显然，使用事件监听的方式异步处理新增列表元素操作要比之前的实现更好，避免了在组件初始化之前加载一堆函数，代码也更优雅，Vue.js 还封装了常见的键盘和鼠标事件，这样就不需要编写一大堆分支语句判断逻辑，提升了编码效率和体验。

注：你可以在 Vue.js 官方文档查看系统内置的鼠标、键盘、事件修饰符（描述具体的键盘、鼠标事件）。

因此，在 Vue.js 中推荐使用这种方式进行事件监听和处理。

本文完~