Vuejs——v-on

Posted 2020-09-26 彭蒙善

版权声明：出处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.   
3. methods: {  
4.     test: function (evt) {  
5.         console.log(evt);  
6.     }  
7. }  

 

这里的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）

修饰符	效果	备注
.prevent	阻止html元素的默认事件	类似evt.preventDefault()
.stop	阻止事件冒泡
keyup.数字	当该数字表示的按键弹起时	有别名
keyup.enter	回车	按下回车时
keyup.tab	Tab按钮	tab切入该input时
keyup.delete	del键	会导致原始的delete删除功能失效
keyup.esc	esc键	按下esc时
keyup.space	空格键	不会使空格功能失效（即按下空格时，既空格，又触发事件）
keyup.up	键盘方向键的上	上键同时会使光标到输入框的最左边 （焦点在输入框时才生效，按键弹起时生效，下同）
keyup.down	键盘方向键的下	到输入框的最后面
keyup.left	方向左键	光标左移
keyup.right	方向右键	光标右移
.self	当前元素本身（非子元素）时触发事件	类似冒泡的时候找最顶层，一般用于click之类的鼠标事件(1.0.16之后)
.capture	按照capture模式来处理	简单来说，根据我推测，是根据捕获顺序触发冒泡（原本模式是后捕获先冒泡，这个正好相反）（1.0.16之后）

对于.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被创建后才有效）