vue之事件处理
一、事件处理方法
1、格式
- 完整格式:v-on:事件名="函数名" 或 v-on:事件名="函数名(参数……)"
缩写格式:@事件名="函数名" 或 @事件名="函数名(参数……)"
注意:@后面没有冒号
- event :函数中的默认形参,代表原生 DOM 事件
当调用的函数,有多个参数传入时,需要使用原生DOM事件,则通过 $event 作为实参传入作用:用于监听 DOM 事件
2、实例
<div id="app"> <!-- `greet` 是在下面定义的方法名 -->
<button v-on:click="greet">无参数事件</button>
<button v-on:click="greet2('hellogreet2')">有参数事件</button>
<button v-on:click="greet3">无参数event</button>
<button v-on:click="greet4('hello',$event)">有参数event</button> </div>
<script> var vm = new Vue({
el: '#app',
data: {}, // 在 `methods` 对象中定义方法
methods: { greet: function () {
alert("无参数")
}, greet2: function (arg) {
console.log(arg)
alert(arg)
}, // `event` 是默认原生 DOM 事件
greet3: function (event) {
console.log(event.target.tagName)
console.log(event.target.innerHTML) },
// `event` 是默认原生 DOM 事件,如果有多个参数,event要以$event传入
greet4: function (arg, event) {
console.log(arg)
console.log(event.target.tagName)
console.log(event.target.innerHTML)
} } }
) </script>
二、事件修饰符
1、.stop 阻止单击事件继续传播 event.stopPropagation()
<div id="app"> <div @click="doThis">
<!--点击后会调用doWhat再调用doThis-->
<button @click="doWhat">单击事件会继续传播</button>
</div> <!-- 阻止单击事件继续传播,-->
<div @click="doThis">
<!--点击后只调用doWhat-->
<button @click.stop="doWhat">阻止单击事件会继续传播</button>
</div> </div>
// 在 `methods` 对象中定义方法
methods: { doThis: function () {
alert("doThis....");
},
doWhat:function(){
alert("doWhat....");
}, }
2、.prevent 阻止事件默认行为 event.preventDefault()
<div id="app"> <!-- 阻止事件默认行为 -->
<a href="http://www.baidu.com" @click.prevent="stopDefault">百度</a> </div>
// 在 `methods` 对象中定义方法
methods: {
stopDefault() {
alert("href默认跳转被阻止....")
},
}
3、.once 点击事件将只会触发一次
<div id="app"> <!-- 点击事件将只会触发一次 -->
<button @click.once="doOnce">点击事件将只会触发一次</button> </div>
// 在 `methods` 对象中定义方法
methods: {
doOnce() {
alert("只触发一次")
},
}
4、.self只会触发自己范围内的事件,不会包含子元素
<div @click.self="outer" style="width: 200px;height:100px;background: antiquewhite">
<button @click.stop="inner">inner</button>
</div>
// 在 `methods` 对象中定义方法
methods: {
outer() {
alert("outer")
}, inner() {
alert("inner")
},
}
5、.capture 捕获事件
嵌套多层父子关系,所有父子层都有点击事件,点击子节点,就会触发从外至内 父节点-》子节点的点击事件
<div class="outeer" @click.capture="outer" style="width: 200px;height:100px;background: antiquewhite">
<button @click.capture="inner">inner</button>
</div>
// 在 `methods` 对象中定义方法
methods: {
outer() {
alert("outer")
}, inner() {
alert("inner")
},
先出现:
再出现:
三、按键修饰符
1、格式
- 格式:v-on:keyup.按键名 或 @keyup.按键名
- 常用按键名:
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
2、实例
<div id="app"> <label>
<!--进入输入框按回车时调用keyEnter-->
<input @keyup.enter="keyEnter">
</label> </div>
// 在 `methods` 对象中定义方法
methods: {
keyEnter(){
alert("enter...")
},
}
四、鼠标修饰符
1、使用方式
.left
.right
.middle
这些修饰符会限制处理函数仅响应特定的鼠标按钮。
- @click.left="事件名" 点击鼠标左键触发事件
- @click.right="事件名" 点击鼠标右键触发事件
- @click.middle="事件名" 点击鼠标滚轮触发事件
2、实例
<div id="app"> <div @click.left="mouseLeft">点击鼠标左键触发事件</div> </div>
// 在 `methods` 对象中定义方法
methods: {
mouseLeft(){
alert("点击鼠标左键触发事件")
},
}
详情:https://cn.vuejs.org/v2/guide/events.html
vue之事件处理的更多相关文章
- vue基础——事件处理
监听事件 可以用 v-on 指令监听dom事件,并在触发时运行一些JavaScript代码. 示例: <div id="example-1"> HTML <but ...
- 一起学Vue之事件处理
在Vue进行前端开发中,事件监听是必不可少的功能,本文通过简单的小例子,简述v-on的简单用法,仅供学习分享使用,如有不足之处,还请指正. 监听事件 可以用 v-on 指令监听 DOM 事件,并在触发 ...
- Vue.js事件处理
Vue.js事件处理 1.v-on指令 用法如下:使用v-on:指令指定其执行的具体内容或者方法名即可. <button v-on:click='num++'>giao</butto ...
- 前端框架之Vue(7)-事件处理
监听事件 可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码. 示例: <div id="example-1"> <butt ...
- 【04】Vue 之 事件处理
4.1. 监听事件的Vue处理 Vue提供了协助我们为标签绑定时间的方法,当然我们可以直接用dom原生的方式去绑定事件.Vue提供的指令进行绑定也是非常方便,而且能让ViewModel更简洁,逻辑更彻 ...
- vue基础---事件处理
(1)事件监听 v-on 指令监听 DOM 事件,并在触发时运行JS代码 <div class="event_area"> {{message}} <button ...
- VUE:事件处理和表单输入绑定
事件处理 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
- 浅入深出Vue:事件处理
上一篇的最后留下了一个 v-on的思考,也就是本章的主题:事件处理 为什么需要事件处理 在前端开发中,经常要面对各种表单.按钮.而这里面就住着一个事件:点击 (click). 前端童鞋们肯定不陌生它, ...
- vue的事件处理梳理
一.事件函数 1.v-on绑定click,执行一个函数 <input type="button" v-on:click="test" value=&quo ...
随机推荐
- C语言中各种进制的表示
#include<stdio.h> int main() { //默认情况下是十进制 ; // 二进制(0b或者0B开头) int number2 = 0b1100; //八进制(0开头) ...
- Python第九节 条件和循环
while...else 当满足while循环条件的时候执行循环体内的语句,否则执行else的语句例如下面的例子: count = 1 while count <= 5: print(" ...
- MS14-068利用
漏洞原理详情后续补上:kerberos 协议实现过程中的某些 bug,致使普通域用户可以任意伪造高权限 PAC,去请求 TGS 从而导致的权限提升,漏洞现在很少遇到了. 一.利用 需要拥有一个域账号的 ...
- 判断list中元素是否是相邻
private static List<Integer> findShunZi(List<Integer> tmpCards){ List<Integer> lis ...
- Spring Cloud服务保护
微服务虽然解决了传统单体式应用各个模块之间强耦合的缺点,但同时也引出了新问题,由于微服务各个服务之间是独立部署的,并且一般情况下一个服务往往会依赖多个其他服务,并且服务之间的调用更多的是依赖不稳定的网 ...
- KiCAD输出生产文件
KiCAD输出生产文件 本文包括PCB生产制造的所有文件的输出方法,包括:BOM.坐标.锡膏层.GERBER.钻孔.丝印和装配图 一.KiCAD导出BOM KiCAD导出BOM有以下几种办法: 注意: ...
- 牛客练习赛48 C,D,E
C 小w的糖果 题意:3种操作,第一种是使pos右边的数全部+1,第二种是pos右边的数依次+k(k从1开始递增),第三种是pos右边的数依次+k^2(k从1开始递增). 解法:第一种我们很容易想到差 ...
- mongodb数据库管道操作
1.$project(修改文档的结构,可以用来重命名.增加或删除文档中的字段) db.order.aggregate([ { $project:{ rade_no:1, all_price:1} } ...
- 工程师技术(一):启用SELinux保护、自定义用户环境、配置IPv6地址、配置聚合连接、配置firewalld防火墙
一.启用SELinux保护 目标: 本例要求为虚拟机 server0.desktop0 配置SELinux: 确保 SELinux 处于强制启用模式 在每次重新开机后,此设置必须仍然有效 方案: SE ...
- 使用poi实现生成excel文件
import java.util.ArrayList; import javax.servlet.ServletOutputStream; import org.apache.poi.hssf.use ...