Vue.js教程（五）：v-on事件处理

Vue点击事件，使用v-on开头。Vue的事件很多很丰富，

点击事件

给button标签设置点击事件：

<div id="app-5">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">点击替换P标签中的数据</button>
</div>

说明：其中 v-on:click表示绑定点击事件。reverseMessage是一个Vue定义的方法，方法定义如下：

<script type="text/javascript">
    /*第三步*/
    var app5 = new Vue({
        el: '#app-5',
        data: {
            message: 'Hello Vue.js!'
        },
        methods: {
            reverseMessage: function () {
                this.message = "qianfeng";
            }
        }
    })
</script>

说明：
1、el和data前面章节已经介绍过，主要是methods，它是用来定义方法的，reverseMessage是方法的名称。
2、 this.message中的this是app5这个对象，message是data中定义的变量名称。（仔细看var app5 = new Vue这句话是不是跟Java中的匿名类的写法比较像，学过Java的话，这个应该好理解。）

效果：点击按钮会将p标签原本的内容修改为qianfeng。

学习前端最好的方式就是动手用一用，效果出来了就明白了。