Vue3獲取DOM節(jié)點的方式有哪些
May 11, 2023 pm 04:55 PM
1 .原生js獲取 DOM 節(jié)點：
document.querySelector(選擇器) document.getElementById(id選擇器) document.getElementsByClassName(class選擇器) ....
2. vue2中獲取當前組件的實例對象：
因為每個 vue 的組件實例上，都包含一個 $refs 對象，里面存儲著對應的 DOM 元素或組件的引用。所以在默認情況下， 組件的 $refs 指向一個空對象 。
可以先在組件上加上 ref="名字" ，然后通過 this.$refs.名字 獲取相應元素并進行操作。
<template>
<div class="box">
<h2 ref="divDom">這是一個測試樣例</h2>
<button ref="but">按鈕</button>
</div>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
showThis(){
// h2的實例對象
console.log(this);
this.$refs.divDom.style.color='yellow'
//引用到組件的實例之后，也可以調(diào)用組件上的 methods方法
this.$refs.but.click();
},
},
}
</script>3.vue3中獲取當前組件的實例對象：
在Vue3框架里面是解除了this這個對象，所以無法使用this.$refs的方式獲取自定義組件 ref 的DOM節(jié)點。
但是vue3中自帶了能返回當前組件實例對象的函數(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>以上是Vue3獲取DOM節(jié)點的方式有哪些的詳細內(nèi)容。更多信息請關注PHP中文網(wǎng)其他相關文章！
熱AI工具
Undress AI Tool
免費脫衣服圖片
Undresser.AI Undress
人工智能驅動的應用程序，用于創(chuàng)建逼真的裸體照片
AI Clothes Remover
用于從照片中去除衣服的在線人工智能工具。
Clothoff.io
AI脫衣機
Video Face Swap
使用我們完全免費的人工智能換臉工具輕松在任何視頻中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的代碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
功能強大的PHP集成開發(fā)環(huán)境
Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具
SublimeText3 Mac版
神級代碼編輯軟件(SublimeText3)
Vue3如何實現(xiàn)刷新頁面局部內(nèi)容
May 26, 2023 pm 05:31 PM
想要實現(xiàn)頁面的局部刷新，我們只需要實現(xiàn)局部組件（dom）的重新渲染。在Vue中，想要實現(xiàn)這一效果最簡便的方式方法就是使用v-if指令。在Vue2中我們除了使用v-if指令讓局部dom的重新渲染，也可以新建一個空白組件，需要刷新局部頁面時跳轉至這個空白組件頁面，然后在空白組件內(nèi)的beforeRouteEnter守衛(wèi)中又跳轉回原來的頁面。如下圖所示，如何在Vue3.X中實現(xiàn)點擊刷新按鈕實現(xiàn)紅框范圍內(nèi)的dom重新加載，并展示對應的加載狀態(tài)。由于Vue3.X中scriptsetup語法中組件內(nèi)守衛(wèi)只有o
Vue3怎么解析markdown并實現(xiàn)代碼高亮顯示
May 20, 2023 pm 04:16 PM
Vue實現(xiàn)博客前端，需要實現(xiàn)markdown的解析，如果有代碼則需要實現(xiàn)代碼的高亮。Vue的markdown解析庫有很多，如markdown-it、vue-markdown-loader、marked、vue-markdown等。這些庫都大同小異。這里選用的是marked，代碼高亮的庫選用的是highlight.js。具體實現(xiàn)步驟如下：一、安裝依賴庫在vue項目下打開命令窗口，并輸入以下命令npminstallmarked-save//marked用于將markdown轉換成htmlnpmins
vue3+vite:src使用require動態(tài)導入圖片報錯怎么解決
May 21, 2023 pm 03:16 PM
vue3+vite:src使用require動態(tài)導入圖片報錯和解決方法vue3+vite動態(tài)的導入多張圖片vue3如果使用的是typescript開發(fā)，就會出現(xiàn)require引入圖片報錯，requireisnotdefined不能像使用vue2這樣imgUrl:require(’…/assets/test.png’)導入，是因為typescript不支持require所以用import導入，下面介紹如何解決：使用awaitimport
Vue3中怎么實現(xiàn)選取頭像并裁剪
May 29, 2023 am 10:22 AM
最終效果安裝VueCropper組件yarnaddvue-cropper@next上面的安裝值針對Vue3的，如果時Vue2或者想使用其他的方式引用，請訪問它的npm官方地址:官方教程。在組件中引用使用時也很簡單，只需要引入對應的組件和它的樣式文件，我這里沒有在全局引用，只在我的組件文件中引入import{userInfoByRequest}from'../js/api'import{VueCropper}from'vue-cropper&
怎么使用vue3+ts+axios+pinia實現(xiàn)無感刷新
May 25, 2023 pm 03:37 PM
vue3+ts+axios+pinia實現(xiàn)無感刷新1.先在項目中下載aiXos和pinianpmipinia--savenpminstallaxios--save2.封裝axios請求-----下載js-cookienpmiJS-cookie-s//引入aixosimporttype{AxiosRequestConfig,AxiosResponse}from"axios";importaxiosfrom'axios';import{ElMess
Vue3復用組件怎么使用
May 20, 2023 pm 07:25 PM
前言無論是vue還是react，當遇到多處重復代碼的時候，我們都會想著如何復用這些代碼，而不是一個文件里充斥著一堆冗余代碼。實際上，vue和react都可以通過抽組件的方式來達到復用，但如果遇到一些很小的代碼片段，你又不想抽到另外一個文件的情況下，相比而言，react可以在相同文件里面聲明對應的小組件，或者通過renderfunction來實現(xiàn)，如：constDemo:FC=({msg})=>{returndemomsgis{msg}}constApp:FC=()=>{return(
vue3怎么使用vueup/vue-quill富文本并限制輸入字數(shù)
May 20, 2023 pm 04:16 PM
一、效果展示二、npmnpminstall@vueup/vue-quill@alpha--save三、main.js引入import{QuillEditor}from'@vueup/vue-quill'import'@vueup/vue-quill/dist/vue-quill.snow.css';app.component('QuillEditor',QuillEditor)四、頁面使用{{TiLe
Vue3中如何使用defineCustomElement定義組件
May 28, 2023 am 11:29 AM
使用Vue構建自定義元素WebComponents是一組web原生API的統(tǒng)稱，允許開發(fā)者創(chuàng)建可復用的自定義元素(customelements)。自定義元素的主要好處是，它們可以在使用任何框架，甚至是在不使用框架的場景下使用。當你面向的最終用戶可能使用了不同的前端技術棧，或是當你希望將最終的應用與它使用的組件實現(xiàn)細節(jié)解耦時，它們會是理想的選擇。Vue和WebComponents是互補的技術，Vue為使用和創(chuàng)建自定義元素提供了出色的支持。你可以將自定義元素集成到現(xiàn)有的Vue應用中，或使用Vue來構
