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 ...
随机推荐
- JUnit中Assert简单介绍
junit中的assert方法全部放在Assert类中,总结一下junit类中assert方法的分类.1.assertTrue/False([String message,]boolean condi ...
- 暴力穷举zip、rar压缩文件的密码
生成密码的方式类似与时钟,末尾遍历完了第k位所有的字符,就让第k位的前一位到下一位字符,第k位回到第0个字符. 对python还不太熟悉,效率比较低,但是能破解简单的密码. import zipfil ...
- Asp.net Controller中View 和Action方法认证Authorize 及对AuthorizeAttribute扩展
Asp.net Controller中View和Action方法认证Authorize 在建立Web 站点安全性时 1.登录后才可访问系统文件 ——限制 Forms认证 <authenticat ...
- OpenCV学习笔记 笔记汇总
转载来源:https://www.cnblogs.com/tonyc/p/6407318.html 今后开始学习OpenCV 1:OpenCV学习笔记 作者:CSDN数量:55篇博文网址:http ...
- 【教程】CentOS 7安装 最新版本Docker
博主最近需要安装Docker,步骤如下: Docker安装官方地址:https://docs.docker.com/install/linux/docker-ce/centos/ 以下命令都是在roo ...
- Jmeter的安装与环境配置
1.首先从jmeter的官网http://jmeter.apache.org/download_jmeter.cgi下载jmeter,目前最新版本为5.1,支持的JDK为1.8.. 然后进行解压. 2 ...
- MVC模式和MVVM模式简单理解
相信这是两个耳熟能详的词了,MVC广泛的用到了java的各种框架当中,比如Struts2, SpringMVC等,作为B/S架构开发,MVS模式也是我们必须掌握的. mvc一步一步演化之后有了现在的M ...
- C#中的类型相等与恒等(Equality & Identity)
l Equality:如果两个对象是相同的类型,并且它们各自带有相同和等值的属性.(They are instances of the same type and if each of the fi ...
- Shiro学习(24)在线回话管理
有时候需要显示当前在线人数.当前在线用户,有时候可能需要强制某个用户下线等:此时就需要获取相应的在线用户并进行一些操作. 本章基于<第十六章 综合实例>代码构建. 会话控制器 Java代码 ...
- Linux环境下安装PHP的memced扩展
先下载libmemcached: wget https://launchpad.net/libmemcached/1.0/1.0.18/+download/libmemcached-1.0.18.t ...