精华内容
下载资源
问答
  • 2022-05-08 12:45:35

    1. @click() / @dblclick()

    单击事件 / 双击事件

    2. @mousedown() / @mouseup()

    按下触发 / 抬起触发

    3. @mousemove()

    当鼠标指针在指定的元素中移动时,就会发生 mousemove 事件
    移动一个像素,就会发生一次 mousemove

    4. @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 组件常见的:父子组件通信、兄弟组件通信。而父子组件通信就很简单,父组件会通过 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:00
    new Vue({ el:'#id', data(){ //数据对象 return { demo: { name: '' }, user:'', }; }, mounted: function () { //页面加载完成后执行的方法 }, methods: { //盒子所有方法 ...
  • Vue键盘事件

    千次阅读 2021-10-02 11:34:49
    vue中常见的按键别名 回车 enter 删除 delete 退出 esc 空格 space 换行 tab(特殊,必须用keydown) 上 up ⬆️ 下 down ⬇️ 左 left ⬅️ 右 right ➡️ enter键盘事件示例: <body> <!-- 准备一个...
  • vue中事件绑定加括号和不加括号的区别 @click=“fun” 不带括号、不写实参的fun默认传event (事件对象) @click=“fun(value)” 只要加括号,无论是否传值,都属于传实参给函数,event (事件对象)就接收不到。 如果...
  • vue——事件绑定

    千次阅读 2021-08-22 10:06:01
    Vue中事件处理方法: 一、事件绑定基础语法两种写法: 1、直接写函数名,@click="handleClick"; 2、加$event,@click="handleClicks($event,参数)"参数可选, $event是内置事件对象 ; 好处:不但可以传事件对象,还...
  • vue中鼠标事件

    千次阅读 2020-06-08 08:43:45
    vue中鼠标事件 @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:09
    v-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:12
    Vue3.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:50
    vue中失去焦点事件写法:@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:09
    vue双击事件
  • vue移除事件

    千次阅读 2020-07-07 10:13:34
    vue中没有提供移除事件的方法。一般我们都是用v-if写两个标签来判断,现在我们只需添加一个标记位来解决 <div @click="flag && clickEvent()"></div > 这样就相对于v-if简单了很多
  • vue回车事件

    万次阅读 多人点赞 2020-05-08 15:47:50
    vue 回车事件 需求 : 给 elementUI 的 input 框添加回车事件 , 使 input 框输入后直接按键盘回车就能完成查询功能. 基础样式和基础代码 : 错误写法: <el-form-item label="关键字搜索" prop="searchKey"> ...
  • Vue中事件冒泡和捕获

    千次阅读 2020-09-18 10:39:45
    Vue中事件冒泡和捕获 stop 阻止冒泡事件 .capture 设置捕获事件 .self 只有点击当前元素的时候,才会触发处理函数 .once处理函数只被触发一次 1.当一个父元素div1 包裹着一个子元素div2 同时点击事件, 我们...
  • Vue 事件处理机制详解

    千次阅读 2019-09-04 23:00:34
    vue事件分为两类,一个是原生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:31
    vue 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> ...
  • 不传参数,不接收参数 <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:16
    Vue双击事件 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">...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 213,718
精华内容 85,487
关键字:

vue中的事件有哪些