Vuejs——(5)v-on
来源:互联网 发布:网络攻击的种类 编辑:程序博客网 时间:2024/06/05 10:03
版权声明:我萌么~萌!么么哒~
目录(?)[+]
资料来于官方文档:
http://cn.vuejs.org/guide/events.html
本文是在官方文档的基础上,更加细致的说明,代码更多更全。
简单来说,更适合新手阅读
(二十二)方法处理器
①v-on的标准用法
用于监听DOM事件,典型的就是v-on:click,处理的方法放在methods属性里
会默认传一个参数,代码如下:
这里的evt,是标准的鼠标点击事件,类似jquery的click事件的回调函数中的参数。
可以通过this来找到data属性里的值(或许也能找到其他几个),例如:
这里的this.items,就是data的items这个变量;
②内联语句处理器
给v-on事件传一个固定参数
当这个时候,函数的第一个参数就不是鼠标点击事件了,而是字符串a
mes的值是’a’
$event
如果需要给他一个像上面一样的鼠标点击事件时,则使用$event作为参数(他和不传参数时的默认鼠标事件对象是相同的);
使用Vue实例的变量
如果需要传一个data属性里的值,则直接放属性名
例如:
输出: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来说,例如以下代码:
只有当点击到非div class=’b’的区域时,才会触发事件;
④自定义按键别名:
规范:
Vue.directive(“on”),keyCode.别名 = 按键码;
示例:
这个指键盘码为122(小写z)的别名命名为z,当按键键盘的z键时(无论大小写),都会触发事件。
注意,这个要写在实例声明之后(推测是要含有该按键的template被创建后才有效)
- Vuejs——(5)v-on
- Vuejs——(5)v-on
- Vuejs——(4)v-if、v-for
- Vuejs——(4)v-if、v-for
- Vuejs——(6)Vuejs与form元素
- Vuejs——(6)Vuejs与form元素
- Vuejs——(8)Vuejs组件的定义
- Vuejs——(8)Vuejs组件的定义
- Vuejs(14)——在v-for中,利用index来对第一项添加class
- Vuejs(14)——在v-for中,利用index来对第一项添加class
- Vuejs实践--v-model
- vuejs(5)
- VueJs—常用操作手册
- v-on
- v-on
- Vuejs——(12)组件——动态组件
- Vuejs——(13)组件——杂项
- Vuejs——(12)组件——动态组件
- 如何快速的解决Maven依赖冲突
- 【LeetCode】169. Majority Element Majority Element Given an array of size n, find the majority eleme
- thinkphp3.2版本的cli模式 实现定时任务 curl
- Java_多线程
- 有理数的加减乘除
- Vuejs——(5)v-on
- Ubuntu 安装完成后,不能使用无线网络
- 回流与重绘
- finally语句详解
- 改变你思维模式的书单
- MySQL权限管理
- Android Fragment 真正的完全解析(下)
- 项目无错误Tomcat启动时间过长
- 用synonym访问其它用户下的表