1.概述
- v-on指令的作用是:为元素绑定事件
- 事件名不需要写on
- 指令也可以简写为==@==
- 绑定的函数定义在methods属性当中
2.为元素绑定事件
先定义Vue实例
new Vue({
//挂载到id名为app的元素
el: "#app",
methods: {
//定义方法
方法名:function(){
//...code here
}
}
})
随后为被挂载的元素添加属性,格式如下:
<div>
<input type="button" value="按钮文本" v-on:事件名="方法名">
<input type="button" value="按钮文本" v-on:click="方法名">
<input type="button" value="按钮文本" v-on:dbclick="方法名">
<!--"v-on:"可以被替换为"@"-->
<input type="button" value="按钮文本" @dbclick="方法名">
</div>
3.常用的事件名
事件名 | 触发条件 |
---|---|
keydown | 按下任意按键 |
keypress | 除 Shift、Fn、CapsLock 外的任意键被按住(连续触发) |
keyup | 释放任意按键 |
click | 在元素上 按下并释放任意鼠标按键 |
auxclick | 已在元素上按下并释放指针设备按钮(任何非主按钮) |
contextmenu | 右键点击(在右键菜单显示前触发) |
dblclick | 在元素上双击鼠标按钮。 |
mousedown | 在元素上按下任意鼠标按钮。 |
mouseenter | 指针移到有事件监听的元素内。 |
mouseleave | 指针移出元素范围外(不冒泡)。 |
mousemove | 指针在元素内移动时持续触发。 |
mouseover | 指针移到有事件监听的元素或者它的子元素内。 |
mouseout | 指针移出元素,或者移到它的子元素上。 |
mouseup | 在元素上释放任意鼠标按键。 |
pointerlockchange | 鼠标被锁定或者解除锁定发生时。 |
pointerlockerror | 可能因为一些技术的原因鼠标锁定被禁止时。 |
select | 有文本被选中。 |
wheel | 滚轮向任意方向滚动 |
focus | 元素获得焦点(不会冒泡) |
blur | 元素失去焦点(不会冒泡) |
resize | 文档视图已调整大小 |
scroll | 文档视图或元素已滚动 |
cut | 已经剪贴选中的文本内容并且复制到了剪贴板 |
copy | 已经把选中的文本内容复制到了剪贴板 |
paste | 从剪贴板复制的文本内容被粘贴 |
reset | 点击重置按钮时 |
submit | 点击提交按钮 |
close | 好像是关于窗口的,感觉有用,用到时在补充功能 |
4.实践
4.1.基础实践:单击按钮后弹窗
先创建Vue实例
为被挂载的元素添加v-on:...
属性(或者@
属性)
4.2.进阶实践1:修改另一Vue对象的属性
如上,有一个引用名为textVue的Vue实例,通过v-text
指令赋值
现在希望使用v-on
修改这个值,则可以这么做:
如上,操作textVue的text属性(不用写中间的data)修改即可!
4.3.进阶实践2:传参
传参又分为三种情况:
-
传入自定义参数,不传event
-
括号内先定义好形参
-
-
v-on属性值中,传入参数
-
-
不传自定义参数,传入event
-
同样,括号内先定义好形参
-
v-on中传入的参数写==$event==
-
-
自定义参数和event都需要
-
其实就是上述两种情况的总和
-
-
-