Vue中的事件处理详情
目录
- 一、事件处理
- 二、事件修饰符
- 三、键盘事件
- 使用技巧
一、事件处理
给按钮绑定一个 click 事件，点击弹出提示信息
<!--普通写法-->
<button v-on:click="showInfo">点我</button>
<!--简写-->
<button @click="showInfo">点我</button>
new Vue({
el:'#root',
methods:{
showInfo(){
alert('Hello')
}
}
})
我们来增加参数：
<button @click="showInfo($event,'world')">点我</button>
showInfo(event,name){
//console.log(event.target.innerHTML);//点我
//console.log(this);//此处的this是vm（vue实例对象）
//所有被vue管理的函数最好都写成普通函数，不要写成箭头函数
//否则this就变成了window
alert('Hello '+name)
}
如果只写 showInfo('world') 那么方法中的 event 参数就不能用了，所以我们加了一个 $event来占位
事件的基本使用 ：
- 1.使用
v-on :xxx或@xxx绑定事件，其中xxx是事件名 - 2.事件的回调需要配置在 methods 对象中，最终会在 vm 上
- 3.methods 中配置的函数，不要用箭头函数！否则 this 就不是 vm 了
- 4.methods 中配置的函数，都是被Vue 所管理的函数，this 的指向是 vm 或组件实例对象
- 5.
@click="demo”和@click="demo($event)”效果一致，但后者可以传参
二、事件修饰符
Vue中的事件修饰符
- 1.
prevent: 阻止默认事件 - 2.
stop:阻止事件冒泡 - 3.
once:事件只触发一次 - 4.
capture:使用事件的捕获模式 - 5.
self:只有 event.target 是当前操作的元素时才触发事件 - 6.
passive:事件的默认行为立即执行，无需等待事件回调执行完毕
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue初识</title>
<script type="text/javascript" src="./js/vue.js"></script>
<style>
*{
margin: 20px;
}
.demo1{
width: 100px;
height: 100px;
background: aqua;
}
.div1{
padding: 5px;
background: skyblue;
}
.div2{
padding: 5px;
background: orange;
}
.list{
width: 200px;
height: 200px;
background: hotpink;
overflow: auto;
}
li{
height: 100px;
}
</style>
</head>
<body>
<div id="root">
<!--阻止默认事件。默认点击后提示信息，然后跳转百度首页，现在只提示信息不跳转-->
<a href="https://www.baidu.com" rel="external nofollow" rel="external nofollow" @click.prevent="showInfo">点我提示信息</a>
<!--阻止事件冒泡，本来点击按钮后会提示信息，事件冒泡到div上，还会再弹信息，现在只会弹一次-->
<div class="demo1" @click="showInfo">
<button @click.stop="showInfo">点我提示信息</button>
</div>
<!--事件只触发一次，本来每次点都提示信息，现在只提示一次，再点击就不提示了-->
<button @click.once="showInfo">点我提示信息</button>
<!--使用事件的捕获模式，本来点击div2，控制台会输出div2，然后输出div1。因为从div2冒泡到了div1 -->
<!--事件是先捕获再冒泡-->
<!--在div1增加了.capture那么div1的事件在捕获阶段就开始了，所以控制台会先输出div1再div2-->
<div class="div1" @click.capture="showMsg('div1')">
div1
<div class="div2" @click="showMsg('div2')">
div2
</div>
</div>
<!--只有 event.target 是当前操作的元素时才触发事件-->
<!--本来会提示两遍信息，如果在方法中输出event.target，那么会输出两遍button-->
<!--现在给div1增加了.self,当点击按钮时，click事件冒泡到div1后，触发div1的click-->
<!--但是click的event.target是button，而不是div1，所以这次冒泡后的click不执行-->
<div class="demo1" @click.self="showInfo">
<button @click="showInfo">点我提示信息</button>
</div>
<!--事件的默认行为立即执行，无需等待事件回调执行完毕-->
<!--scroll是页面滚动条滚动会触发的事件，而wheel是鼠标滚轮滚动会触发的事件-->
<!--一旦滚动条到底部后，滑动鼠标滚轮继续滚动，wheel就会一直触发，而scroll不会触发-->
<!--@wheel 当滚轮滚动后，执行demo，执行完demo，页面上的滚动条才向下滚动-->
<!--@wheel 增加.passive后，当滚轮滚动后，滚轮会先执行，不用等待执行完demo-->
<ul @wheel.passive="demo" class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:'#root',
methods:{
showInfo(e){
alert('你好')
//console.log(e.target);
},
showMsg(res){
console.log(res);
},
demo(){
for (let i=0;i<100000;i++){
console.log("#");
}
console.log("累~~！！");
}
}
})
</script>
</body>
</html>
三、键盘事件
给 input 绑定一个 keyup 事件，输入文字按下回车，打印输入内容，可以这样写：
<input type="text" placeholder="按下回车提示输入" @keyup="showInfo">
new Vue({
el:'#root',
methods:{
showInfo(e){
//判断是否回车
if(e.keyCode !== 13) return
console.log(e.target.value);
}
}
})
但我们也可以使用回车键的别名：
<input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
new Vue({
el:'#root',
methods:{
showInfo(e){
console.log(e.target.value);
}
}
})
1、Vue中常用的按键别名 回车 =>enter 删除=>delete(捕获"删除”和“退格”键) 退出=>esc 空格=>space 换行=> tab（特殊，必须配合 keydown 去使用） 上=> up 下=>down 左=>left 右=>right
2、Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为 kebab-case（短横线命名)
我们可以通过输出 e.key 和 e.keyCode 来查看按键原始值
showInfo(e){
console.log(e.key,e.keyCode);
}
所以回车键也可以这样写 @keyup.Enter="showInfo" 需要注意的是切换大小写的 CapsLock 需要这样写 @keyup.caps-lock="showInfo"
3、系统修饰键(用法特殊）：ctrl、alt、 shift、meta(win)
(1).配合 keyup 使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发(2).配合keydown使用：正常触发事件
例如我们需要按下 ctrl 时执行 showInfo 方法
<input type="text" placeholder="按下回车提示输入" @keyup.ctrl="showInfo">
运行程序，单纯按 ctrl 是不管用的，只有 ctrl 和其他按键一起按下，例如 ctrl+z 然后再放开 z ，showInfo 方法才能执行
4、也可以使用keyCode去指定具体的按键（不推荐)
绑定回车按键
<input type="text" placeholder="按下回车提示输入" @keyup.13="showInfo">
5.Vue.config.keyCodes.自定义键名=键码,可以去定制按键别名（不推荐）
<input type="text" placeholder="按下回车提示输入" @keyup.huiche="showInfo"> Vue.config.keyCodes.huiche = 13
使用技巧
1、事件修饰符可以写多个
<div class="demo1" @click="showInfo"> <a href="https://www.baidu.com" rel="external nofollow" rel="external nofollow" @click.stop.prevent="showInfo">点我提示信息</a> </div>
运行结果是只会提示 1 次信息，不会跳转
2、之前说了系统修饰符配合 keyup 使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。如果就是需要两个按键同时触发事件可以这样写： 例如，需要同时按下 ctrl+y 才执行 showInfo
<input type="text" placeholder="按下回车提示输入" @keyup.ctrl.y="showInfo">
到此这篇关于Vue中的事件处理详情的文章就介绍到这了,更多相关Vue事件处理内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
Vue.js前端框架之事件处理小结
1. v-on 事件监听 监听DOM事件使用 v-on 指令.该指令通常在模板中直接使用,在触发事件时会执行一些 JavaScript 代码. v-on 指令的基本用法 (1)在 HTML 中使用 v-on 指令,后面可以是所有的原生事件名称.基本用法如下: <button v-on:click="show">显示</button> 将 click 单击事件绑定到 show 方法中,单击"显示"按钮时,执行 show() 方法,show()
-
vue中引入mousewheel事件及兼容性处理方式
目录 引入mousewheel事件及兼容性处理 滚动条设置的要点在于 关于scroll和mousewheel事件的问题 需要注意的点 实验开始 引入mousewheel事件及兼容性处理 项目实现过程中需要对一个已经有纵向滚动条的table表格增加鼠标滚轮(mousewheel)事件,方便查看数据:其实现原理与我上一篇博客中的拖动事件类似,利用模拟出来的同一个滚动条来实现 滚动条设置的要点在于 1.滚动条与滚动槽的高度比例 应该等于 内容区(动态变化)和可视区的高度比例:滚动槽与可视区平齐,高度一
-
Vue3 之 Vue 事件处理指南
目录 一.基本事件处理 二.向父组件发出自定义事件 三.鼠标修饰符 四.键盘修饰符 五.系统修饰符 六.事件修饰符 一.基本事件处理 使用v-on指令(简称@),我们可以监听DOM事件并运行处理程序方法或内联Javascript. // v-on 指令 <div v-on:click='handleClick' /> // OR <div @click='handleClick' /> 二.向父组件发出自定义事件 任何Web框架中的常见用例都是希望子组件能够向其父组件发出事件,这也
-
详解Vue之事件处理
在Vue进行前端开发中,事件监听是必不可少的功能,本文通过简单的小例子,简述v-on的简单用法,仅供学习分享使用,如有不足之处,还请指正. 监听事件 可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码.如下所示: <button v-on:click="counter += 1">Add 1</button> <p>按钮被点击了 {{ counter }} 次.</p> 其中counter为Vue自定
-
Vue事件处理原理及过程详解
Vue事件监听的方式貌似违背了关注点分离(separation of concern)的传统理念.实际上,所有的Vue.js事件处理方法和表达式都严格绑定在当前视图的ViewModel上,它不会导致维护上的困难,使用v-on有以下好处: 1.扫一眼HTML模板便能轻松定位在JS代码里对应的方法. 2.无须在JS里手动绑定事件,ViewModel代码可以是非常纯粹的逻辑,和DOM完全解耦,更易于测试. 3.当一个ViewModel被销毁时,所有的事件处理器都会自动被删除,无须担心自己如何清理它们.
-
Vue之事件处理和事件修饰符详解
<div id="root"> <h2>{{name}},加油!</h2> <!-- 阻止默认事件 --> <a @click.prevent="showInfo" href="https:www.baidu.com">点我提示信息</a> <!-- 阻止事件冒泡 --> <div class="demo1" @click="s
-
Vue的click事件防抖和节流处理详解
函数防抖 定义:多次触发事件后,事件处理函数只执行一次,并且是在触发操作结束时执行. 在vue中对click添加防抖处理 const on = Vue.prototype.$on // 防抖处理 Vue.prototype.$on = function (event, func) { let timer let newFunc = func if (event === 'click') { newFunc = function () { clearTimeout(timer) timer = s
-
Vue中的事件处理详情
目录 一.事件处理 二.事件修饰符 三.键盘事件 使用技巧 一.事件处理 给按钮绑定一个 click 事件,点击弹出提示信息 <!--普通写法--> <button v-on:click="showInfo">点我</button> <!--简写--> <button @click="showInfo">点我</button> new Vue({ el:'#root', methods:{ sh
-
vue 中使用 bimface详情
目录 1. 安装 vue 脚手架 2. 创建项目 3. 引入 bimface 文件 3.1 运行项目 3.2 引入 bimface 文件 4. 实现页面渲染 4.1 修改 html 4.2 修改 CSS 4.3 修改 JS 整个过程分为如下几个步骤: 1.安装 vue 脚手架 2.创建项目 3.引入 bimface 响应的文件 4.修改 App.vue 文件,实现页面渲染 1. 安装 vue 脚手架 这里还是使用 Vue CLI 通过如下命令,全局安装 vue 脚手架工具 npm install
-
Vue中使用js-cookie详情
目录 一.安装js-cookie 二.使用 1.局部使用 2.全局使用 一.安装js-cookie cnpm i -S js-cookie 二.使用 1.局部使用 import Cookies from "js-cookie"; 示例: <template> <div> <p>当前token: {{token}}</p> <el-button @click="getToken()&quo
-
vue 中使用 bimface详情
目录 1. 安装 vue 脚手架 2. 创建项目 3.1 运行项目 3.2 引入 bimface 文件 4. 实现页面渲染 4.1 修改 html 4.2 修改 CSS 4.3 修改 JS 整个过程分为如下几个步骤: 1.安装 vue 脚手架 2.创建项目 3.引入 bimface 响应的文件 4.修改 App.vue 文件,实现页面渲染 1. 安装 vue 脚手架 这里还是使用 Vue CLI 通过如下命令,全局安装 vue 脚手架工具 npm install -g @vue/cli 安装好之
-
vue中进入详情页记住滚动位置的方法(keep-alive)
> 有时业务提出这样一个需求 就是从商品页面进入到列表详情页 要保存当前滚动的位置,这里我就想到了keep-alive 1.首先在路由中引入需要的模块 { path: '/scrollDemo', name: 'scrollDemo', meta: { keepAlive: true // 需要缓存 }, component: resolve => { require(['../view/scrollDemo.vue'], resolve) } } 2.在App.vue中设置缓存组件 <
-
vue activated在子组件中的使用详情
页面:base: <template> <div class="tab-container"> <h1 style="text-align: center"> 申请{{ form.category }}{{ form.companyType }}入驻 </h1> <div class="form-panel" style="margin-left: 20px;text-align:
-
Vue中使用 class 类样式的方法详情
在vue中为我们提供了 几种方式来使用class类的样式 1. 布尔值 我们先正常在 style 标签中 书写一个类名为 active的样式 <style> .active{ color: red; font-size: 20px; font-style: normal; } </style> 在我们的 script 标签中创建一个 vm 实例,在实例的 data 数据中心写上 isActive:true , true 表示使用此样式,false 则表示不使用 <script
-
Vue中的 watch监听属性详情
目录 一.watch监听一般数据的变化(数值,字符串,布尔值) 1.数值 2.字符串 3.布尔值 二.watch 监听 复杂类型数据的变化 1.对象 2.数组 3.对象数组 4.对象数组的属性 首先要确认 watch是一个对象,要当成对象来使用. 键:就是那个,你要监听的那个家伙: 值:可以是函数,当你监控的家伙发生变化时,需要执行的函数,这个函数有两个形参 第一个是当前值(新的值),第二个是更新前的值(旧值) 值也可以是函数名:不过这个函数名要用单引号来包裹. 值是包括选项的对象:选项包括有三
-
vue中Promise的使用方法详情
目录 一.使用 1.promise是一种异步解决方案 2.asyncawait 简介: promise是什么,它可以说是异步编程的一种解决方法,就拿传统的ajax发请求来说,单个还好,如果是一个请求回来的数据还要被其他请求调用,不断地嵌套,可想而知,代码看起来是很乱的,promise主要是为了解决这种情景而出现的. 一.使用 1.promise是一种异步解决方案 由于ajax异步方式请求数据时,我们不能知道数据具体回来的事件,所以过去只能将一个callback函数传递给ajax封装的方法,当aj
-
vue中动态修改animation效果无效问题详情
目录 问题描述 问题原因 解决办法 1.将 keyframes 下的内容放到 scoped 的外边 2.去掉scoped 问题描述 鼠标移入移出,并没有出现闪动: <template> <div class="alarmIcon" ref="alarmIcon" @mouseenter="handleEnter" @mouseleave="handleLeave" ></div> </