vue 在 v-for 时给每项元素绑定事件需要用事件代理吗?为什么?
vue本身不做事件代理(react将所有事件都委托到document上,然后进行派发)
- 普通html元素和在组件上挂了
.native修饰符的事件。最终EventTarget.addEventListener()挂载事件 - 组件上的,vue组件实例上的自定义事件(不包括
.native)会调用原型上的$on,$emit(包括一些其他api$off,$once等等)
vue自身没有做事件代理,如果需要,则直接代理到父节点
<ul @click="meths">
<li v-for="(item,key) in 10" :key="key" :data-index="key">{{item}}</li>
</ul> meths(e) {
if (e.target.nodeName.toLowerCase() === 'li') {
console.log(e.target.innerHTML)
console.log(e.target.dataset)
}
}
事件代理作用主要是 2 个
- 将事件处理程序代理到父节点,减少内存占用率
- 动态生成子节点时能自动绑定事件处理程序到父节点
vue 在 v-for 时给每项元素绑定事件需要用事件代理吗?为什么?的更多相关文章
- Vue方法中修改数组某一项元素而不能响应式更新
<template> <div> <ul> <li v-for="(item, i) in ms" :key="i"& ...
- 【vue】vue使用Element组件时v-for循环里的表单项验证方法
转载至:https://www.jb51.net/article/142750.htm标题描述看起来有些复杂,有vue,Element,又有表单验证,还有v-for循环?是不是有点乱?不过我相信开发中 ...
- vue隐藏APP启动时显示的{{}}
vue隐藏APP启动时显示的{{}} vue组件在编译好之前会显示{{msg}},在官网上找到这个
- 为什么VUE注册组件命名时不能用大写的?
这段时间一直在弄vue,当然也遇到很多问题,这里就来跟大家分享一些注册自定义模板组件的心得 首先"VUE注册组件命名时不能用大写"其实这句话是不对的,但我们很多人开始都觉得是对的, ...
- vue中使用swiper-slide时,循环轮播失效?
前言 vue 项目中使用时,组件swiper-slide 如果用v-for循环的话,loop:true 就不能无缝轮播,每次轮播到最后一张就停止了??? 正文 代码如下: <swiper :op ...
- VUE.JS 窗口发生变化时,获取当前窗口的高度。
VUE.JS # 窗口发生变化时,获取当前窗口的高度. mounted () { const that = this; window.onresize = () => { return (() ...
- Vue路由开启keep-alive时的注意点
Vue路由开启keep-alive时的注意点 这个不是业务的要求,但是看到每次进入页面就重新渲染DOM然后再获取数据更新DOM,觉得作为一个前端工程师有必要优化下的加载逻辑,正好vue提供了 ke ...
- Vue微信自定义分享时安卓系统config:ok,ios系统config:invalid signature签名错误,或者安卓和ios二次分享时均config:ok但是分享无效的解决办法
简述需求:要求指定页面可以进行微信自定义分享(自定义标题,描述,图片,链接),剩下的页面隐藏所有基础接口.二次分享依然可以正常使用,切换至其他页面也可以正常进行自定义分享. 这两天在做微信自定义分享的 ...
- 【Vue | ElementUI】Vue离开当前页面时弹出确认框实现
Vue离开当前页面时弹出确认框实现 1. 实现目的 在某种业务场景下,用户不允许跳转到其他页面.于是,需要在用户误操作或者是点击浏览器跳转时提示用户. 2. 实现原理 使用路由守卫beforeRout ...
- 解决Vue编译和打包时频繁内存溢出情况CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
解决Vue编译和打包时频繁内存溢出情况CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory 如上图所示:频繁出现此 ...
随机推荐
- JSP过滤器、Session监听器、Servlet控制器的关系和执行顺序
1.首先配置好过滤器和监听器,访问index.jsp页面(在index.jsp中设置session的Attribute属性.session的失效时间,查看的顺序是什么?); 1.运行Tomact的结果 ...
- js复制图片
^(* ̄(oo) ̄)^:可以复制到微信和钉钉,文件夹中不可以复制 <!DOCTYPE html> <html lang="en"> <head> ...
- 关于easyocr、paddleocr、cnocr之比较
关于easyocr.paddleocr.cnocr之比较 EasyOCR 是一个使用 Java 语言实现的 OCR 识别引擎(基于Tesseract).借助几个简单的API,即能使用Java语言完成图 ...
- c--> #define 定义宏
#define 定义宏 宏(Macro)是预处理命令的一种,它允许用一个标识符来表示一个字符串 1.有关定义宏的代码末尾不需要添加":"(分号) 2.定义宏define在计算的式子 ...
- 初学银河麒麟linux笔记 第七章 VMWare虚拟机内的qt程序连接串口和网口
QT程序可以正常在虚拟机里的麒麟系统里运行了,但是无法连接网口和串口,这里进行配置 网口连接 与硬件的TCP连接,在虚拟机上设置桥接 再重启就能连上了 串口连接 首先参考 https://blog.c ...
- Markdowm的下载方法
1打开百度搜索,输入TYPORA打开下载页面,根据自己的系统(我的是WINDOWS64位)点"DOWN"进行下载安装. 2安装好后回到桌面新建一个文件夹(Markdown学习),然 ...
- Excel怎么把公式转成数值并复制
直接选中复制,粘贴时选择选择性粘贴,选择数值确认
- appium遇到的问题
问题1:权限问题:java.lang.SecurityException: Injecting to another application requires INJECT_EV ENTS permi ...
- PHP 静态延迟绑定 static
PHP (self static parent 区别) self调用的方法和属性始终表示当前类的方法和属性 static调用的方法和属性为当前执行的类的方法和属性 parent调用的方法和属性为父类的 ...
- Unity打开两个同样的工程,使用mklink.bat来进行同步
操作步骤 假设存在一个项目xProject: 1.在xProject的同级目录中建立一个文件夹,命名为xProjectCopy 2.在xProject的同级目录中建立一个bat文件,命名为mklink ...