vue @click对应的事件找不到_Vue.js 中事件监听和异步处理的实现示例

我们在上篇教程中为按钮元素添加事件监听函数是通过传统的 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 代码如下：