Vue提供操作DOM的方法
<div ref="wrapper">
Vue.js 提供了我们一个获取 DOM 对象的接口—— vm.$refs。在这里,我们通过了 this.$refs.wrapper访问到了这个 DOM 对象,并且我们在 mounted 这个钩子函数里,this.$nextTick 的回调函数中初始化
因为 Vue 是数据驱动的, Vue 数据发生变化(this.data = res.data)到页面重新渲染是一个异步的过程,我们的初始化时机是要在 DOM 重新渲染后,所以这里用到了 this.$nextTick,当然替换成 setTimeout(fn, ) 也是可以的。
this.$nextTick(() => {
console.log(this.$refs.wrapper)
this.$refs.wrapper.style.color='red'
})
另外 this.$el 可以获取body下所有DOM节点
父页面获取子组件的所有属性
<moduleListMoney ref='com' ></moduleListMoney> this.$refs.com.loder2 = false 更改组件 子组件 moduleListMoney 某个元素中有 loder2 变量的值 this.$refs.com 获取组件 moduleListMoney 所有元素的值
获取 child下面的节点
this.$refs['comImg'].childNodes
Vue提供操作DOM的方法的更多相关文章
- 第七十六篇:ref引用(在vue中引用Dom的方法)
好家伙, 引子: jQuery简化了程序员操作DOM的过程 vue 优势:MVVM 在vue中,程序员不需要操作DOM.程序员只需要把数据维护好即可!(数据驱动视图) 那么若要在vue中操作dom,这 ...
- vue中操作Dom节点的方法
1.vue中ref操作dom节点 <template> <div id="app"> <div </div> <button @cl ...
- vue $refs操作DOM
原文链接:https://www.cnblogs.com/xumqfaith/p/7743387.html 如图,ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象 ...
- javascript操作DOM的方法与属性
文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构. 将HTML代码分解为DOM节点层次图: ...
- 原生js操作dom的方法
今天学习了原生js的dom节点的操作,就记录下来,仅供自己以后参考. 1)创建节点:除了可以使用createElement创建元素,也可以使用createTextNode创建文本节点. documen ...
- 在vue中操作dom元素
在vue中可以通过给标签加ref属性,就可以在js中利用ref去引用它,从而达到操作该dom元素,以下是个参考例子 1 <template> 2 <div> 3 <div ...
- Vue中获取dom元素
Vue.js虽然说是数据驱动页面的,但是有时候我们也要获取dom对象进行一些操作. vue的不同版本获取dom对象的方法不一样 Vue.js 1.0版本中,通过v-el绑定,然后通过this.els ...
- 直接操作DOM一定比虚拟DOM操作耗时,diff算法,key值,虚拟 DOM的定义
直接操作DOM一定比虚拟DOM操作耗时吗? 或者一次直接DOM操作一定比一次虚拟DOM操作耗时吗? 1)虚拟DOM的本质就是一个JS对象,虚拟DOM减少了真实DOM的操作,当修改数据的时候,就是修改虚 ...
- 读Zepto源码之操作DOM
这篇依然是跟 dom 相关的方法,侧重点是操作 dom 的方法. 读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 zepto1 ...
随机推荐
- windows环境下 php 将office文件(word/excel/ppt)转化为pdf(转)
将office文件转化为pdf的方法有 1.利用openoffice提供的服务 (比较简单,但是转化的效果不太好) 2.使用office提供的服务 (注:这在windows服务器上,并且服务器上面安装 ...
- 17.vue移动端项目二
FilmList.vue 电影列表 <template> <div class="mz-film-list"> <!-- 正在热映 https://m ...
- IkAnalyzer2012FF_u1.jar免费下载
链接:https://pan.baidu.com/s/1P_0cdRLKJO4VIUTokvTS0g 提取码:qt3w
- 原生js的remove方法代表删除节点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 补充:ajax post 方式请求
1. 什么是ajax Ajax: asynchronous javascript and xml (异步js和xml) 其是可以与服务器进行(异步/同步)交互的技术之一. ajax的语言载体是j ...
- HTML、CSS知识点,面试开发都会需要--No.3 盒子模型
No.3 盒子模型 1.盒子模型属性 (1)包含的CSS属性:width.height.padding.border.margin. 1.盒子模型属性 (1)包含的CSS属性: width.heigh ...
- Ububtu 14.04 安装 Hadoop 2.7.3
1.首先安装java,配置java开发环境 下载jdk:http://www.oracle.com/technetwork/java/javase/archive-139210.html选择你想要下载 ...
- uploadify 火狐 http error:302
网上查询了一都说是flash 中 Session问题 (IE会自动复制过去),大多说将session值传过去就可以了但我们用的是公司的一套权限,改不了用户登录信息 无奈只好不用用户信息来做,果然对了 ...
- PE、PB、PEG三大估值法的正确使用方法!
目前市面上的估值方法有很多,比如PE估值法.PB估值法.PEG估值法,但是我相信,真正会用的人并不多,比如说目前动态市盈率121倍的比亚迪真的高估吗?比如目前市净率为0.63倍的众泰汽车真的是破净股吗 ...
- Apache ab并发负载压力测试(python+django+mysql+apache)
如标题,大家都知道秒杀中存在高并发使库存骤然为0,但在我们个人PC或小区域内是模拟不出这样的情景 现在利用 Apache ab并发负载压力测试 1,数据库建入库存字段并映射模型 2,view编写脚本 ...