vue 动态添加的dom 怎么监听

2024-11-03

vue，在模块中动态添加dom节点，并监听

在这里,onclick事件没有作用,因为它指向的是window,如果写为this.click页面显示为undefined, 我采用的是通过class绑定事件,但是会有一个问题,那就是当你渲染多个事件时,通过class绑定的事件会多次触发, 如下 $('.wrap').on("click",'.btn',function(){ console.log(“1‘) }) 当有多个class的时候,你点击第一个,当前每一个class都会执行一下, 因此当前事件应只执行一次后就移除我使用的是j

DOM事件监听和触发

EventTargetAPI定义了DOM事件(mouse事件等)的监听和触发方法,所有的DOM节点都部署了这个接口. 这个接口有三个方法:addEventListener, removeEventListener, dispatchEvent. 一. EventTargetAPI 1. EventTarget.addEventListener(type, listener, options) 给DOM节点对象添加事件监听. 语法: eleTarget.addEventListener(type,

DOM 事件监听事件冒泡事件捕获

addEventListener() 方法实例: // 当用户点击按钮时触发监听事件: document.getElementById("myBtn").addEventListener("click", displayDate); addEventListener() 方法用于向指定元素添加事件句柄. addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄. 你可以向一个元素添加多个事件句柄. 你可以向同个元素添加多个同类型的事件句柄,

vue动态添加路由addRoutes之不能将动态路由存入缓存

在我不知道vue的路由还可以通过addRoutes动态添加时,我只知道vue的路由都是写死在路由表中的,每当跳转时再去加载相应的路由.直到在一个新公司接到需要根据用户的权限显示不同的菜单的需求时才知道了原来vue-router还有一个addRoutes的API,立马研究了一下. router.addRoutes: 函数签名: router.addRoutes(routes: Array<RouteConfig>) 动态添加更多的路由规则.参数必须是一个符合routes选项要求的数组. 点这里去

vue里的watch 和 computed 监听的不同

1.computed里是偏向于通过监听data里的值变化后,经过运算返回一个新的计算结果, 所以k不能与data里的k重名,并且必须有return, 能够缓存,依赖的值不变化不会进行重复计算: 而watch是监听data里的值的变化,k是data里的k,不能自己单独定义k watch里经常放异步函数. 不能缓存. watch顾名思义,用于监听数据变化,其中可以监听的数据来源有三部分:props.data.computed内的数据:watch提供两个参数(newValue,oldValue),第一

Vue引用第三方datepicker插件无法监听datepicker输入框的值

一.背景在Vue项目中使用了第三方的datepicker插件,在选择日期后vue无法检测到datepicker输入框的变化 <label class="fl">日期:</label> <div class="input-wrapper fr"> <input class="daterangepicker" ref="datepicker" v-model="dateRang

vue中进行窗口变化的监听

今天vue项目中用到的元素的宽度依赖与窗口的宽度,所以在进行宽度设置的时候涉及到窗口的变化,因为元素的宽度要随着窗口变化分成几个步骤来实现这一过程 1.首先元素的宽度依赖与窗口的宽度,就需要有接受窗口宽度的变量在data中设置: screenWidth: document.documentElement.clientWidth,//屏幕宽度 2.窗口变化的时候需要及时的更新变量的值在mounted中设置监听窗口变化的监听事件 window.addEventListener('resize'

vue 动态添加对象属性

昨天使用vue发现直接给对象添加属性,并不能触发响应更新,后来看文档发现要通过this.$set 函数动态添加才可用,eg: this.$set( obj, key, data)

Vue 变量，成员，属性监听

Vue变量 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>变量</title> </head> <body> <div id="app"> <p>{{ msg }}</p> <p>{{ info }}</p

Vue ----》如何实现 sessionStorage 的监听，实现数据响应式

在开发过程中,组件中的随时可能改变的数据有的是缓存到sessionStorage里面的,但是有些组件取seesionStorage中的值时,并不能取到更新后的值. 接下来就说一下,当seesionStorage的值发生改变时,如何实现组件中的seesionStorage的值实时更新 ,也就是seesionStorage的“响应式” 1.首先在main.js中给Vue.protorype注册一个全局方法,其中,我们约定好了想要监听的sessionStorage的key值为’watchStorage

9 HTML DOM事件监听&版本兼容&元素（节点）增删改查

事件监听: 语法:element.addEventListener(event, function, useCapture); event:事件的类型,触发什么事件,注意不需要on作为前缀,比如click function:事件触发后调用的函数 useCapture:描述事件是冒泡还是捕获,该参数可选的当用户点击按钮时触发监听事件: document.getElementById("myBtn").addEventListener("click",displayD

AngularJS如何给动态添加的DOM中绑定事件

正常情况(即非动态插入 DOM 对象)下,ng-click 这样的指令之所以有效(即点击之后能调用注册在可见作用域里的方法),是因为 angular 在 compiling phase(编译阶段)将宿主 DOM 对象(即加入了 ng-click 指令的 DOM 对象)绑定在当前作用域内了. 换言之,当前作用域知道有这个绑定了 ng-click 的 DOM 对象存在,所以 ng-click 才会起作用. 而在你的例子里,HTML 片段是在 compiling phase 后动态插入到 DOM 树中

ListView添加item的事件监听

1. 点击事件(OnItemClickListener) onItemClick(AdapterView<?> parent, View view, int position, long id) parent:官方解释为:The AdapterView where the click happened,也就是用户所点击的AdapterView,这个参数一般不用. view:当前点击的列表项所对应的布局View对象,可通过这个参数获得相应的列表项内部的组件,进而对其进行操作.举个例子,假

vue 动态添加 <style> 样式 vue动态添加绑定自定义字体样式

created(){ //动态添加自定义字体样式 let style = document.createElement('style'); style.type = "text/css"; style.innerText = "@font-face {font-family:'PingFang-Regular';src:url('http://diary-biku.oss-cn-qingdao.aliyuncs.com/upload_file/common/typeface/

vue computed计算属性和watch监听属性解疑答惑

computed计算属性计算属性类似于方法,用于输出data中定义的属性数据的结果,data数据变化时,计算属性的结果会同步变化,需要注意的是计算属性不可与data定义的属性同名. 相比于方法它的优势是只有当依赖的属性变化时,才会重新计算.而方法会在每次重新render的时候都会执行,因此计算属性相比方法性能明显更高,而且计算属性可直接绑定在v-model属性上.计算属性还提供get和set方法进行读写操作. watch方法一旦监听了data中的属性,只要data数据变化了会立即

jquery给动态添加的dom元素绑定事件

$('input').click(function () { //处理代码 }); 这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定,对于页面中动态添加的元素,在页面加载完成后添加的,因此页面加载时无法给其绑定事件处理函数,好在jquery提供了on方法,如为动态添加的元素附加单击事件.对于jquery1.7+的版本直接用on方法, $('body').append('<p id=\"pid\"></p>'); $('#pid').on(

vue动态添加路由，跳转页面时，页面报错路由重复：vue-router.esm.js?8c4f:16 [vue-router] Duplicate named routes definition: { name: "Login", path: "/login" }

之前用了一个vue-element-admin做了一个小项目,里面用到了动态添加路由,动态展示侧边栏, 当我切换页面时,控制台总是警告提示路由重复,连续跳转几次页面后,控制台就被这些警告占满了, 于是处理一下原因addRoutes 方法仅仅是帮你注入新的路由,并没有帮你剔除原有的其它路由! 我们先看一下原来代码路由拦截器中的代码: permission.js: if (roles) { function asyncFun(){ return new Promise(function(reso