vue18-操作dom ref

最新推荐文章于 2024-04-19 11:24:31 发布
最新推荐文章于 2024-04-19 11:24:31 发布
阅读量205 收藏
点赞数
分类专栏： Vue 文章标签： vue ref 操作dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012326462/article/details/82828275
版权

首先看下面代码：

<!DOCTYPE html>
<html lang=en>
    <head>
        <meta charset="utf-8"/>
        <title>Hello world</title>
        <script src="vue.js"></script>
    </head>
    <body>
        <div id="root">
            <div ref="divEle" @click="handleClick">hello world</div>
        </div>


        <script>
            var vm = new Vue({
               el:"#root",
               methods:{
                handleClick: function(){
                    //VUE中操作dom的方法，获取标签对应的dom元素
                    //若在组件上用ref,获取的是组件的引用
                    console.log(this.$refs.divEle.innerHTML);
                }
               }
            })

        </script>
    </body>
</html>

在dom标签上加入ref属性，vue中就可以通过this.$refs.ref得到dom元素

 

 

 

 

一笑而过者也
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中ref实现对dom的操作
Xwz的博客
04-14 3354
1.获取页面中dom元素 通过在元素标签中配置ref属性后，我们可以通过this.$refs.refname来获取dom元素 <template> <div id="app"> <div ref="refname">123</div> <button @click="getTest">获取dom</button> </div> </template> <scr...
vue中ref引用操作DOM元素
zxdznyy的博客
09-28 5555
在javascript中，我们用原生的方式获取页面中的DOM元素，并操作它们。后来，有了jquery，jquery的强大就在于它可以很方便的操作DOM元素。在vue中，如何操作DOM元素呢？首先，在vue中强烈禁用原生与jquery来操作DOM元素。我们要充分的利用vue的优势：MVVM，在vue中程序员几乎不操作DOM，只需要维护好数据即可，vue给程序员提供ref引用，不调用api直接获取元素组件的使用在每个vue的组件实例上，都包含一个ref对象==存储着对应的==DOM。
13_vue属性ref操作DOM元素
最爱嫣夜来
10-28 1188
1、ref的作用 1）ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。 2）如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。 3）当 v-for 用于元素或组件的时候，引用信息将是包含 DOM 节点或组件实例的数组。 2、实例代码演示 <!DOCTYPE html> <html lan...
【使用 Vue 的 ref 和 $refs 进行 DOM 操作】
最新发布
武帝为此的博客
04-19 692
ref 是 Vue 提供的一个用于给子组件或 DOM 元素注册引用的特殊属性。通过 ref在父组件中直接访问子组件或 DOM 元素，并对其进行操作。
vue3中操作dom使用ref
enhenglhm的博客
11-21 1105
比如使得内容为大写 <h3 ref="upper">{{msg}}</h3> import {ref,onMounted} from 'vue' data(){ return { msg:'aaa' } }, 重点 setup(){ const upper=ref(null); onMounted(()=>{ var s=upper.value.innerHTML.toUpperCase(); upper.v
在Vue中使用ref获取dom元素节点及组件内的数据和方法
01-20
在Vue.js框架中，`ref`是一个非常重要的特性，它允许开发者引用Vue实例下的DOM元素或组件。通过`ref`，我们可以直接访问到这些元素或组件的实例，从而实现对它们的操作，包括读取数据、调用方法等。本文将详细讲解...
vue操作dom元素的3种方法示例
10-14
在Vue.js中，操作DOM（文档对象模型）并不是推荐的最佳实践，因为Vue的设计理念是基于数据驱动，提倡使用声明式渲染。然而，在某些特定场景下，我们确实需要直接操作DOM，比如实现某些复杂的交互效果。这里我们将...
Vue $refs操作 DOM实现组件传值
01-20
然而，Vue推崇声明式编程，鼓励避免直接操作DOM，因此$refs应谨慎使用，尽量作为最后一招。 **$refs的使用** 1. **在模板中定义ref** 在HTML模板中，我们可以给任何元素或组件添加一个`ref`属性，值为自定义的...
vue3-read源码.zip
08-21
4. **Ref和reactive API**：Vue 3中的`ref`和`reactive`API提供了更强大的响应式数据管理。`ref`用于创建可直接响应的引用，而`reactive`用于创建响应式对象。这些新工具让开发者可以更灵活地处理数据和状态。 5. *...
vue再读40-ref操作dom
qq_41632427的博客
07-26 105
vue
vue——34- ref 获取DOM元素和组件
肖的博客
10-16 546
html &lt;div id="app"&gt; &lt;login ref="mylogin"&gt;&lt;/login&gt; &lt;input type="button" value="获取元素" @click="getElement" ref="mybtn"&gt; &lt;h3
ref 引用(vue获取DOM元素）
weixin_47124112的博客
07-11 1万+
ref 用来辅助开发者在不依赖于 jQuery 的情况下，获取 DOM 元素或组件的引用。每个 vue 的组件实例上，都包含一个 $refs 对象，里面存储着对应的 DOM 元素或组件的引用。默认情况下， 组件的 $refs 指向一个空对象。凡是以$开头的都是vue的内置成员如果想要使用 ref 引用页面上的 DOM 元素，则可以按照如下的方式进行操作：如果想要使用 ref 引用页面上的组件实例，则可以按照如下的方式进行操作：通过布尔值 inputVisible 来控制组件中的文本框与按钮的按需切换。示例代
Vue I18n 国际化插件，从安装到使用最全篇
forever__fish的博客
11-12 2万+
国际化是指项目能够根据不同国家的语言进行转换，便于不同国家的用户使用。Vue I18 是 Vue.js 的国际化插件，它可以轻松地将一些本地化功能集成到应用程序中。为什么插件名称是 i18n 呢？它的全程是 internationalization，插件名取了首字母 i 和尾字母 n，中间一共有 18 个字母，所以组合起来就叫 i18n。哈哈哈哈，起名起的离谱。// 定义英文语言包对象},tabs: {// 定义中文语言包对象hotspot: '热点',experience: '经验',
Vue 国际化之 vue-i18n 的使用
热门推荐
高大志leo的博客
09-03 3万+
Vue 国际化之 vue-i18n，使用起来很简单。vue2、vue3 版本都在这儿，还有一些踩坑记录。
vue项目国际化(使用vue-i18n)
qq_44376306的博客
07-23 2万+
vue-i18n
Vue中怎么用$ref来操作dom
babyxuqian的博客
08-06 1975
ref前言 ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向该子组件实例 this.$refs前言 this.$refs是一个对象，持有当前组件中注册过 ref特性的所有 DOM 元素和子组件实例 具体的写法 Html部分：我们在html中写一个h1标签上面添加上ref=‘‘name’，在写一个点击事件，用来改变h1 <template> <d
vue中i18n的安装和几种和使用方式
m0_49016709的博客
04-21 2万+
vue+element+i18n在项目中配置多语言
通过Vue的ref操作DOM
EmotionComputer
01-15 5513
Vue的诞生原因之一就是为了解决原生Dom操作和jQuery操作Dom所带来的渲染卡慢问题，这里通过vue里的ref属性就可以拿到Dom节点并减少Dom节点的消耗。 html> head> meta charset="utf-8"> title>title> head> script type="text/javascript" src="vue.js">script> bod
vue2 使用ref获取并操作DOM元素
全易
07-05 6248
获取元素的方法有很多，但在vue中最好用vue提供的方法：ref。 如下图，给想要操作的标签一个属性ref，然后给个值（就是你起的名字，下面要通过这个名字获取，跟原生的方法中class、id似的) 起好名字后一定要去mounted钩子里操作，因为页面执行到这个钩子的时候已经渲染出DOM了。 如下图： 那么下载这个h3标签已经改成红色了 ...
vue中ref可以操作dom吗
05-10
Vue中的ref是用来给元素或组件注册一个引用...总之，ref提供了获取元素或组件的DOM的功能，但并不是Vue框架提供的专门用来操作DOM的API。如果你需要频繁地操作DOM，可以考虑使用Vue的计算属性或指令等更为优雅的方式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值