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 ...
随机推荐
- enovia PLM : add new value to SPEO
Solution: Modify LUX_SPEO attribute in PLM Modify D_SPEO attribute in SAP , Login sap system F3 Tcod ...
- 【转载】vue-cli搭建的环境,用nginx做代理服务器,访问时显示:Invalid Host header
来源:https://blog.csdn.net/Cookysurongbin/article/details/86077241 vue-cli搭建的环境,用nginx做代理服务器,访问时显示:Inv ...
- MySQL的一次优化记录 (IN子查询和索引优化)
这两天实习项目遇到一个网页加载巨慢的问题(10多秒),然后定位到是一个MySQL查询特别慢的语句引起的: SELECT * FROM ( SELECT DISTINCT t.vc_date, t.c_ ...
- P4151 [WC2011]最大XOR和路径 线性基
题目传送门 题意:给出一幅无向图,求1到n的所有路径中最大异或和,一条边可以被重复经过. 思路: 参考了大佬的博客 #pragma GCC optimize (2) #pragma G++ optim ...
- android studio 设计任务内容和识别内容界面 (android stuido design task layout)
本人android studio版本是 3.4.1,设计了一个任务内容和识别内容的界面,欢迎大家品尝. 界面显示如下图所示: 实现代码如下: <?xml version="1.0&qu ...
- Linux直接在通过终端打开图片文件
为了提高效率,减少使用鼠标,有时候想直接通过终端的命令打开一个图片进行查看.可以使用的命令有: eog filename display filename 再使用Alt+F4就可以关闭窗口,尽量达到手 ...
- SQL 按关键字排序
SQL ORDER BY Keyword(按关键字排序) ORDER BY 关键字用于对结果集进行排序. SQL ORDER BY 关键字 ORDER BY 关键字用于按升序或降序对结果集进行排序. ...
- Mysql LOAD DATA读取客户端任意文件漏洞复现(原理分析)
环境搭建 怎么设置Mysql支持外联? use mysql; grant all privileges on *.* to root@'%' identified by '密码'; //授权语句 fl ...
- java内存泄露与内存溢出
内存溢出 out of memory,是指程序在申请内存时,没有足够的内存空间供其使用,出现out of memory: 内存泄露 memory leak,是指程序在申请内存后,无法释放已申请的内存空 ...
- Java习题练习
Java习题练习 1. 依赖注入和控制反转是同一概念: 依赖注入和控制反转是对同一件事情的不同描述,从某个方面讲,就是它们描述的角度不同.依赖注入是从应用程序的角度在描述,可以把依赖注入描述完整点:应 ...