-
2022-05-08 12:45:35
1. @click() / @dblclick()
单击事件 / 双击事件
2. @mousedown() / @mouseup()
按下触发 / 抬起触发
3. @mousemove()
当鼠标指针在
指定的元素中移动时
,就会发生 mousemove 事件
移动一个像素,就会发生一次 mousemove4. @mouseleave()
当鼠标指针离开被选元素时,会发生 mouseleave 事件
5. @mouseout()
当鼠标指针从元素上移开时,发生 mouseout 事件;
与 mouseleave 事件不同,不论鼠标指针离开
被选元素还是任何子元素,
都会触发 mouseout 事件。6. @mouseenter()
当鼠标指针进入
被选元素时,
会发生 mouseenter 事件7. @mouseover()
当鼠标指针位于元素上方时,会发生 mouseover 事件。
注意:与 mouseenter 事件不同,mouseover 事件在鼠标指针进入
被选元素或任意子元素时
都会被触发,mouseenter 事件只有在鼠标指针进入被选元素
时被触发。更多相关内容 -
Vue中的事件
2022-03-06 19:30:21使用v-on:xxx 或 @xxx绑定事件 其中xxx是事件名一、 事件的基本使用
1.使用v-on:xxx 或 @xxx绑定事件 其中xxx是事件名
2.事件的回调需要配置在methods对象中 最终会在VM上
3.methods中配置的函数,不需要箭头函数 否则this就不是VM了
4.methods中配置的函数 都是被vue所管理的函数 this的指向是VM 或组件实例对象
5.@click="demo" 和 @click="demo($even,number)"效果是一样的 但是后者可以传参
二、 vue中的事件修饰符
1.prevent:阻止默认事件
2.stop:阻止事件冒泡
3.once:事件只触发一次
4.capture:使用事件的捕获模式
5.self:只有event.target是当前操作的元素时才触发事件
6.passive:事件的默认行为立即执行 无需等待事件回调执行完毕
<div id="root"> <h2>欢迎来到{{name}}学习</h2> <!-- prevent:阻止默认事件 --> <!-- 阻止链接跳转 --> <a href="https://www.bilibili.com/video/BV1Zy4y1K7SH?p=15" @click.prevent="showInfo">点我提示信息</a> <!-- stop:阻止事件冒泡 --> <div @click="showInfo" class="demo1"> <button @click.stop="showInfo">点我提示信息</button> <!--修饰符可以连续写 即阻止冒泡 又阻止跳转 --> <a href="https://www.bilibili.com/video/BV1Zy4y1K7SH?p=15" @click.stop.prevent="showInfo">点我提示信息</a> </div> <!-- once:事件只触发一次 --> <button @click.once="showInfo">点我提示信息</button> <!-- capture:使用事件的捕获模式 --> <div class="box1" @click.capture="showMsg(1)"> div1 <div class="box2" @click="showMsg(2)"> div2 </div> </div> <!-- self:只有event.target是当前操作的元素时才触发事件 --> <div @click.self="showInfo" class="demo1"> <button @click="showInfo">点我提示信息</button> </div> <!-- passive:事件的默认行为立即执行 无需等待事件回调执行完毕 --> <!-- @scroll="demo" 滚动条的滚动 @wheel="demo"鼠标滚轮的滚动--> <ul class="list" @wheel.passive="demo"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div>
三、vue中常用的按键别名
回车 enter
删除 delete
退出 esc
空格 space
换行 tab(特殊 必须配合keydown使用)
上 up
下 down
左 left
右 right
1.vue中未提供别名的按键 可以使用按键原始的key值去绑定 但注意要转为kebab-case(短横线命名)
2.系统修饰键(用法特殊) ctrl alt shift meta
配合keyup使用:按下修饰键(win)的同时,再按下其他键 随后释放其他键 事件才被触发
配合keydown使用:正常触发
也可以使用keyCode去指定具体的按键(不推荐)
Vue.config.keyCode.自定义键名 = 键码 可以去定制键码
<div id="root"> <h2>欢迎来到{{name}}学习</h2> <input type="text" name="" id="" placeholder="按下回车提示输入" @keyup.enter="showInfo"> </div>
-
vue中组件的自定义事件(详)
2021-10-29 16:49:16我们在vue中用的click、keyup……等事件,这些属于内置事件,也就是js自带的事件。 问题一:什么是组件自定义事件呢? 自定义事件,顾名思义就是自己打造的事件,包含事件名,事件回调等,定义好之后去给组件使用...今天这篇文章,让你彻底学会组件自定义事件……
我们在vue中用的click、keyup……等事件,这些属于内置事件,也就是js自带的事件。
问题一:什么是组件自定义事件呢?
【内置事件】是给html元素用的,比如span、div等标签,不是组件。
【自定义事件】 顾名思义就是自己打造的事件,包含事件名,事件回调等,定义好之后去给组件使用。也是一种组件间的通信方式,适用于子组件==>父组件。这里我们通过传值去讲述自定义事件如何使用。
问题二:如何实现子组件给父组件传值?
(1)复习一下props传值
通过props也可以实现,我们先复习一下props传值,稍后说明自定义事件传值
先定义父子组件,school是父组件,student是子组件
父组件中呢,引入子组件
这是我们定义好的父子组件
props传值呢。父组件需要提前给子组件一个函数,子组件用props声明接收那个函数
(i)找到父组件,先定义一个接收子组件数据的函数,并存入我们的变量中
注意:还记得之前讲的props使用的属性吗,使用冒号来区别传入的是双引号里面的内容还是字符串,这里我们传的是一个函数,因此需要用冒号去识别函数名
具体写法对应是:
<Student : 子组件发送数据时调用的方法名=" 父组件接收数据的方法名 "></Student>
(ii)父组件回应完子组件之后,就需要子组件来传递数据了。
找到子组件之后,首先需要用props接收父组件递给的函数。然后给按钮添加点击事件,来触发父组件的函数,并传入你要传递的数据参数。
(iii)可以看到,这样就成功了,父组件收到子组件传来的学生姓名:张三。
总结:props父组件给子组件传递的过程就是:
子组件通过调用父组件传递进来的接收数据的方法,来实现数据传递。
(2)组件自定义事件实现父子传值
组件自定义事件需要用到v-on,也就是v-on在谁身上,就是在谁的组件实例上绑定了事件。
(i)同样,我们在父组件中给子组件绑定一个自定义事件
那绑定的myself事件如何触发呢?
答:在谁身上定义的就找谁触发,我们需要找子组件触发
此时子组件就可以注释掉props接收的对象,然后通过$emit去触发。
emit本身翻译就是发出等意思。
再传入参数。不传参数就是单纯的触发父组件对应的函数。
父组件接收参数
看下效果:同样可以实现。
补充:
想传入多个参数,怎么办?
有的人说在第一个参数后面接着传不就行了。哈哈,这样是可以,就是如果你想传很多,父组件接收的时候比较麻烦
那怎么办?
假如子组件传了3个参数。
父组件可以利用es6的三个点(扩展运算符)语法进行接收,
可以看到,用了扩展运算符的params,就可以接收所有参数。
问题三:有的人说我没有见过v-on呀,都是@。
是的,v-on的简写形式就是@
直接这样写就ok。
问题四:还有第三种方法实现子传父。
那就是ref。很熟悉吧。ref相当于一个组件的标识,可以直接拿到该组件的实例对象。
先加上一个ref属性,此时我们就可以通过this.$refs.student去找到这个组件
怎么通过ref去绑定自定义事件呢?
通过$on,稍微有点麻烦,需要传入自定义事件名,以及调用的函数。好处是:虽然麻烦但灵活性强。
比如我们想3秒之后再调用这个事件
我们可以直接添加一个定时器
问题五:只想触发一次函数,怎么办?
(1)第一种ref形式,将$on 改为$once
(2)第二种 自定义事件的,添加once修饰符
此时按钮只能点击一次就不能点击了。
问题六:能自定义绑定事件,能解绑吗?
答:能
有的人说那我不用this.$emit触发不就行了,但是你不解绑,你绑定的这个事件,会一直存在你绑定的组件身上。所以还是解绑最好。(给谁绑定的就找谁解绑)
【解绑单个事件】
在子组件中定义一个解绑按钮
解绑单个事件。
=
解绑前,父组件都能收到子组件传来的参数,解绑后再点击参数已经传不过去了。
【解绑多个绑定事件】
定义2个自定义事件,一个传年龄一个传姓名。
解绑多个事件就用中括号括起来。
【全部解绑】
总结:
组件的自定义事件:
1、是一种组件间通信的方式,适用于子组件==>父组件
2.、使用场景:A是父组件,B是子组件,B想给A传递数据,那么就要在A中给B绑定自定义事件(事件的回调在A中)
3、绑定自定义事件:
(1)第一种:在父组件中:
<Student @myself="myDefine"/> 或 <Student v-on:myself="myDefine"/>
(2)第二种:在父组件中:
<Student ref="student"></Student> ..... mounted() { this.$refs.student.$on('mySelf', this.myDefine) },
(3)想让自定义事件只触发一次,就用once修饰符或$once方法
4、触发自定义事件:this.$emit("myDefine",传入的数据)
5、解绑自定义事件:this.$off("myDefine")
6、组件上也可以绑定原生DOM事件,需要使用native修饰符
7、注意:通过this.$refs.xxx.$on("myDefine",回调)绑定自定义事件时,回调要么配置在methods中,要么用箭头函数,否则this指向会出现问题!
-
Vue中 事件总线(eventBus)详解及使用
2022-03-05 15:48:28Vue 组件中常见的有:父子组件通信、兄弟组件通信。而父子组件通信就很简单,父组件会通过 props 向下传数据给子组件,当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。 今天就来说说,如果两个页面没有...传送门:Vue中 子组件向父组件传值 及 .sync 修饰符 详解
传送门:Vue状态管理器(vuex)详解及应用场景
传送门:Vue中 $ attrs、$ listeners 详解及使用
传送门:Vue中 provide、inject 详解及使用Vue中 常见的组件通信方式可分为三类
- 父子通信
父向子传递数据是通过 props,子向父是通过 events($emit); 通过父链 / 子链也可以通信($parent / $children); ref 也可以访问组件实例; provide / inject; $attrs/$listeners;
- 兄弟通信
Bus; Vuex;
- 跨级通信
Bus; Vuex; provide / inject、 $attrs / $listeners、
1. 简介
Vue 组件中常见的有:父子组件通信、兄弟组件通信。而父子组件通信就很简单,父组件会通过 props 向下传数据给子组件,当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。
今天就来说说,如果两个页面没有任何引入和被引入关系,该如何通信呢?
如果应用程序不需要类似 Vuex 这样的库来处理组件之间的数据通信,就可以考虑 Vue 中的事件总线 ,即 eventBus 来通信。eventBus 又称为事件总线。在 Vue 中可使用 eventBus 来作为沟通桥梁的概念,就像是所有组件共用相同的事件中心,可向该中心注册发送事件或接收事件,所以组件都可以上下平行地通知其他组件。但也就是太方便所以若使用不慎,就会造成难以维护的“灾难”,因此才需要更完善的 Vuex 作为状态管理中心,将通知的概念上升到共享状态层次。
2. 使用
可以声明一个全局变量来使用事件中心,但如果在使用 webpack 之类的模块系统,这显然不合适。
每次使用都手动 import 进来也很不方便,所以本文使用 vue-bus 插件。
vue-bus npm地址
vue-bus github地址安装及引入
npm install vue-bus --save
如果在一个模块化工程中使用它,必须要通过 Vue.use() 明确地安装 vue-bus:
// main.js import Vue from 'vue'; import VueBus from 'vue-bus'; Vue.use(VueBus);
在组件中使用
假设有两个Vue组件需要通信 ,在 A 组件的按钮上面绑定了点击事件发送一则消息,想通知 B 组件。
// A 组件 <template> <div class="wrap"> <button @click="sendMsg">触发</button> </div> </template> <script> export default { data(){ return { Amsg:'我是来自A组件的信息', } }, methods:{ sendMsg(){ this.$bus.emit('changeMsg', this.Amsg ); this.$bus.emit('doOnce','我只会触发一次'); } }, } </script>
// B 组件 <template> <div> <h3>{{Bmsg}}</h3> </div> </template> <script> export default { data(){ return { Bmsg:'我是B组件', } }, methods:{ getMsg(msg){ this.Bmsg = msg; console.log(msg); } }, created(){ /* * 接收事件 * 这种写法也体现了:A 组件调用 B 组件中的方法。如果只是传递数据,可参考如下简化写法: * this.$bus.on('changeMsg', (msg) => { this.Bmsg = msg }); */ this.$bus.on('changeMsg', this.getMsg); // 此侦听器只会触发一次 this.$bus.once('doOnce', (txt) => { console.log(txt) }); }, // 组件销毁时,移除EventBus事件监听 beforeDestroy() { this.$bus.off('changeMsg', this.getMsg); }, } </script>
当我们点击5次触发按钮时,效果如下:
总结
eventBus 适合小项目、数据被更少组件使用的项目,对于中大型项目数据在很多组件之间使用的情况 eventBus 就不太适用了。eventBus 其实就是一个发布订阅模式,利用 Vue 的自定义事件机制,在触发的地方通过 $emit 向外发布一个事件,在需要监听的页面,通过 $on 监听事件。
-
vue 中的各种事件
2019-07-10 11:50:00new Vue({ el:'#id', data(){ //数据对象 return { demo: { name: '' }, user:'', }; }, mounted: function () { //页面加载完成后执行的方法 }, methods: { //盒子中所有方法 ... -
Vue键盘事件
2021-10-02 11:34:49vue中常见的按键别名 回车 enter 删除 delete 退出 esc 空格 space 换行 tab(特殊,必须用keydown) 上 up ⬆️ 下 down ⬇️ 左 left ⬅️ 右 right ➡️ enter键盘事件示例: <body> <!-- 准备一个... -
vue中事件绑定加括号和不加括号的区别
2021-07-02 10:53:54vue中事件绑定加括号和不加括号的区别 @click=“fun” 不带括号、不写实参的fun默认传event (事件对象) @click=“fun(value)” 只要加括号,无论是否传值,都属于传实参给函数,event (事件对象)就接收不到。 如果... -
vue——事件绑定
2021-08-22 10:06:01Vue中的事件处理方法: 一、事件绑定基础语法有两种写法: 1、直接写函数名,@click="handleClick"; 2、加$event,@click="handleClicks($event,参数)"参数可选, $event是内置事件对象 ; 好处:不但可以传事件对象,还... -
vue中鼠标事件
2020-06-08 08:43:45vue中鼠标事件 @click//单击 @mousedown//按下 @mouseup//抬起 @dblclick//双击 @mousemove//移动 @mouseleave//离开 @mouseout //移出 @mouseenter//进入 @mouseover//在 -
Vue中鼠标移入移出事件-解析
2021-09-09 11:15:19鼠标在li上移动也会触发移出事件 两组鼠标事件 mouseover 和 mouseout mouseenter 和 mouseleave mouseover 和 mouseout 什么时候使用说明 根据鼠标事件的target进行触发,是一种精确触发。 当为某一组件... -
Vue处理事件冒泡
2021-12-22 16:51:34初学vue -
Vue自定义事件
2019-06-25 20:26:57这时,Vue的自定义事件就派上用场了。 1、自定义事件 每个Vue创建的实例都会出现一个事件接口 var vm = new Vue({ el: '#app' }) 自定义事件的定义(发布) //vm.$on(自定义事件的名称,自定义事件的事件处理... -
vue中事件传入事件参数e
2019-11-20 23:12:09v-on:click="nowpoint($event)" 要加$符 -
vue 方法与事件
2021-01-30 13:36:05@click的表达式可以直接使用javascript语句,也可以是一个在Vue实例中methods选项内的函数名。点击次数:{{ counter }}+ 1+ 10var app = new Vue({el:'#app',data: {counter: 0},methods: {handleAdd: fun... -
vue中input输入框常用事件的使用
2021-12-14 13:35:40文章目录@input(或者是v-on:input)@blur(失焦)@focus(聚焦)@change(改变)@click (点击)@dblclick(双击)@keydown(当键盘按下)...输入框在输入完成、移到其他地方时进行验证时,需要用到该事件,用此事件进 -
vue3.0事件总线
2021-03-01 09:30:12Vue3.x以后从实例中移除了 on,on,on,off 和 once方法,once 方法,once方法,emit ...然后在程序中使用事件总线: main.js配置 import { createApp } from 'vue'; import App from './App.vue'; import router from -
vue传事件参数
2020-12-20 04:49:34在vue中传递事件参数还是比较常见的。当然这种情况基本上是在html中标签中如何写这个问题上大家存在疑问。那么这里我就分别举例说下。1,标签中没有写括号的情况下这种情况下我们如何获取事件参数呢?那么我们的... -
vue中enter回车键事件
2021-01-16 13:46:50vue中失去焦点事件写法:@blur vue中enter回车键事件写法:@keyup.enter.native <el-input v-model="searchName" @keyup.enter.native="toSearch()" placeholder="请输入搜索的名称"></el-input> to -
Vue双击点击事件
2022-02-09 14:57:09vue双击事件 -
vue移除事件
2020-07-07 10:13:34在vue中没有提供移除事件的方法。一般我们都是用v-if写两个标签来判断,现在我们只需添加一个标记位来解决 <div @click="flag && clickEvent()"></div > 这样就相对于v-if简单了很多 -
vue回车事件
2020-05-08 15:47:50vue 回车事件 需求 : 给 elementUI 的 input 框添加回车事件 , 使 input 框中输入后直接按键盘回车就能完成查询功能. 基础样式和基础代码 : 错误写法: <el-form-item label="关键字搜索" prop="searchKey"> ... -
Vue中的事件冒泡和捕获
2020-09-18 10:39:45Vue中的事件冒泡和捕获 stop 阻止冒泡事件 .capture 设置捕获事件 .self 只有点击当前元素的时候,才会触发处理函数 .once处理函数只被触发一次 1.当一个父元素div1 包裹着一个子元素div2 同时有点击事件, 我们... -
Vue 中的事件处理机制详解
2019-09-04 23:00:34vue事件分为两类,一个是原生dom事件,一个是组件自定义事件,绑定方法类似, #绑定原生dom事件 <div id="example-1"> <button v-on:click="handle">Add 1</button> <p>The button above ... -
vue的鼠标事件
2020-07-10 14:56:51一、悬浮事件: mouseenter :进入 mouseover:在 mousemove:移动 mouseout:移出 mouseleave:离开 ;height: 100px;background: #42B983;" @mouseenter="enter" @mouseover="over" @mousemove="move" ... -
vue 中 input事件
2019-07-02 14:15:31vue 中 input事件 input事件的使用 <div :id="inputId" :class="['textarea_content_right']" :contenteditable="true" @input="changeText($event)" v-text= "currentValue" ></div> data() { ... -
vue 拖拽事件
2019-04-26 11:47:03// darg.vue <style> #app{ position: relative; /*定位*/ top: 10px; left: 10px; width: 200px; height: 200px; background: #666; /*设置一下背景... -
在Vue中触发单击事件
2020-09-10 22:21:13<!DOCTYPE html> <html> <head> ...meta charset="utf-8">...script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> ... -
vue click点击事件传入事件对象、自定义参数
2021-12-21 21:26:45不传参数,不接收参数 <div id="app"> <button v-on:click="fun">Say hi</button> </div>... new Vue({ el: '#app', methods: { fun: function () { console.log(event) } -
Vue双击事件
2019-05-13 10:05:16Vue双击事件 dblclick <div id="payState" @click="shishiClick"></div> 应该是 <div id="payState" @dblclick="shishiClick"></div> -
vue中阻止事件冒泡
2019-07-08 18:31:44这是因为事件冒泡,因此我们需要阻止事件冒泡,在vue中,vue.js提供了一个方法。 @click.stop 使用方式: <div @click="father"> <img src="xxxx.jpg" /> <button @click.stop="son">...