Vuejs——（5）v-on

资料来于官方文档：

http://cn.vuejs.org/guide/events.html

本文是在官方文档的基础上，更加细致的说明，代码更多更全。

简单来说，更适合新手阅读

（二十二）方法处理器

①v-on的标准用法

用于监听DOM事件，典型的就是v-on:click，处理的方法放在methods属性里

会默认传一个参数，代码如下：

<button @click="test">点击</button>

methods: {
    test: function (evt) {
        console.log(evt);
    }
}

这里的evt，是标准的鼠标点击事件，类似jquery的click事件的回调函数中的参数。

可以通过this来找到data属性里的值（或许也能找到其他几个），例如：

data: {
    items: "test"
},
methods: {
    test: function (evt) {
        console.log(this.items);
        console.log(evt);
    }
}

这里的this.items，就是data的items这个变量；

②内联语句处理器

给v-on事件传一个固定参数

<button @click="test('a')">点击搜索age</button>

当这个时候，函数的第一个参数就不是鼠标点击事件了，而是字符串a

test: function (mes) {
    console.log(mes);
}

mes的值是’a’

$event

如果需要给他一个像上面一样的鼠标点击事件时，则使用$event作为参数（他和不传参数时的默认鼠标事件对象是相同的）；

使用Vue实例的变量

如果需要传一个data属性里的值，则直接放属性名

例如：

<div id="app">
    <a href="http://www.baidu.com" @click="test(items, $event)">点击搜索age</a>
</div>
<script>
    var test = {name: "test"};
    var vm = new Vue({
        el: '#app',
        data: {
            items: "test"
        },
        methods: {
            test: function (msg, evt) {
                console.log(msg);
                evt.preventDefault();//阻止默认动作，比如这里是页面跳转
            }
        }
    })
</script>

输出：test和BUTTON

③事件修饰符（针对v-on）

对于.self来说，例如以下代码：

<div id="app">
    <div @click.self="test" class="a">
        <div class="b">
        </div>
    </div>
</div>
<script>
    var test = {name: "test"};
    var vm = new Vue({
        el: '#app',
        data: {
            items: "test"
        },
        methods: {
            test: function (evt) {
                console.log(evt);
            }
        }
    })
</script>

只有当点击到非div class=’b’的区域时，才会触发事件；

④自定义按键别名：

规范：

Vue.directive(“on”),keyCode.别名 = 按键码;

示例：

Vue.directive("on").keyCode.z = 122;

这个指键盘码为122（小写z）的别名命名为z，当按键键盘的z键时（无论大小写），都会触发事件。

注意，这个要写在实例声明之后（推测是要含有该按键的template被创建后才有效）