Vue3 Ref獲取真實DOM學習實戰(zhàn)
更新時間：2023年06月14日 10:00:39 作者：天問
這篇文章主要為大家介紹了Vue3 Ref獲取真實DOM學習實戰(zhàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
正文
在使用 Vue 、React 等MVVM框架開發(fā)項目時，基本上很少需要直接手動去操作 DOM 了，但是也不可避免，例如獲取元素的寬高、元素在屏幕的XY位置、DIV拖拽等等。隨著 Vue 版本的升級，在 Vue3 中獲取真實DOM的方法也有了變化。
Vue3 && DOM
一、前言
ref()：用于注冊元素或子組件的引用。接受一個內(nèi)部值，返回一個響應式的、可更改的 ref 對象，此對象只有一個指向其內(nèi)部值的屬性 .value。
二、ref獲取真實DOM
- 在選項式 API 中
<template>
<!-- 普通元素 -->
<div ref='eleBox' class='box'></div>
<!-- 子組件 -->
<ChildComponent ref='childCom' />
</template>
<script>
export default {
components: {
ChildComponent,
},
mounted() {
let eleBox = this.$refs.eleBox
// eleBox 就是獲取的真實DOM對象，可以進行DOM相關(guān)的操作
eleBox.style.backgroundColor = '#f0f'
// 獲取子組件實例
console.log(this.$refs.childCom)
}
}
</script>- 在組合式 API 中
<!-- 普通元素 -->
<div ref='eleBox' class='box'></div>
<!-- 子組件 -->
<ChildComponent :ref="(el) => childCom = el" />
<script setup>
import { ref } from 'vue'
let eleBox = ref()
// eleBox.value 就是獲取的真實DOM對象
eleBox.value.style.width = '200px'
let childCom = ref()
// childCom.value 就是獲取的子組件實例對象
</script>以上就是Vue3 Ref獲取真實DOM學習實戰(zhàn)的詳細內(nèi)容，更多關(guān)于Vue3 Ref獲取真實DOM的資料請關(guān)注腳本之家其它相關(guān)文章！
您可能感興趣的文章:
相關(guān)文章
VueRouter是Vue.js的官方路由插件,用于實現(xiàn)單頁應用的頁面切換和導航,通過安裝、配置路由規(guī)則、定義路由組件和使用&lt;router-link>、&lt;router-view>標簽2025-01-01
vue+element?tree懶加載更新數(shù)據(jù)的示例代碼
這篇文章主要介紹了vue+element?tree懶加載更新數(shù)據(jù),文中給大家補充介紹了Vue Element Ui 樹形表懶加載新增、修改、刪除等操作后局部數(shù)據(jù)更新的詳細代碼，感興趣的朋友跟隨小編一起看看吧2022-09-09
Vue?處理異步加載順序問題之如何在Konva中確保文本在圖片之上顯示
在處理Konva中的異步加載順序問題時,確保在圖像加載完成后再添加其他元素是關(guān)鍵,通過將回調(diào)函數(shù)放在imageObj.onload中,并正確處理變量捕獲,我們可以確保文本總是繪制在圖片之上,這不僅解決了顯示順序的問題,也為未來的調(diào)試提供了明確的方向,感興趣的朋友一起看看吧2024-07-07
Vue動態(tài)構(gòu)建混合數(shù)據(jù)Treeselect選擇樹及巨樹問題的解決
這篇文章主要介紹了Vue動態(tài)構(gòu)建混合數(shù)據(jù)Treeselect選擇樹及巨樹問題的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了解決vuecli3中img src 的引入問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue3純前端表格數(shù)據(jù)的導出與導入實現(xiàn)方式
這篇文章主要介紹了如何在純前端環(huán)境下使用xlsx-js-style庫進行Excel表格文件的下載,并自定義樣式,還提到了使用xlsx庫進行Excel表格數(shù)據(jù)的導入,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-01-01
這篇文章主要介紹了vue實現(xiàn)PC端分辨率適配操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue-router如何實時動態(tài)替換路由參數(shù)(地址欄參數(shù))
這篇文章主要介紹了vue-router如何實時動態(tài)替換路由參數(shù)(地址欄參數(shù))，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue 路由子組件created和mounted不起作用的解決方法
今天小編就為大家分享一篇vue 路由子組件created和mounted不起作用的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue-cli2,vue-cli3,vite?生產(chǎn)環(huán)境去掉console.log
console.log一般都是在開發(fā)環(huán)境下使用的,在生產(chǎn)環(huán)境下需要去除?,本文主要介紹了vue-cli2,vue-cli3,vite?生產(chǎn)環(huán)境去掉console.log,具有一定的參考價值,感興趣的可以了解一下2024-05-05