精华内容
下载资源
问答
  • vue中点击事件的防抖和节流操作 防抖(debounce) 防抖:就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间 /** * @desc 函数防抖 * @param func 函数 * @param ...

    vue中点击事件的防抖和节流

    防抖(debounce)
    防抖:就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间

    /**
     * 函数防抖
     * @param fn 函数
     * @param delay 延迟执行毫秒数
     * @param immediate true 表立即执行,false 表非立即执行
     */
    export function _debounce(fn,delay,immediate){
      var delay = delay||200;
      var timer;
      return function(){
        var th = this;
        var args = arguments;
        if (timer) {
          clearTimeout(timer);
        }
        if(immediate){
          var callNow = !timer
          timer = setTimeout(()=>{
            timer = null;
          },delay)
          if (callNow) fn.apply(th, args)
        }else {
          timer = setTimeout(function(){
            timer = null;
            fn.apply(th,args);
          },delay)
        }
      }
    }
    
    

    节流(throttle)
    节流,就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率

    //节流
    // 函数节流
    // param fn 函数
    // param interval 延迟执行毫秒数
    // param type 1 表时间戳版,2 表定时器版
    //时间戳和定时器区别:时间戳版本的函数触发是在时间段内开始的时候,而定时器版的函数触发是在时间段内结束的时候
    
    export function _throttle(fn,interval,type) {
      if(type === 1){
        let previous = 0;
      }else if(type === 2){
        let timeout;
      }
      var interval = interval || 200;
      return function () {
        var th = this;
        var args = arguments;
        if(type === 1){
          let now = Date.now();
          if (now - previous > interval){
            fn.apply(th,args);
            previous = now;
          }
        }else if(type === 2){
          if(!timeout){
            timeout = setTimeout(()=> {
              timeout = null;
              fn.apply(th,args)
            }, interval);
          }
        }
      }
    }
    
    

    在组件中使用:

    import { _debounce,_throttle} from "@/common/util/debounce.js";
    
    methods:{
       needDebounce:_debounce(()=>{
       //需要防抖或者节流的函数
       },delay)
    }
    
    

    参考:https://www.jianshu.com/p/c8b86b09daf0

    展开全文
  • vue中事件绑定加括号和不加括号的区别 @click=“fun” 不带括号、不写实参的fun默认传event (事件对象) @click=“fun(value)” 只要加括号,无论是否传值,都属于传实参给函数,event (事件对象)就接收不到。 如果...

    vue中事件绑定加括号和不加括号的区别

    @click=“fun”
    不带括号、不写实参的fun默认传event (事件对象)

    @click=“fun(value)”
    只要加括号,无论是否传值,都属于传实参给函数,event (事件对象)就接收不到。
    如果需要实参、又需要event (事件对象),就需要手动传入 event (事件对象),如下:
    @click=“fun($event, value)”

    注:
    Vue中的@click和React中的onClick实现原理是不一样的,React onClick必须接收一个函数体,如果加括号绑定,就会将方法执行后的返回值,赋给onClick,因此React onClick不能加括号。
    Vue绑定事件是通过 自定义的 $on 方法来实现的;
    举例:
    带括号的话 生成的代码是:

     on: {
           "click": function($event) {
                 fun()
              }
        }
    

    不带括号的话 生成的代码是:

    on: { "click": fun}
    

    参考文献:

    Vue事件绑定原理

    展开全文
  • 模板编译 processAttrs对于ast attributes处理(v-on/@)利用onRE与dirRE来捕获事件这里最重要的就是dynamic的判断,vue中可以用动态参数来命名事件名称,如@[prop],prop为data的值。不过通常都是一个静态的事件...

    模板编译 processAttrs

    对于ast attributes处理(v-on/@)

    利用onRE与dirRE来捕获事件

    这里最重要的就是dynamic的判断,vue中可以用动态参数来命名事件名称,如@[prop],prop为data中的值。不过通常都是一个静态的事件名称如 @click

    另一个核心方法就是addHandler

    addHandler 往AST上添加events属性

    1. 这里会对动态事件名称进行一些处理,也会对right,middle修饰符处理,另外对capture, passive, once的事件名称做了标记。分别添加 !, ~, # 符号。然后删除了对应属性值

    2. 参数value为@click="handler"例子中的handler,在此处还在编译阶段handler本质上是一个string。然后对value做了处理,记录了模板解析event时候start和end的位置。

    3. 对于单个事件有多回调函数绑定的情况,添加了一个important参数,以此来提前触发当前回调函数的执行

    4. 另外,这里对鼠标的right和middle做了处理,在处理只有删除了对应属性值。对于键盘的事件没有做处理

    AST -> code

    修饰符:modifierCode

    上面已经提到过了,本质上模板编译的时候会利用正则处理各种修饰符,然后根据对应关键词的生成代码。如常用的stop,prevent。

    核心方法就是src/compiler/codegen/events.js的genHandler方法,以下是分析:

    1. genHandlers

    该方法就是简单的遍历events对象的键值对然后,对有无native修饰符与是否为dynamic事件做一个处理,其核心方法就是调用genHandler

    genHandler

    一些参数判断

    事件函数的多种写法

    在官方文档中演示了事件回调函数的多种写法,这些写法都在模板编译过程中进行了识别

    下方三个正则表达式是模板编译时对event写法的判断依据,下面会有更详细的注释

    1. 路径类写法

    2. 箭头函数,匿名函数

    3. 表达式 handler($event), a = 1

    在vue中通常通过@click="handle($event)"来获取event对象,其实这里是vue在模板中做了一层包裹,将function($event){}套在handle($event)外部。

    有修饰符的情况

    修饰符在ast生成的过程中就已经捕获了,vue中对event事件的修饰符处理如下

    先对修饰符做一个处理

    最后座一层包裹,因为这里对键盘事件也做了处理,因此一定要拿到event对象

    genCode

    在处理完这些之后会生成字符串on:"…"/nativeOn:"…",最后生成render函数

    组件初始化

    组件初始化简单地说就是先对options做各种处理,最后执行渲染watcher,生成页面。

    对native events的处理:

    platforms/web/runtime/patch.js中有

    const patch = createPatchFunction({nodeOps, modules})

    modules源自:web/runtime/modules/index,导出含生命周期的对象**(非created周期)**

    createPatchFunction

    createPatchFunction往hooks内添加了updateDOMListeners,hooks为**并非是**组件的生命周期函数。在组件create与updated的时候就会触发updateDOMListeners函数。注册事件。

    注意点: 这里create并非是组件created的**周期函数。**是在真实节点创建之后才会触发钩子,因此是可以拿到真实节点的。

    updateDOMListeners

    在调用modules.create的hook的时候触发了updateDOMListeners

    其作用就是给用addEventListeners与removeEventListeners方法给真实dom节点添加事件。

    updateListeners

    将新旧事件进行对比更新。这里的add和remove可以给真实dom注册事件,也可以给组价注册事件。

    占位符$vnode的真实dom事件:createComponent(部分)

    对于组件而言,data.on赋值给listeners,把data.nativeOn赋值给data.on

    data.on里面存放着的都是原生dom事件,组件内部的listeners都是用户自定义的事件。

    因此,在组件patch过程中,创建组件的根节点的时候,就会把data.on内部的原生dom事件注册在dom上。

    因此如果在h5元素使用native如 ,vue就会报错。这正是因为在这里做了处理,只有占位符vnode才可以有data.nativeOn的属性。是h5标签的节点不会调用createComponent方法,其data.on在创建节点的时候会绑定到节点上。

    自定义事件(只针对组件间)

    由createComponent函数可知,listeners存放了自定义事件。

    在父子通讯的时候父组件只要v-on/@eventName,就可以监听到子组件emit出来的事件。

    _init: initInternalComponent

    创建子组件的时候会把占位符$vnode的$listeners传递给子组件的$options**(此时data.on已经是data.nativeOn,原始的data.on赋值给变量listeners)**

    _init: initEvents

    调用updateComponentListeners方法,最后还是调用了updateListeners方法(见前面文章注释)。

    但是这里不同的是add和remove方法并非是document.addEventListener和document.removeEventListener

    add/remove(vue中的发布订阅模式):

    其实发布订阅模式比较简单,就不详细说明了,主要是add/remove方法。

    小结

    其实本质上,还是将父组件注册的回调函数传给了子组件的_events对象(让该函数存在于子组件中),但是看起来像是子组件调用了父组件的方法

    eventBus

    对于跨组件的组件通信,利用了vue实例可以有自身的_events对象,因此在Vue原型上创建一个空的vue实例,然后将vue所有组件上的函数都注册在这个实例对象的_events对象上,一次达到跨组件通信的目的

    Vue.prototype.$bus=new Vue()

    第三种情况:v-on="$listeners"

    $listeners就是vnode.data.on的别称,因此通过$listeners就可以拿到父组件注册的非native事件。在爷孙组件通信的是可以使用$listeners通过父级组件将爷孙组件关联。

    grand组件:

    father组件:  // 此处是grand的事件

    son组件:this.$emit(“test”) // 将father的$listeners传入son,而father的$listeners包含grand的事件,因此就将grand的事件传入了son中。

    AST解析

    在模板解析的时候会用正则匹配v-on,对于v-on="$listeners",vue将这种写法视为指令(directive),有不同的策略

    on指令

    _g

    这里将$listeners对象与data.on进行合并,通过v-on指令我们可以一次性对组件注册多个事件。

    最后

    vue的事件基本上就是这样,其实这里面牵扯到了最核心的组件初始化和更新流程,关于此部分在本文中并没有明确说明,只是大概提了一下,一是要单纯靠文字说明费时费力(代码含有大量递归),而是本文重点是关注vue中的事件,在后面的更深入了解整个机制后会尝试说明写一篇vue组件初始化及更新的文章。

    版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

    作者: Simplyme0823

    原文链接:https://juejin.im/post/6861206075744452622

    展开全文
  • VUE中事件委托

    2021-06-02 09:05:51
    什么是事件委托? 事件委托,又名事件代理。事件委托就是利用事件冒泡,把子元素的事件绑定到父元素上。如果子元素阻止了事件冒泡,那么委托就没法...3.在事件中可以通过事件对象来获取自定义属性的值 代码展示 <

    什么是事件委托?

    事件委托,又名事件代理。事件委托就是利用事件冒泡,把子元素的事件绑定到父元素上。如果子元素阻止了事件冒泡,那么委托就没法实现了。

    好处:
    提高性能,减少了事件绑定,从而减少内存占用。

    (事件冒泡就是由内往外,从具体的目标节点元素触发,逐渐向上传递,直到根节点。)

    怎么使用事件委托

    我们事件委托一般都是使用在列表里面的。这里就拿列表举例:
    1.我们在每一个循环的标签身上动态绑定一个自定义属性。
    2.给统一的父元素绑定事件。
    3.在事件中可以通过事件对象来获取自定义属性的值

    代码展示

    <template>
      <div class="home">
          <ul @click="click">
            <li v-for="(item,index) in 100" :key="item" v-bind:data-index="index">{{item}}</li>
            <-- data-自定义属性名="值" -->
          </ul>
      </div>
    </template>
    
    <script>
    
    
    export default {
      methods:{
        click(e){
          console.log(e.target.dataset.index);
          // 获取是通过  e.target.dataset.自定义属性名
          
        }
      },
    }
    </script>
    
    

    注意:如果事件需要传参且还需要用到事件对象,那么我们传入的第一个实参就是事件对象。事件对象使用 $event 来传入。

    展开全文
  • singlecheck[i].addEventListener("click", ()=>{ console.log(this.indexs) if(singlecheck[i].checked){ this.indexs.push(this.tableData...一定要用箭头函数 如果用function(){}的this指向触发事件的 元素
  • 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全局事件总线详解

    2021-09-07 15:50:20
    什么是事件总线 我们之前的时候经常性是需要两个隔着老远的组件之间的通信,这个要是一层层的传递下去通信那真的是太麻烦了,所以才有了这个东西 原理如下:在vue加载的时候设立一个公共的实例类型,我们的组件可以...
  • vue传值和事件方式

    2020-12-23 12:23:40
    一、vue的传值方式1、父向子传递属性Props//childporops:{msg:String}//parent2、子向你传递引用refs//childdata(){return {hw:"我是子类父类可以调用"}}//parentthis.$refs.hw3.provide和inject实现袓孙传值provide...
  • vue事件总线传值

    2021-11-08 19:49:48
  • 如果在组件,遇到绑定原生事件(click等事件)不生效的话,在事件后面+.native即可生效 原理: 有些element ui的组件可以绑定原生事件,但有些组件是无法绑定原生事件的,如果element ui 有提供组件的事件即可...
  • 我第一次点击遇新是直...都年很过过事发工开宗定据发指互数个遍前互就业大经话就显示这样的事件中比需抖接朋功要朋插该怎么写呢metho中比需抖接朋功要朋插ds: {Retry(){let vm = this;global.post(api.handWork,thi...
  • 事件处理程序调用event.preventDefault()或event.stopPropagation()是非常常见的需求。 .stop 阻止单击事件传播 即阻止了事件冒泡,相当于调用了event.stopPropagation方法(通俗讲就是阻止事件向上级DOM元素...
  • VUE事件参数$event

    千次阅读 2021-04-14 20:51:09
    在原生事件中表现和默认的事件对象相同 <template> <div> <input type="text" @input="inputHandler( hello , $event)" /> </div> </template> export default { methods: { ...
  • 函数防抖定义:多次触发...在vue中对click添加防抖处理const on = Vue.prototype.$on// 防抖处理Vue.prototype.$on = function (event, func) {let timerlet newFunc = funcif (event === 'click') {newFunc = fu...
  • <div class="maskshow" @click="hidden_video" @touchmove.prevent></div> .stop 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,....capture 是改变js默认的事件机制,默认是..
  • vue2.0,获取事件对象有三种方式: 第一种:$event关键字 <button @click="fn($event,100)">fn</button> 这里的$event是从哪里来的,非得写这个名字吗? 只需要绕道背后看看它对应生成的render函数...
  • vue点击事件防抖

    2021-10-13 17:01:29
    标题单个点击事件防抖 <!DOCTYPE html> <html lang="en"> <head>...meta charset="UTF-8">...script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <st
  • [vue] 在vue事件中传入$event,使用e.target和e.currentTarget有什么区别? event.currentTarget指向事件所绑定的元素,而event.target始终指向事件发生时的元素。 个人简介 我是歌谣,欢迎和大家一起交流前后端...
  • Vue中监听事件的使用

    2020-12-22 12:07:50
    1、定义监听事件 使用v-on 或者 语法糖 @事件 来定义监听事件 如:v-on:click=“事件” or @click“事件“ 下面展示监听事件的基本使用 <body> <div id="app"> <h2>当前数值:{{center}}</...
  • 例如有如下场景先熟悉一下Vue事件处理<!-- 父组件 --><template><div><!--我们想在这个dealName的方法传递额外参数name --><test-son v-for="item in list" @dealName="todo(item.name...
  • 原生js,阻止事件冒泡,获取点击对象, e.stopPropagation(); vue阻止事件冒泡@click.stop=“show” <body> <div id="myApp" @click="show2()"> <div @click="show1()"> <button @click....
  • 鼠标在li上移动也会触发移出事件 两组鼠标事件 mouseover 和 mouseout mouseenter 和 mouseleave mouseover 和 mouseout 什么时候使用说明 根据鼠标事件的target进行触发,是一种精确触发。 当为某一组件...
  • 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中swiper 绑定事件

    2021-08-23 09:47:50
    方案二 :Vue使用swiper插件实现banner轮播,并给轮播图绑定click点击事件,前面两帧是弹出弹框,第三帧是页面跳转。 问题: 第一遍循环的轮播图有@click事件,第二遍及后面循环的轮播图没有@click事件。 分析...
  • vue3中事件总线的使用

    2021-07-23 07:03:47
    Vue3从实例移除了 on、on、on、off 和 $once 方法,所以我们如果希望继续使用全局事件总线的话,就需要通过第三方库: Vue3官方有推荐一些库,例如 mitt 或 tiny-emitter; 这里我们主要说一下mitt库的使用; 首先...
  • 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
  • 自定义事件:子组件在父组件使用时,直接绑定在子组件上的事件就是自定义事件,必须经过子组件的触发vm.$emit()才能执行 原生事件:直接在子组件里的模板上绑定的事件,子组件引入后是可以直接触发的 当我们给一个...
  • Vue onload事件的坑

    千次阅读 2021-11-13 09:21:30
    先占个位,大概就是asnyc同步异步的问题 等我有时间再来写,开个新坑,基于webgis的矢量数据管理系统
  • Vue中事件处理

    2021-11-16 14:10:05
    Vue中事件处理 知识点: 使用v-on:xxx或者@xxx绑定事件,其中xxx是事件名; 事件的回调需要配置在methods对象,最终会在vm上; methods配置的函数,不要用箭头函数!否则this就不是vue实例了; methods配置...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 189,844
精华内容 75,937
关键字:

vue中的事件

vue 订阅