<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. 目前常用的加密算法有DES(Data Encryption Standard)和IDEA(International Data Encryption Algorithm)国际数据加密算法等,请用工厂方法实现加密算法系统。提交该系统的代码,该系统务必是一个可以能够直接使用的系统,查阅资料完成相应加密算法的实现;

    1.加密算法的类图结构 2.源代码 2.1代码运行截图 2.2代码的目录结构 2.3具体代码 MethodFactory.java package jiami; public interface Me ...

  2. Python----Windous下安装python

    一.  python 安装 1. 下载安装包 https://www.python.org/ftp/python/2.7.14/python-2.7.14.amd64.msi # 2.7安装包 htt ...

  3. 20175320 2018-2019-2 《Java程序设计》第1周学习总结

    20175320 2018-2019-2 <Java程序设计>第1周学习总结 教材学习内容总结 本周学习了教材的第一章内容.在这一章中,我了解了Java这门编程语言的特点和地位,而本章的重 ...

  4. 2016ACM/ICPC亚洲区沈阳站 - A/B/C/E/G/H/I - (Undone)

    链接:传送门 A - Thickest Burger - [签到水题] ACM ICPC is launching a thick burger. The thickness (or the heig ...

  5. Gym 101194H / UVALive 7904 - Great Cells - [数学题+快速幂][2016 EC-Final Problem H]

    题目链接: http://codeforces.com/gym/101194/attachments https://icpcarchive.ecs.baylor.edu/index.php?opti ...

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

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

  7. ARGB 颜色取值与透明度对照表

    1.  ARGB 依次代表透明度(alpha).红色(red).绿色(green).蓝色(blue). 2. 透明度分为256阶(0-255),计算机上用16进制表示为(00-ff).透明就是0阶,不 ...

  8. Socket,ServerSocket,WebSocket

    一 区别 首先来说下区别吧, Socket和ServerSocket 指传输层网络接口协议,是基于套接字的服务端和客户端实现. 而WebScoket是应用层协议,是客户端-服务器的异步通信方法,用于双 ...

  9. java之jdbc使用

    简单使用 Statement 通过 Statement 执行 ,其实是拼接 sql 语句的.  先拼接 sql 语句,然后在一起执行. package com.zze.test; import jav ...

  10. 【Java】NO.80.Note.1.Java.1.001-【Java 各种特性概念】

    1.0.0 Summary Tittle:[Java]NO.80.Note.1.Java.1.001-[Java 各种特性概念] Style:Java Series:Java Since:2018-0 ...