事件绑定与监听

当模板渲染完成之后，就可以进行事件的绑定与监听。v-on指令用来监听DOM事件，通常在模板内直接使用。

Say

方法及内联语句处理器

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

Say    var vm = new Vue({        el: "#app",        data: {            msg:"hello vue.js"        },        methods:{            say:function(){                alert(this.msg);            }        }    })

v-on缩写形式：@。@click="say"

v-on支持内联JavaScript语句，但仅限是一个语句。

Say    var vm = new Vue({        el: "#app",        data: {            msg:"hello vue.js"        },        methods:{            sayFrom:function(from){                alert(this.msg + '' + from);            }        }    })

在直接绑定methods函数和内联JavaScript与居室，都有可能需要获取原生DOM事件对象

Event    event   Say  //这样写获取不到event    var vm = new Vue({        el: "#app",        methods:{            showEvent:function(event){                console.log(event);            }        }    })

同一个元素上可以通过v-on绑定多个相同事件函数，执行顺序为顺序执行。

事件修饰符

1. .stop:调用event.stopPropagation().

1. .prevent:调用event.preventDefault().

1. .caputure:使用capture模式添加事件监听器。

        
    
     ...
    

1. .self:只当事件是从监听元素本身触发时才触发调回。

        
    
     ...
    

1. .once:

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 @click.prevent.self 会阻止所有的点击，而 @click.self.prevent 只会阻止元素上的点击。

//例子    var vm = new Vue({        el: '#app',        methods:{            saySelf(msg) {                alert(msg);            }        }    });    //HTML代码    
    
        
     button        
     button    
    

键值修饰符

在监听键盘事件时，需要监测常见的键值。

  //监听input的输入，当输入回车时触发submit函数。

记住所有的keyCide比较困难，所以Vue为最常用的按键提供了别名。

.enter

.tab

.delete(捕获“删除”和“退格”键)

.esc

.space

.up

.down

.left

.right

可以通过全局config.keyCodes对象自定义键值修饰符别名：

// 可以使用 v-on:keyup.f1    Vue.config.keyCodes.f1 = 112

与传统事件绑定的区别

1.无需手动管理事件。ViewModel被销毁时，所有的事件处理器都会自动被删除，让我们从获取DOM绑定事件然后在特定情况下再解绑这样的事情中解脱出来。

2.解耦。ViewModel代码是纯粹的逻辑代码，和DOM无关，有利于我们写自动化测试用例。

vue.extend()

为了重复使用的子组件，vue.js提供了Vue.extend(options)方法，创建基础Vue构造器的“子类”，参数options对象和直接声明Vue实例参数对象基本一致。

var Child = Vue.extend({        teplate:'#child', //不同的是，el和data选项需要通过函数返回值赋值，避免多个组件实例共用一个数据        data:function(){            return {                ...            }        },        ...    })    Vue.component('child',child)  //全局注册子组件    
      //子组件在其他组件内的调用方式