vue v-on

1. 作用：对页面中的事件进行绑定
2. 语法： v-on:事件类型=“事件处理函数名”
缩写： @事件类型=“事件处理函数名”
3. vue事件绑定提供了两方面的内容：自定义事件和为DOM绑定事件。vue中为DOM元素绑定事件是采用DOM2级事件的处理方式。
例如 ：

单击事件

双击事件

鼠标移入事件

鼠标移出事件

var app = new Vue({ el : '#app', data : { }, methods : { clickMe : function(){ console.log('单击事件发生'); }, dblclickMe : function (){ console.log('双击事件发生'); }, mouseover : function() { console.log('鼠标移入事件'); }, mouseout : function () { console.log('鼠标移出'); } }

结果 ：

栗子1 ： 用v-on指令来监听DOM事件，并进行JavaScript处理

    

     Add1 
    
the button above has been clicked {{ counter }} times
    
    var app1 = new Vue({
    el : '#app1',
    data : {
        counter : 0
    }
    });

结果：

栗子2 ： 可以将事件处理函数名放在methods中，这样直接调用函数名即可

    

    great
    
    var app2 = new Vue({
    el : "#app2",
    data : {
        name : 'vue'
    },
    methods : {
        great : function(event){
            alert('hello' + ' ' + this.name + '!');
            if(event){
                alert(event.target.tagName);
            }
        }
    }
    });

结果: hello vue BUTTON
栗子3 ：可以给函数传入参数

    

    say hi
    say what
    
    var app3 = new Vue({
    el : '#app3',
    methods : {
        say : function(message){
            alert(message);
        }
    }
    })

结果: hi what
栗子4 ：在内联语句处理器中访问原生DOM事件。可以用特殊变量$event把它传入方法

submit
var app4 = new Vue({
    el : '#app4',
    methods : {
        warn : function(message, event){
            if(event) event.preventDefault()
            alert(message)
        }
    }
})

结果: form cannot be submitted yet

尽管我们可以在methods中实现阻止默认事件等，但更好的方法是methods中只有纯粹的数据逻辑，而不是去处理DOM事件
为了解决这个问题，vue为v-on提供了事件修饰符。通过由.表示的指令后缀来调用修饰符

1..stop 阻止单击事件冒泡
栗子 ：

            
 
var app1 = new Vue({
el : "#app1",
methods : {
    doIt : function(){
        alert(123);
    },
    show : function(){
        alert(456);
    }   
}
})

解析 ： 因为div是button的父元素，当点击button时，会冒泡到父元素，相当于也点击了button，也就是没阻止冒泡事件时，会弹出123 接着弹出456，阻止冒泡事件之后，不会冒泡到父元素，也就只能弹出123了
2. .prevent 提交事件不再重载页面

未完。。。因为不知道咋举例子