<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的方法的更多相关文章

  1. 第七十六篇:ref引用(在vue中引用Dom的方法)

    好家伙, 引子: jQuery简化了程序员操作DOM的过程 vue 优势:MVVM 在vue中,程序员不需要操作DOM.程序员只需要把数据维护好即可!(数据驱动视图) 那么若要在vue中操作dom,这 ...

  2. vue中操作Dom节点的方法

    1.vue中ref操作dom节点 <template> <div id="app"> <div </div> <button @cl ...

  3. vue $refs操作DOM

    原文链接:https://www.cnblogs.com/xumqfaith/p/7743387.html 如图,ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象 ...

  4. javascript操作DOM的方法与属性

    文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构. 将HTML代码分解为DOM节点层次图: ...

  5. 原生js操作dom的方法

    今天学习了原生js的dom节点的操作,就记录下来,仅供自己以后参考. 1)创建节点:除了可以使用createElement创建元素,也可以使用createTextNode创建文本节点. documen ...

  6. 在vue中操作dom元素

    在vue中可以通过给标签加ref属性,就可以在js中利用ref去引用它,从而达到操作该dom元素,以下是个参考例子 1 <template> 2 <div> 3 <div ...

  7. Vue中获取dom元素

    Vue.js虽然说是数据驱动页面的,但是有时候我们也要获取dom对象进行一些操作. vue的不同版本获取dom对象的方法不一样 Vue.js  1.0版本中,通过v-el绑定,然后通过this.els ...

  8. 直接操作DOM一定比虚拟DOM操作耗时,diff算法,key值,虚拟 DOM的定义

    直接操作DOM一定比虚拟DOM操作耗时吗? 或者一次直接DOM操作一定比一次虚拟DOM操作耗时吗? 1)虚拟DOM的本质就是一个JS对象,虚拟DOM减少了真实DOM的操作,当修改数据的时候,就是修改虚 ...

  9. 读Zepto源码之操作DOM

    这篇依然是跟 dom 相关的方法,侧重点是操作 dom 的方法. 读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 zepto1 ...

随机推荐

  1. C# 日期时间

    --DateTime 数字型 System.DateTime currentTime=new System.DateTime(); 取当前年月日时分秒      currentTime=System. ...

  2. C语言编程(多线程)

    C语言中多线程编程包括的文件:#include<pthread.h>(linux环境下) pthread_t //线程函数返回类型 pthread_mutrex_t //互斥锁类型 int ...

  3. DataGrid表格某单元格数据填入是否正确的验证---MiniUI使用

    示例: <div id="datagrid1" class="mini-datagrid" oncellvalidation="onCellVa ...

  4. 单片机小白应该如何学习stm32的一些实践心得!

    嵌入式搬砖道路上的大三狗一枚,撑死算个初学者吧.才学有限,下面仅仅是本人对STM32学习的一点心得与建议,希望对题主有帮助吧. 心得:本人当初学习STM32的时候有一些跟风的因素,自以为学的芯片越多就 ...

  5. you-get模块

    You-Get是一个基于 Python 3 的下载工具.使用 You-Get 可以很轻松的下载到网络上的视频.图片及音乐. 转载https://www.cnblogs.com/wangchuanyan ...

  6. java 软件安装

    myeclipse 2014 安装 https://www.cnblogs.com/plus301/articles/5633540.html

  7. DAX/PowerBI系列 - 累计总计(Cumulative Total)

    DAX/PowerBI系列 - 累计总计(Cumulative Total) 2017/07/23 更新:B列公式(见最后) 难度: ★★☆☆☆(2星) 适用: ★★☆☆☆(2星) 概况: 这个模式普 ...

  8. HTML5 元素属性介绍

    HTMLElement 表示所有的 HTML 元素. 这里将以事件属性和非事件属性的分类进行介绍. 事件属性大多继承自GlobalEventHandlers,非事件属性大多继承自Element. 菜单 ...

  9. jQuery实现购物车物品数量的加减

    基于jquery的一款代码,实现购物车数据的加减,在淘宝网.京东商城购物时时经常见到的一个功能,点击文本框两侧的“+”与“-”,就可以增加或减少文本框内的数字值,每次步长为1,当然这个是可以自己设置的 ...

  10. 大堆文字不如几张图片-论信息传递的方式以NodeMCU入门为例