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 ...
随机推荐
- MySql的主从复制以及读写分离详解
MySQL主从复制(Master-Slave)与读写分离(MySQL-Proxy)实践 Mysql作为目前世界上使用最广泛的免费数据库,相信所有从事系统运维的工程师都一定接触过.但在实际的生产环境中, ...
- Alpine Linux常用命令
一:Alpine Linux开启SSH远程登陆 1.简介: 最重要的一个服务了,远程登陆需要用它,文件传输需要用它,必备功能.不管你是在实体机上跑,虚拟机上跑,docker里面跑,这个都是必须的. 2 ...
- php导出超大csv导出方法,读取超大文件或者接受超大数组,防止内存溢出
基本思路就是,知道总数之后分割成2万一个数组进行查询,最后独立写入csv,避免数据过大导致溢出 速度还不错,在php7下,机器I5 8G内存,128G,SSD,52W多条,大概也就30秒,出来整个文件 ...
- Kerberos安全体系详解---Kerberos的简单实现
1. Kerberos简介 1.1. 功能 一个安全认证协议 用tickets验证 避免本地保存密码和在互联网上传输密码 包含一个可信任的第三方 使用对称加密 客户端与服务器(非KDC)之间能够相互 ...
- [特征工程]-------使用sklearn做单机特征工程[转载]
https://www.cnblogs.com/jasonfreak/p/5448385.html 使用sklearn做单机特征工程 目录 1 特征工程是什么?2 数据预处理 2.1 无量纲化 2.1 ...
- 【LeetCode每天一题】Jump Game(跳跃游戏)
Given an array of non-negative integers, you are initially positioned at the first index of the arra ...
- chrome下调试安卓app 之 ionic
打开chrome浏览器,输入chrome://inspect/#devices,将安卓手机插入电脑上,打开手机设置 打开 开发者调试usb调试 ,网页上会出现 input 点击, 就会看见consol ...
- Gitlab+Jenkins实现自动部署
Gitlab+Jenkins实现自动部署 系统环境: Gitlab主机 IP:192.168.1.2 Jenkins主机 IP:192.168.1.3 一.为何要做自动部署 #部署Tomcat的在 ...
- Unity之配置转换工具
本人写的配置转换工具,可将策划的配置excel文件一键转换为unity的asset文件或lua代码: 转换请注明出处:http://www.cnblogs.com/jietian331/p/86252 ...
- Fluxion无线攻击
使用步骤 github地址 https://github.com/deltaxflux/fluxion 进入到fluxion目录下 ./fluxion 启动fluxion 启动之后会先检测没有安装的 ...