vue-setup中ref获取真实的dom元素节点

最新推荐文章于 2024-07-26 15:59:09 发布
最新推荐文章于 2024-07-26 15:59:09 发布
阅读量2.2k 收藏 3
点赞数 2
分类专栏： 前端 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39111074/article/details/121848701
版权

定义同步ref类型值 + HTML标签中的 ref 属性，两者配合获取 dom元素节点：

1.在模板的中，要获取的标签元素中加上 ref属性- - -ref=“名称”
2.在setup()函数中使用 同步数据ref，定义一个跟上面同名的变量，固定写法：

const hello = ref(null)

3.setup()将该字段返回

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>provide-inject数据传递与接收</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="root"></div>
</body>
<script>
  const app = Vue.createApp({
    setup() {
      const { ref, onMounted } = Vue
      // 下句固定写法，定义同步ref类型值 + HTML标签中的 ref 属性，两者配合获取 dom元素节点
      const hello = ref(null)
      onMounted(() => {
        console.log(hello.value)
      })
      return { hello }
    },
    template: `
    <div ref="hello">你好，波吉，我是卡克</div>
    `
  })
  const vm = app.mount('#root')
</script>
</html>

页面结果：

image.png

零OO
关注
专栏目录
vue3的composition API中通过ref操作dom
weixin_44747590的博客
07-02 898
vue2中可以直接使用this，但在 setup 中你应该避免使用 this，因为它不会找到组件实例。setup 的调用发生在 data property、computed property 或 methods 被解析之前，所以它们无法在 setup 中被获取。 setup 中ref操作dom的使用方法：需要在setup中先定义一个同名的ref(null)如下所示 <div> Vue 3 app <input ref="myinput" /> <button @cl
Vue3--ref使用（解决ref无法获取dom元素的问题）
web15285868498的博客
03-06 4209
众所周知在vue2中，ref主要的作用还是便于快速的获取dom元素或组件，因为ref操作相比document.getElementbyId会减少dom操作的节点消耗。 具体关于vue2中ref和$refs的使用，这篇文章写的十分全面： https://www.cnblogs.com/xumqfaith/p/7743387.html 本文还是针对Vue3中ref使用进行说明，重点是模板ref的使用。 1. ref用法1：基本类型封装，使数据响应式 vue3中为了节约资源，并不是全部数据都会进行响应式监听。.
setup里面获取dom元素
weixin_50736511的博客
04-20 1119
注意：ref=“变量” 变量=ref（null）变量.value这里的变量名称要一致
vue3获取、设置元素高度
最新发布
DN金猿的博客
07-26 2108
以上就是傻喵使用vue3来操作元素高度的总结，还有很多坑点需要去研究。也欢迎各位大大在评论区留言，指点一下。vue3获取、设置元素高度 - 掘金 (juejin.cn)
vue3在setup中获取DOM元素
weixin_44208404的博客
07-20 5331
调用它可以得到当前组件的实例对象，然后给要获取的元素添加ref，通过。vue3引入一个新的API。
在vue3setup语法糖中获取DOM元素
Langlous2000817的博客
08-06 2691
在vue3setup语法糖中获取DOM元素
vue3 setup 通过ref访问dom元素
FantasyWeirdo的博客
07-28 560
/ 初始值需要赋值为空，或者null, 变量名一定要和模版中的ref一致。// 此时在mounted周期中可以访问到ref。
vue3中用ref拿到dom元素
weixin_49343253的博客
03-23 3528
实现场景：有多个表单元素组件validate-input，内部可以实现验证功能（即验证表单输入是否满足条件），并且有返回值（true表示满足，false表示不满足），将他们包裹在一个父组件validate-form中，将父组件放在app.vue中，若想在app.vue中拿到父组件中的属性，则需要先获取到该元素节点。 这就需要在父组件中拿到子组件的dom节点 在vue2中，我们可以通过ref拿到一个元素节点 <div ref="myRef"></div> thi...
Web前端vue必做笔记之一：使用ref获取dom元素
qq_42302014的博客
11-25 401
Web前端vue必做笔记之一：使用ref获取dom元素 <template> <img ref="imgRef" alt="Vue logo" src="./assets/logo.png"> </template> <script> import {ref ,onMounted} from 'vue' export default { name:'App', setup(){ //templ
vue3+ts+cli：在setup中获取dom元素
weixin_44439874的博客
12-10 1574
在setup中获取dom元素，解决元素value值为null问题
如何在Vue3中使用Ref访问DOM元素
有我更精彩的博客
07-08 3155
ref在 Vue 3 中，ref是一个函数，用来创建一个可响应的引用对象。这个对象可以在模板中绑定到 DOM 元素，从而在组件的逻辑代码中方便地访问和操作这些元素。在 Vue 3 中，ref提供了一种简单而强大的方式来访问 DOM 元素和创建响应式数据。通过本文的介绍和示例代码，你应该对如何使用ref访问和操作 DOM 元素有了清晰的理解。最后问候亲爱的朋友们，并邀请你们阅读我的全新著作。
setup中使用ref
qq_45327886的博客
09-27 2471
setup及method中使用 ref；父组件使用子组件的方法和属性
【Vue】获取dom对象或者组件实例
qq_39921135的博客
06-15 229
概念：通过 ref标识 获取真实的 dom对象或者组件实例对象模版引用的时机：组件挂载完毕。
Vue3 setup 在渲染函数中通过ref访问Dom元素
僵小蛋的博客
04-30 7943
Vue3.0 中新增了Composition API , 在使用h函数渲染vnode时，如果需要使用ref, 和 vue2.0中有所不同。 先来看在 Vue3 如何在模版语法中使用ref（options语法中获取ref和2.0版本语法无差异） <template> <div ref="divRef">ref demo</div> </template> <script> import { ref, onMounted } from "vue";
利用ref进行dom操作
小弋的博客
05-31 1388
React中基本不需要直接操作DOM，但是有时候我们却不得不这么做，这个时候ref便出场了。ref有两种用法：1.通过函数进行绑定html： <input type="text" ref={(name)=>{this.name=name;}} js: let name=this.name.value;ref绑定的方法参数就是这个dom，将这个dom绑定到组件实例的自定义的属性上2.直接绑定到ref上
vue3的setup中如何用getElementById获取dom元素
the7thuni的博客
06-12 3601
在循环使用canvas时，给每个canvas设置了一个id，我想通过id来操作canvas，但是在setup中不能用原生的js获取dom元素， 于是就有了这篇文章。
在本机上使用VLC搭建RTSP服务端时ip选择问题以及SETUP请求时，服务端返回HTML页面
wflsyf的博客
05-28 387
VLC作为服务端，SETUP请求返回的是html网页解决 1、使用127.0.0.1作为rtsp中url的IP部分，而不是使用自己的电脑配置的ip。我在测试时如果不这样设置，VLC返回给我客户端返回的数据就是一个html页面的内容。 在偶然尝试中发现的这个问题解决方法，记录。 例如：url=rtsp://127.0.0.1:8554/my/trackID=1 ...
vue2和vue3获取当前组件对应的DOM元素，获取当前组件的refs，v-for循环中绑定ref
无心使然云中漫步
12-07 1770
Vue3.x中的核心方法：getCurrentInstance，用于获取当前组件的实例、上下文来操作router和vuex等。ctx 中包含了组件中由ref和reactive创建的响应式数据对象,以及以下对象及方法;
vue3中的setup
weixin_46376652的博客
07-31 9762
1、setup是vue3中的一个，值为一个；2、setup是所有（组合API）的基础，组件中所用到的等都需要在setup中进行配置；
vue3 ref怎么获取dom节点
03-29
在Vue 3中，ref不直接暴露DOM节点，但是可以通过ref的value属性获取DOM节点。例如： ```html <template> <div ref="myDiv">Hello World!</div> </template> <script> import { ref, onMounted } from 'vue' export default { setup() { const myDiv = ref(null) onMounted(() => { console.log(myDiv.value) // 输出DOM节点 }) return { myDiv } } } </script> ``` 在上面的代码中，我们使用ref创建了一个名为myDiv的引用，并将其绑定到模板中的div元素上。在setup函数中，我们使用onMounted钩子函数，在组件挂载后获取myDiv引用的DOM节点，并将其打印到控制台上。注意，需要使用value属性来获取DOM节点。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值