4.事件监听

Vue 2 入门学习笔记 /

本系列文章为laracasts.com 的系列视频教程——Learn Vue 2: Step By Step 的学习笔记。若喜欢该系列视频，可去该网站订阅后下载该系列视频，支持正版。

视频源码地址：github.com/laracasts/Vue-Forms

项目初始版本为Vue 2.1.3，教程还在更新中。

本节说明

对应第 4 小节：Vue Event Listener

本节内容

在上一节，我们用JavaScript的方式将 name 添加到 names 列表当中时，我们是这么做的：首先我们注册一个 click 事件，然后我们获取 input 元素的值，然后我们再更新列表。本节我们使用Vue的方式来实现：

index.html

<!DOCTYPE html>

<html>
    <head>
        <title></title>
    </head>

    <body>
        <div id="root">
            <ul>
                <li v-for="name in names" v-text="name"></li>
            </ul>

            <input type="text" v-model="newName">
            <button @click="addName">Add A name</button>
        </div>

        <script src="https://unpkg.com/vue@2.1.3/dist/vue.js"></script>

        <script>
            var app = new Vue({
                el:'#root',
                data: {
                    newName:'',
                    names:['Joe','Jack','Jane','Mike']
                },

                methods: {
                    addName() {
                        this.names.push(this.newName);

                        this.newName = '';
                    }
                }
            });
        </script>
    </body>
</html>

在Vue中，我们可以用v-on指令监听 DOM 事件，并在触发时运行一些JavaScript。然而许多事件处理逻辑会更为复杂，所以直接把JavaScript代码写在v-on指令中是不可行的。v-on 还可以接收一个需要调用的方法名称。