Vue3獲取DOM節(jié)點的3種方式實例
更新時間：2023年02月23日 08:53:52 作者：小花睡不醒
Vue本來無需操作DOM來更新界面,而且Vue也不推薦我們直接操作DOM,但是我們非要拿到DOM操作DOM怎么辦,下面這篇文章主要給大家介紹了關(guān)于Vue3獲取DOM節(jié)點的3種方式,需要的朋友可以參考下
1 .原生js獲取 DOM 節(jié)點：
document.querySelector(選擇器) document.getElementById(id選擇器) document.getElementsByClassName(class選擇器) ....
2. vue2中獲取當(dāng)前組件的實例對象：
因為每個 vue 的組件實例上，都包含一個 $refs 對象，里面存儲著對應(yīng)的 DOM 元素或組件的引用。所以在默認情況下， 組件的 $refs 指向一個空對象 。
可以先在組件上加上 ref="名字" ，然后通過 this.$refs.名字 獲取相應(yīng)元素并進行操作。
<template>
<div class="box">
<h1 ref="divDom">這是一個測試樣例</h1>
<button ref="but">按鈕</button>
</div>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
showThis(){
// h1的實例對象
console.log(this);
this.$refs.divDom.style.color='yellow'
//引用到組件的實例之后，也可以調(diào)用組件上的 methods方法
this.$refs.but.click();
},
},
}
</script>3.vue3中獲取當(dāng)前組件的實例對象：
在Vue3框架里面是解除了this這個對象，所以無法使用this.$refs的方式獲取自定義組件 ref 的DOM節(jié)點。
但是vue3中自帶了能返回當(dāng)前組件實例對象的函數(shù) getCurrentInstance，通過該函數(shù)獲取對象節(jié)能看到該對象包含界面中的refs。
<template>
<div ref="divDom"></div>
</template>
<script setup>
import { ref, getCurrentInstance } from 'vue';
const divDom = ref(null);
onMounted(()=>{
console.log('獲取dom元素',divDom)
})
// 獲取頁面的實例對象
const pageInstance = getCurrentInstance();
// 獲取dom節(jié)點對象
const tagDomObj = pageInstance.refs.divDom;
</script>總結(jié)
到此這篇關(guān)于Vue3獲取DOM節(jié)點的3種方式的文章就介紹到這了,更多相關(guān)Vue3獲取DOM節(jié)點內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Electron 如何調(diào)用本地模塊的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要給大家介紹了關(guān)于Vue獲取表單數(shù)據(jù)的多種方式,在Vue中我們通常使用v-model命令綁定表單的屬性值(通常是value),獲取到的屬性值就是表單數(shù)據(jù),需要的朋友可以參考下2023-09-09
Vue3?實現(xiàn)驗證碼倒計時功能(刷新保持狀態(tài))
倒計時的運用場景是需要經(jīng)常用到的，但是根據(jù)業(yè)務(wù)的不同，好比手機驗證碼或者是郵箱驗證碼之類的，即使用戶跳轉(zhuǎn)到其它頁面或者刷新，再次回到登錄也，驗證碼的倒計時也得保持狀態(tài),下面通過本文給大家分享Vue3?驗證碼倒計時功能實現(xiàn)，感興趣的朋友一起看看吧2022-08-08
解決vue前端文件上傳報錯:上傳失敗,原因:413 Request Entity Too&
這篇文章主要介紹了解決vue前端文件上傳報錯:上傳失敗,原因:413 Request Entity Too Large,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
我們在使用element-ui的時候經(jīng)常會遇到需要修改組件默認樣式,下面這篇文章主要給大家介紹了關(guān)于element-ui中樣式覆蓋問題的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-03-03
el-date-picker設(shè)置日期默認值兩種方法(當(dāng)月月初至月末)
這篇文章主要給大家介紹了關(guān)于el-date-picker設(shè)置日期默認值(當(dāng)月月初至月末)的相關(guān)資料,文中通過代碼示例將解決的辦法介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了VUE子組件的watch不被觸發(fā)問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue css 引入asstes中的圖片無法顯示的四種解決方法
這篇文章主要介紹了vue css 引入asstes中的圖片 無法顯示的幾種解決方案,本文給出了四種解決方法，每種方法給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-03-03
如何解決模塊““vue“”沒有導(dǎo)出的成員“ref”問題
這篇文章主要介紹了如何解決模塊““vue“”沒有導(dǎo)出的成員“ref”問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
使用typescript構(gòu)建Vue應(yīng)用的實現(xiàn)
這篇文章主要介紹了使用typescript構(gòu)建Vue應(yīng)用的實現(xiàn),文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08