当前位置 : 主页 > 网络编程 > JavaScript >

Vue获取DOM的几种方法总结

来源:互联网 收集:自由互联 发布时间:2023-02-08
目录 Vue获取DOM的方法 1、使用DOM API直接找元素 2、refs 3、使用自定义指令 vue3.0获取虚拟dom方法 Vue获取DOM的方法 Vue实现了MVVM模型,将数据和表现进行了分离,我们只需要更新数据就能使
目录
  • 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才可以 

    以上为个人经验,希望能给大家一个参考,也希望大家多多支持易盾网络。

    网友评论