Vuejs——v-on

版权声明：出处http://blog.csdn.net/qq20004604

目录(?)[+]

资料来于官方文档：

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

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

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

（二十二）方法处理器

①v-on的标准用法

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

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

1. <button @click="test">点击</button>
2. methods: {
3. test: function (evt) {
4. console.log(evt);
5. }
6. }

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

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

1. data: {
2. items: "test"
3. },
4. methods: {
5. test: function (evt) {
6. console.log(this.items);
7. console.log(evt);
8. }
9. }

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

②内联语句处理器

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

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

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

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

mes的值是’a’

$event

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

使用Vue实例的变量

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

例如：

1. <div id="app">
2. <a href="http://www.baidu.com" @click="test(items, $event)">点击搜索age</a>
3. </div>
4. <script>
5. var test = {name: "test"};
6. var vm = new Vue({
7. el: ‘#app‘,
8. data: {
9. items: "test"
10. },
11. methods: {
12. test: function (msg, evt) {
13. console.log(msg);
14. evt.preventDefault();//阻止默认动作，比如这里是页面跳转
15. }
16. }
17. })
18. </script>

输出：test和BUTTON

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

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

1. <div id="app">
2. <div @click.self="test" class="a">
3. <div class="b">
4. </div>
5. </div>
6. </div>
7. <script>
8. var test = {name: "test"};
9. var vm = new Vue({
10. el: ‘#app‘,
11. data: {
12. items: "test"
13. },
14. methods: {
15. test: function (evt) {
16. console.log(evt);
17. }
18. }
19. })
20. </script>

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

④自定义按键别名：

规范：

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

示例：

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

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

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