Vue事件绑定与监听

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

Say
//可简写
Say

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

通过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语句，例如：

    SayFrom

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

        Event
        showEvent

二：常用修饰符

1）.stop阻止事件冒泡

    

        点我
        点我
    

	//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 阻止默认事件

    

        A 
        B
        C
    
	//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：

    

        A
    

B：

    

            B
    

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

    

        

            第一层
            

                第二层
                

                    第三层
                    

                        第四层
                    
                
            
        
    

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

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

 //监听input的输入，当输入回车时触发submit事件，用于处理常见的用户输入完直接按回车键提交（回车的keycode值为13）

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

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