版权声明:出处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)

修饰符

效果

备注

.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——(5)v-on的更多相关文章

  1. Vuejs——(2)Vue生命周期,数据,手动挂载,指令,过滤器

    (八)传入的数据绑定 先创建一个对象(假如是obj),然后将他传入Vue实例中,作为data属性的值,那么 ①obj的值的变化,将影响Vue实例中的值的变化: ②相反一样: ③可以在Vue实例外面操纵 ...

  2. Vuejs——(1)入门(单向绑定、双向绑定、列表渲染、响应函数)

    版权声明:出处http://blog.csdn.net/qq20004604   目录(?)[+]   参照链接: http://cn.vuejs.org/guide/index.html [起步]部 ...

  3. Vuejs——(3)计算属性,样式和类绑定

    版权声明:出处http://blog.csdn.net/qq20004604   目录(?)[+]   先上总结: (十九)标签和API总结(2) vm指new Vue获取的实例 ①当dom标签里的值 ...

  4. Vuejs——(4)v-if、v-for

    版权声明:出处http://blog.csdn.net/qq20004604   目录(?)[+]   (二十)v-if ①标准v-if用法 简单来说,该值为true则显示该标签,为false则不显示 ...

  5. Vuejs——(8)Vuejs组件的定义

    版权声明:出处http://blog.csdn.net/qq20004604   目录(?)[+]   本篇资料来于官方文档: http://cn.vuejs.org/guide/components ...

  6. Vuejs——(10)组件——父子组件通信

    版权声明:出处http://blog.csdn.net/qq20004604   目录(?)[+]   本篇资料来于官方文档: http://cn.vuejs.org/guide/components ...

  7. Vuejs(14)——在v-for中,利用index来对第一项添加class

    版权声明:出处http://blog.csdn.net/qq20004604 (1)在v-for中,利用index来对第一项添加class <a class="list-group-i ...

  8. Vuejs——(6)Vuejs与form元素

    版权声明:出处http://blog.csdn.net/qq20004604   目录(?)[+]   资料来于官方文档: http://cn.vuejs.org/guide/forms.html 本 ...

  9. Vuejs——(7)过渡(动画)

    版权声明:出处http://blog.csdn.net/qq20004604   目录(?)[+]   本篇资料来于官方文档: http://cn.vuejs.org/guide/transition ...

  10. Vuejs——(9)组件——props数据传递

    版权声明:出处http://blog.csdn.net/qq20004604   目录(?)[+]   本篇资料来于官方文档: http://cn.vuejs.org/guide/components ...

随机推荐

  1. DOM 练习

    练习一: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  2. Eclipse安装教程

    Eclipse安装教程     (Win7_64bit + Eclipse_64bit + JDK_8u131_64bit + python2.7.8 + PyDev5.7.0插件) 适用操作系统:W ...

  3. Bioconductor应用领域之基因芯片

    引用自https://mp.weixin.qq.com/s?__biz=MzU4NjU4ODQ2MQ==&mid=2247484662&idx=1&sn=194668553f9 ...

  4. IIS7配置下载apk以及目录浏览

    IIS7为了增加安全性,如果需要禁止目录浏览.只需要按下面的步骤执行就可以 1.选择站点:2.选择功能视图:3.选择IIS下面的目录浏览:4.在右上角的操作中选择“打开功能”:5.选择右边的禁用. 今 ...

  5. HashCode的理解

    一.hashcode是什么 要理解hashcode首先要理解hash表这个概念 1. 哈希表 hash表也称散列表(Hash table),是根据关键码值(Key value)而直接进行访问的数据结构 ...

  6. 根据二进制和十进制转换规则转换成游戏[xyytit]

    摘要: 二進位是由十進位轉換而成,它的數字都由1.0組成的.我們研究發現由十進位轉換而成的二進位的數字可以不只局限在於1~127,它的數可以更加深加廣,並且可以利用二進位的規則轉換成遊戲.我們利用2n ...

  7. 百度Cafe原理--Android自动化测试学习历程

    主要讲解内容及笔记: 一.Cafe原理 Cafe是一款自动化测试框架,解决问题:跨进程测试.快速深度测试 官网:http://baiduqa.github.io/Cafe/ Cafe provides ...

  8. 迭代器&生成器&yield异步

    迭代器 #迭代器是访问集合元素的一种形式,迭代器从集合的第一个元素开始访问,直到所有的元素被访问# 结束才结束,迭代器只能往前访问,不能往后访问,比如你先访问1,在访问2,在访问3.如果已经# 访问到 ...

  9. win8.1下cocos2d-x 3.x环境搭建

    Win8.1下Cocos2d-x 3.4环境搭建 第一步: 需要下载的:(Windows 64位系统下环境搭建) Ant   apache-ant-1.9.4-bin.zip NDK   androi ...

  10. 9-n个人中选k个人的选择方法种类

    用递归法计算从n个人中选择k个人组成一个委员会的不同组合数分析: 1.如果k>n,结果为0 2.k=n时,只有1组 3.k<n的时候,可以把解空间分为两部分:假设其中一个人叫X,那么选X的 ...