vue学习笔记6——v-on

1. 作用：对页面中的事件进行绑定
2. 语法： v-on:事件类型=“事件处理函数名”
缩写： @事件类型=“事件处理函数名”
3. vue事件绑定提供了两方面的内容：自定义事件和为DOM绑定事件。vue中为DOM元素绑定事件是采用DOM2级事件的处理方式。
例如 ：<div @click="func()'></div> 这里事件处理函数后面有没有括号都可以，但如果传参的话，就必须加()
实际上相当于
el.assEventListener('click',func)
所以addEventListener支持绑定的事件，v-on指令也都支持
4. 举个栗子
一个直观的栗子

    <ul id="app">
    <li v-on:click = "clickMe">单击事件</li>
    <li v-on:dblclick = "dblclickMe">双击事件</li>
    <li v-on:mouseover = "mouseover">鼠标移入事件</li>
    <li v-on:mouseout = "mouseout">鼠标移出事件</li>
    </ul>
    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处理

    <div id="app1">
    <button v-on:click="counter += 1"> Add1 </button>
    <p>the button above has been clicked {{ counter }} times</p>
    </div>
    var app1 = new Vue({
    el : '#app1',
    data : {
        counter : 0
    }
    });

结果：

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

    <div id="app2">
    <button v-on:click="great">great</button>
    </div>
    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 ：可以给函数传入参数

    <div id="app3">
    <button v-on:click="say('hi')">say hi</button>
    <button v-on:click="say('what')">say what</button>
    </div>
    var app3 = new Vue({
    el : '#app3',
    methods : {
        say : function(message){
            alert(message);
        }
    }
    })

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

<button id="app4" v-on:click="warn('form cannot be submitted yet.', $event)">submit</button>
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 阻止单击事件冒泡
栗子 ：

<div id="app1" @click="show">
    <input @click.stop="doIt" value="clickMe" type="button" name="">        
</div> 
var app1 = new Vue({
el : "#app1",
methods : {
    doIt : function(){
        alert(123);
    },
    show : function(){
        alert(456);
    }   
}
})

解析 ： 因为div是button的父元素，当点击button时，会冒泡到父元素，相当于也点击了button，也就是没阻止冒泡事件时，会弹出123 接着弹出456，阻止冒泡事件之后，不会冒泡到父元素，也就只能弹出123了
2. .prevent 提交事件不再重载页面
<form v-on:submit.prevent="onSubmit"></form>
未完。。。因为不知道咋举例子