Vue获取DOM的几种方法总结

目录

• Vue获取DOM的方法
• 1、使用DOM API直接找元素
• 2、refs
• 3、使用自定义指令
• vue3.0获取虚拟dom方法

Vue获取DOM的方法

Vue实现了MVVM模型，将数据和表现进行了分离，我们只需要更新数据就能使DOM同步更新，但是某些情况下，还是需要获取DOM元素进行操作

本文主要介绍几种在Vue中获取DOM元素的方法

1、使用DOM API直接找元素

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

Vue组件在patch阶段结束时会把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'] // 一个dom元素
        let avatar = this.$refs['avatar'] // 一个组件实例对象
    }
</script>

使用组件实例的$refs即可拿到组件上ref属性对应的元素。

如果ref属性加在一个组件上，那么拿到的是这个组件的实例，否则拿到的就是dom元素了。

3、使用自定义指令

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

Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})
 
// 在模板中
<template>
    <input v-model="name" v-focus />
</template>

vue3.0获取虚拟dom方法

最近使用vue3.0+vue-router4.x+element-plus ui框架联合开发了一个小的商城项目，首先简单说一下element-plus ui框架。

官网上介绍了element-plus ui框架适用于vue3.0开发pc端，使用时发现只是框架部分代码可以拿来直接使用，但是其余的代码还没有更新

下面总结vue3.0遇到的一些问题，老生长谈的就是虚拟dom的获取相对于vue2.x来说很是有点麻烦的，在vue2.x里面，我们只需在标签行内添加ref属性并赋值，那么我们就可以拿到这个dom节点，通过this.$refs.xxx即可拿到dom node

但是在vue3.0框架里面是解除了this这个对象，所以我们不能在使用this.$refs来获取dom，那么我们怎样才能拿到dom节点呢？请看下面的代码(请不要忘记像vue2.x那样在需要获取dom的标签上添加ref属性并赋值)

下面是传统组合式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)
    // 狗子函数mounted
    onMounted(()=>{
      GetGoodDetail()
      console.log(goodInfo,'获取dom节点');
      console.log(goodInfo.value,'获取该dom节点的值');
      console.log(goodInfo.value.offsetHeight,'获取该dom节点的高度');
    })
    return {
      // dom对象
      goodInfo
      }
  }
 
}
</script>

补充一下：我们要通过ref这个vue3.0内置的方法向变量注入一个值，然后在钩子函数onMounted中获取我们想要得到的dom节点上的值，设置简单变量的值用ref,取值要用value来取，也就是上面代码显示的要得到该dom的高度我们要使用goodInfo.value.offsetHeight即可，

注意：不要忘记把获取dom节点变量丢出来o，否则会报错，因为我们传给goodInfo变量的值是null,而null是没有value的,

接下来介绍另外一种方式获取dom，语法糖：<script setup> 获取dom ，请看代码：

<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';
//创建变量treeRef并赋值，同时html模板<el-tree ref="treeRef" />上的ref=treeRef,这样才可以获取到该dom节点。获取dom节点还是要treeRef.value才可以
let treeRef=ref(null)
 
const myData=reactive({
    curId:''
})
//配置el-tree--props
const treeProps = {
    children: 'children',
    label: 'title',
    value:'id',
}
onMounted(() => {
    //默认展开el-tree指定的节点
    nextTick(() => {
       myData.curId=3
       treeRef.value.setCurrentKey(myData.curId)
    })
})
 
</script>

总结一下：vue3.x 语法糖方式获取dom

首先：创建变量treeRef并赋值

let treeRef=ref(null)

其次：html模板<el-tree ref="treeRef" />上的ref=treeRef

最后：获取dom节点还是要treeRef.value才可以

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。