当模板渲染完成后，就可以进行事件的绑定与监听了。
Vue.js提供了v-on指令用来监听DOM事件，通常在模板内直接使用，而不像传统方式在js中获取DOM元素，然后绑定事件，例如:

<button v-on:click="say">Say</button>
//可简写
<button @click="say">Say</button>

一：方法及内联语句处理器

通过v-on可以绑定实例选项属性methods中的方法作为事件的处理器，v-on:参数（接受所有的原生事件名称）。

    var vm = new Vue({
        el : "#app",
        data : {
            msg : "hello"
        },
        methods : {
            say : function() {
                alert( this.msg );
            },
            sayFrom : function(from) {
                console.log( this.msg + ' ' + from);
            },
            showEvent : function(event){
                console.log(event);
            }
        }
    })

单击button即可触发say函数

除了直接绑定methods函数外，它还支持内联JavaScript语句，例如：

    <button @click="sayFrom('from coke')">SayFrom</button>

在直接绑定methods函数和内联JavaScript语句时，都有可能需要获取原生DOM事件对象，以下两种方式都可以获取：

        <button @click="showEvent">Event</button>
        <button @click="showEvent($event)">showEvent</button>

二：常用修饰符

1）.stop阻止事件冒泡

    <div id="cole" @click="say">
        <button @click="say">点我</button>
        <button @click.stop="say">点我</button>
    </div>

	//js
	var cole = new Vue({
        el: "#cole",
        data: {
            msg: "i love cole"
        },
        methods: { 
            say : function() {
                console.log(this.msg);
            }
        }
    })

第一个按钮没有添加.stop，第二个添加了，点击第一个按钮，会出现两个"i love cole"，点击第二个，只会出现一个。
第一个按钮：

第二个按钮：

2）.prevent 阻止默认事件

    <div id="coco">
        <a href="http://www.baidu.com">A</a> 
        <a href="http://www.baidu.com" @click.prevent>B</a>
        <a href="http://www.baidu.com" @click.prevent="say">C</a>
    </div>
	//js
	var coco = new Vue({
        el: "#coco",
        data: {
            msg: "i love cole"
        },
        methods: { 
            say : function() {
                console.log(this.msg);
            }
        }
    })
    

A：默认跳转页面
B：没有反应，阻止了默认跳转页面的行为
C：控制台输出 “i love cole”
两种用法：一种是直接使用，不绑定事件；一种是绑定事件

3）.capture 使用capture模式添加事件监听器
js:

    var hello = new Vue({
        el : "#hello",
        methods : {
            hello1 : function() {
                console.log("1");
            },
            hello2 : function() {
                console.log("2");
            }
        }
    })

A：

    <div id="hello" @click="hello1">
        <button @click="hello2">A</button>
    </div>

B：

    <div id="hello" @click.capture="hello1">
            <button @click="hello2">B</button>
    </div>

在button的父元素上使用.capture，B则显示1， 2，说明是捕获。
而A中不添加，则是冒泡，显示2， 1 。

注意：.capture必须在父元素中使用

4）.self 只当事件是从监听元素本身出发时才触发回调
js：

    var cool = new Vue({
        el :"#cool",
        methods :{
            cool1 :function() {
                console.log('1');
            },
            cool2 :function() {
                console.log('2');
            },
            cool3 :function() {
                console.log('3');
            },
            cool4 :function() {
                console.log('4');
            }
        }
    })

    <div id="cool" >
        <div @click="cool1">
            第一层
            <div @click.self="cool2">
                第二层
                <div @click="cool3">
                    第三层
                    <div @click="cool4">
                        第四层
                    </div>
                </div>
            </div>
        </div>
    </div>

若果第二层没有加.self，那么点击第四层，应该输出4，3，2，1；
现在加上了.slef，则输出4，3，1，因为第二层的self把第二层的事件设置成了仅自己调用时才有效，所以冒泡把第二层跳过了。

5）一些按键修饰符
方便我们监听键盘事件中的按键

<input v-on:keyup.13="submit" /> //监听input的输入，当输入回车时触发submit事件，用于处理常见的用户输入完直接按回车键提交（回车的keycode值为13）

一些常见的按键名被提供了别称：enter、tab、delete、esc、space、up、down、left、right
例如上面的可以写成：

<input v-on:keyup.enter="submit" />

也可以在Vue.config.keyCodes里添加自定义按键别名，无需修改v-on指令，例如：Vue.config.keyCodes.f1 = 112；