首页 > 代码库 > Vuejs——v-on

Vuejs——v-on

2024-10-15 16:10:39   217人阅读

版权声明：出处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.mamicode.com/"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被创建后才有效）

Vuejs——v-on


联系
我们