关于document和$el

最新推荐文章于 2024-02-22 11:10:32 发布
原创 最新推荐文章于 2024-02-22 11:10:32 发布 · 507 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了Vue.js中this.$el和this.$refs的作用及使用方法。this.$el用于访问当前组件的DOM元素，而this.$refs则用于获取页面中带有ref属性的所有DOM元素。此外，还提及了每个加载到浏览器的HTML文档都将被转化为Document对象。

$el

this.$el 指向当前组件的DOM元素

$refs

this.$refs 指向页面中所有含有ref属性的DOM元素

document

每个载入浏览器的 HTML 文档都会成为 Document 对象

vue-removed-hook-mixin:向 Vue 组件添加一个 `removed` 钩子，在 `$el` 从 DOM 中移除后调用
05-31
vue-removed-hook-mixin 向组件添加一个removed... // this.$el is no longer a descendant of document.body. } } // 2) Apply the mixin to all components. import addRemovedHook from "vue-removed-hook-mixi
Vue 中$els 的用法和理解
山外小楼
08-23 4480
最近开发项目中用到了$els 经过查阅后来归纳一下 $res 为 DOM 元素注册一个索引，方便通过所属实例的 $els 访问这个元素。 注意： 因为 HTML 不区分大小写，camelCase 名字比如 v-el:someEl 将转为全小写。可以用 v-el:some-el 设置 this.$els.someEl。 我的理解：$els类似于document.que
document与$的区别与联系（DOM对象与jQuery对象）
点墨漫雪的博客
12-11 2415
一、documen.getXXX()与$()的区别： documen.getXXX()返回的是DOM对象 $()返回的是jQuery对象 二、DOM对象与jQuery对象的区别： DOM对象是指用JavaScript获得的对象； jQuery对象是指用jQuery类库选择器获得的对象； js = document.getElementId("id")//dom对象 js1 = $("...
Document类型、Element类型和Text类型的常用方法和属性
qq_50748038的博客
08-24 1957
节点类型：Document类型、Element类型和Text类型的常用方法和属性
document.getElementById()与 $()，DOM对象和jQuery对象的转换
wang1994daren的博客
01-06 1625
document.getElementById()返回的是DOM对象，而$()返回的是jQuery对象 两者之间互相转换 1.jQuery对象转成DOM对象：  (1)jQuery对象是一个数据对象，可以使用[index]方法获取DOM对象。  如： var $v =$("#v") ;  // $v是一个jQuery对象。 var v=$v[0]; // v是一个DOM对象。
vue中ref的作用
qq_29078779的博客
11-05 439
vue中的ref其实功能很强大，下面介绍一下如何使用。 基本用法，本页面获取dom元素 <template> <div id="app"> <div ref="testDom">11111</div> <button @click="getTest">获取test节点</button> </...
document.body.appendChild( $loading.$el );中的$el是什么
07-20
`$el`是Vue应用实例的一个属性，它指向实例的根元素。...在这段代码中，`document.body.appendChild( $loading.$el )`将Vue应用的根元素添加到当前页面的body元素中，实现在页面中显示Vue应用的效果。
this.$el.querySelector和document.querySelector的区别
最新发布
07-19
2. **关联**：`this.$el.querySelector`与Vue实例紧密相关，可以访问到Vue实例化的数据和生命周期钩子；而`document.querySelector`只提供基础的DOM检索功能。 3. **作用时机**：Vue版的查询是在实例化完成后，或者...
vue $mount 和 el的区别说明
10-14
在Vue的应用中，`$mount` 和 `el` 都与组件的挂载过程密切相关。挂载是将Vue实例与HTML DOM元素绑定，使得Vue能够控制和渲染指定的DOM区域。 **1. `$mount`** `$mount` 是Vue实例的一个方法，它的主要作用是将Vue...
$(this.el).html 与 this.$el.tml区别
夏己也是学习好青年
07-19 3516
转载自http://www.78oa.com/news/news882.html 包装元素与jQuery（或的Zepto）。所以，如果你的视图的HTML是这样的： <div id="myViewElement">   this.el引用该div 而$(this.el)将通过jq检索他等价的元素 $('#myViewElement'). this.el是
便利贴--8{dom是否渲染完成，用了ref，换成document.getElement是一样的}
hacker12356的博客
01-12 335
便利贴--8{dom是否渲染完成，用了ref，换成document.getElement是一样的}
vue中ref与document.getElementById()的使用
m0_52604918的博客
02-22 1906
ref、document.getElementById()
VUE $refs 与 $el 最强详解
热门推荐
不想成为可以改变世界的程序员，不是一个好程序员
03-01 3万+
$refs 与 $el 是什么？ 作用是什么? ref，$refs，$el ，三者之间的关系是什么？看本博主为您带来的最新文章，通过大量的列子来给你讲解，请带上你聪明的大脑，在这个过程中希望你可以举一反三。 ref (给元素或者子组件注册引用信息)就像你要给元素设置样式，就需要先给元素设定一个 class 一样，同理，你想获取哪个元素的 DOM，就给这个元素先设定一个 ref，其实这里和 JS 中的 document.各种方法获取 DOM 差不多，不过 ref 是访问 VUE 虚拟出来的DOM，...
js获取dom元素上所有的类名，添加类名，移除类名，切换类名(原生 js、 jquery)
猫巷的博客
06-20 9289
js获取dom元素的类名
vue组件中this和$el指向
weixin_43203982的博客
06-15 1万+
this指向组件的实例，$el用于获取Vue实例挂载的DOM元素，在mounted生命周期中才有效，之前的钩子函数内无效。如下代码所示，Vue脚手架中，$el指向当前组件template模板中的根标签。 <template> <div id="root"> <h1 @click="fn()"> Lorem, ipsum </h1> </div> </template> <script> e
DOM(Document Object Model)
m0_64986878的博客
07-28 243
DOM常见操作、如何获取元素、什么是事件，事件绑定方式，事件对象，元素盒子模型
vue面试题
weixin_59752945的博客
07-29 639
1.Vue与React 的区别？ Vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是的，vue采用自底向上增 的设计。vue的核心库只关注视图层 React是一个用用于构建用户界面的开源JavaScript库，主要用于构建UI 1.vue提供了一系列的api ， 而react 的api 很少 2.vue的思想是响应式的，也是基于是数据可变的，实现了数据的双向绑定，react整体是函数式的思想，是单项数据流，推崇结合immutable来实现数据不可...
vue获取dom元素节点并操作元素的样式（$el的用法操作元素样式）
weixin_70426591的博客
10-27 5308
vue中操作dom元素
Vue获取dom元素节点并操作元素的样式（$el的用法以及uni-app中操作元素样式）
qq_39224105的博客
12-29 9534
在vue中操作dom元素节点的样式有好几种方式这里我总结了两种 第一种： 1.获取到元素节点(这里通过this.$refs获取元素节点) this.$refs.xxxxx.$el 2.操作元素的样式 this.$refs.num1Underline.$el.style.transform = 'scaleX(1)'; 这种方法需要注意的是$el 用于获取vue挂载的实例的dom对象，如果不添加$el则获取不到style的属性值，会打印 TypeError: Cannot read property .
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值