Vue獲取DOM的幾種方法總結(jié)

更新時(shí)間：2022年10月13日 10:57:04 作者：燕穗子博客

這篇文章主要介紹了Vue獲取DOM的幾種方法總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

Vue獲取DOM的方法

Vue實(shí)現(xiàn)了MVVM模型，將數(shù)據(jù)和表現(xiàn)進(jìn)行了分離，我們只需要更新數(shù)據(jù)就能使DOM同步更新，但是某些情況下，還是需要獲取DOM元素進(jìn)行操作

本文主要介紹幾種在Vue中獲取DOM元素的方法

1、使用DOM API直接找元素

<script>
?? ?...
?? ?mounted () {
?? ??? ?let elm = this.$el.querySelector('#id')
?? ?}
</script>

Vue組件在patch階段結(jié)束時(shí)會(huì)把this.$el賦值為掛載的根dom元素，我們可以直接使用$el的querySelector, querySelectorAll等方法獲取匹配的元素。

2、refs

<template>
?? ?<div ref="bar">{{ foo }}</div>
?? ?<MyAvatar ref="avatar" />
?? ?...
</template>
<script>
?? ?...
?? ?mounted () {
?? ??? ?let foo = this.$refs['bar'] // 一個(gè)dom元素
?? ??? ?let avatar = this.$refs['avatar'] // 一個(gè)組件實(shí)例對(duì)象
?? ?}
</script>

使用組件實(shí)例的$refs即可拿到組件上ref屬性對(duì)應(yīng)的元素。

如果ref屬性加在一個(gè)組件上，那么拿到的是這個(gè)組件的實(shí)例，否則拿到的就是dom元素了。

3、使用自定義指令

Vue提供了自定義指令，官方文檔給出了如下的使用方法，其中el就是dom元素的引用

Vue.directive('focus', {
? // 當(dāng)被綁定的元素插入到 DOM 中時(shí)……
? inserted: function (el) {
? ? // 聚焦元素
? ? el.focus()
? }
})
?
// 在模板中
<template>
?? ?<input v-model="name" v-focus />
</template>

vue3.0獲取虛擬dom方法

最近使用vue3.0+vue-router4.x+element-plus ui框架聯(lián)合開發(fā)了一個(gè)小的商城項(xiàng)目，首先簡(jiǎn)單說(shuō)一下element-plus ui框架。

官網(wǎng)上介紹了element-plus ui框架適用于vue3.0開發(fā)pc端，使用時(shí)發(fā)現(xiàn)只是框架部分代碼可以拿來(lái)直接使用，但是其余的代碼還沒(méi)有更新

下面總結(jié)vue3.0遇到的一些問(wèn)題，老生長(zhǎng)談的就是虛擬dom的獲取相對(duì)于vue2.x來(lái)說(shuō)很是有點(diǎn)麻煩的，在vue2.x里面，我們只需在標(biāo)簽行內(nèi)添加ref屬性并賦值，那么我們就可以拿到這個(gè)dom節(jié)點(diǎn)，通過(guò)this.$refs.xxx即可拿到dom node

但是在vue3.0框架里面是解除了this這個(gè)對(duì)象，所以我們不能在使用this.$refs來(lái)獲取dom，那么我們?cè)鯓硬拍苣玫絛om節(jié)點(diǎn)呢？請(qǐng)看下面的代碼(請(qǐng)不要忘記像vue2.x那樣在需要獲取dom的標(biāo)簽上添加ref屬性并賦值)

下面是傳統(tǒng)組合式api獲取虛擬dom方法：

<template>
? ? <div>
? ? ? ? <div class="box" ref="goodInfo"></div>
? ? </div>
</template>
<script>
import { onMounted, ref, reactive,nextTick } from 'vue'
export default{
?
? ? setup(){
? ? //獲取dom
? ? let goodInfo=ref(null)
? ? // 狗子函數(shù)mounted
? ? onMounted(()=>{
? ? ? GetGoodDetail()
? ? ? console.log(goodInfo,'獲取dom節(jié)點(diǎn)');
? ? ? console.log(goodInfo.value,'獲取該dom節(jié)點(diǎn)的值');
? ? ? console.log(goodInfo.value.offsetHeight,'獲取該dom節(jié)點(diǎn)的高度');
? ? })
? ? return {
? ? ? // dom對(duì)象
? ? ? goodInfo
? ? ? }
? }
?
}
</script>

補(bǔ)充一下：我們要通過(guò)ref這個(gè)vue3.0內(nèi)置的方法向變量注入一個(gè)值，然后在鉤子函數(shù)onMounted中獲取我們想要得到的dom節(jié)點(diǎn)上的值，設(shè)置簡(jiǎn)單變量的值用ref,取值要用value來(lái)取，也就是上面代碼顯示的要得到該dom的高度我們要使用goodInfo.value.offsetHeight即可，

注意：不要忘記把獲取dom節(jié)點(diǎn)變量丟出來(lái)o，否則會(huì)報(bào)錯(cuò)，因?yàn)槲覀儌鹘ogoodInfo變量的值是null,而null是沒(méi)有value的,

接下來(lái)介紹另外一種方式獲取dom，語(yǔ)法糖：<script setup> 獲取dom ，請(qǐng)看代碼：

<template>
? ? <div class="container" v-wechat-title="$route.meta.title">
? ? ? ??
? ? <div class="tree_box">
? ? ? ? <el-tree accordion ref="treeRef" :data="myData.treeData" :props="treeProps" :current-node-key="myData.curId" node-key="id" @node-click="methods.handleNodeClick"
? ? ? ? ? ? highlight-current />
? ? </div>
</div>
</template>
?
<script setup>
?
import { ref,reactive, onMounted,nextTick } from 'vue';
//創(chuàng)建變量treeRef并賦值，同時(shí)html模板<el-tree ref="treeRef" />上的ref=treeRef,這樣才可以獲取到該dom節(jié)點(diǎn)。獲取dom節(jié)點(diǎn)還是要treeRef.value才可以
let treeRef=ref(null)
?
const myData=reactive({
? ? curId:''
})
//配置el-tree--props
const treeProps = {
? ? children: 'children',
? ? label: 'title',
? ? value:'id',
}
onMounted(() => {
? ? //默認(rèn)展開el-tree指定的節(jié)點(diǎn)
? ? nextTick(() => {
? ? ? ?myData.curId=3
? ? ? ?treeRef.value.setCurrentKey(myData.curId)
? ? })
})
?
</script>

總結(jié)一下：vue3.x 語(yǔ)法糖方式獲取dom

首先：創(chuàng)建變量treeRef并賦值