Vue.js 事件处理器 v-on

Vue.js官方文档对于 v-on 这一常用指令提供了缩写方法，看看官网是怎么介绍的

1、方法事件处理器

可以用 v-on 指令监听DOM事件

    `msg`

绑定一个单机事件的处理方法showMsg到methods中

var vm = new Vue({
    el:'#box', //el指代选择器如 id，class，tagName
    data:{
        msg:'点击按钮', 
        name:'Vue.js'
    },
    methods:{  //在methods对象中定义方法
        showMsg: function(e){
            //方法中的this，指代new Vue这个实例对象，可以再次验证下
            console.log(this);
            //event 是原生DOM事件
            console.log(e.target); //打印出事件源对象button
            console.log('Hello' + this.name + '!');
        }
    }
});

查看页面效果截图

2、内联语句处理器

除了直接绑定到一个方法里面，也可以用内联Javascript语句

    Say Hi 
    
    Say What

var vm2 = new Vue({
    el:'.app',
    methods:{
        say: function(msg){ //把方法里面的参数打印出来
            console.log(msg);
        }
    }
});

查看页面效果截图

有时也需要在内联语句处理器中访问原生DOM事件，比如阻止链接跳转。可以用特殊变量$event把它传入方法：

    打开Vue官网

var vm2 = new Vue({
    el:'.app',
    data:{
        test:'阻止链接跳转'
    },
    methods:{
        stop: function(test, e){
            e.preventDefault();
            alert(test);
        }
    }
});

点击a链接以后，页面还能跳转到vue官网吗？看看页面效果截图

3、事件修饰符

在事件处理器中经常需要调用event.preventDefault()或event.stopPropagation()。尽管在方法内可以轻松做到（如上例所示），不过让方法是纯粹的数据逻辑而不处理DOM事件细节会更好。

为了解决这个问题，Vue为v-on提供了两个事件修饰符：.prevent和.stop

...

...