Bagaimana untuk mendapatkan dom dalam vue

Dalam Vue.js, anda boleh mendapatkan elemen DOM dalam empat cara: gunakan ref untuk membuat rujukan untuk komponen atau elemen DOM, gunakan querySelector untuk mendapatkan elemen DOM berdasarkan pemilih CSS; event.target Mendapat elemen DOM yang mencetuskan peristiwa apabila peristiwa itu berlaku.

Mendapatkan DOM dalam Vue

Dalam Vue.js, terdapat beberapa cara untuk mendapatkan elemen DOM, bergantung pada keperluan sebenar.

1 Cipta rujukan kepada komponen atau elemen DOM melalui atribut ref

. Dalam komponen, rujukan boleh diakses menggunakan this.$refs. Untuk elemen DOM, anda boleh menggunakan $refs untuk mengakses nod DOM. this.$refs 访问引用。对于 DOM 元素，可以使用 $refs 访问 DOM 节点。

// 组件中
<template>
    <div ref="myDiv"></div>
</template>
<script>
export default {
    mounted() {
        console.log(this.$refs.myDiv); // 获取 myDiv DOM 节点
    }
}
</script>

// DOM 元素
<div ref="myDiv"></div>
<script>
console.log(document.myDiv); // 获取 myDiv DOM 节点
</script>

2. 通过 querySelector

querySelector 方法可以根据 CSS 选择器获取 DOM 元素。

// 组件中
const myDiv = this.$el.querySelector('div');

// DOM 元素
const myDiv = document.querySelector('div');

3. 通过 getBoundingClientRect

getBoundingClientRect 方法返回一个包含 DOM 元素边界矩形信息的 DOMRect 对象。

// 组件中
const rect = this.$el.getBoundingClientRect();

// DOM 元素
const rect = document.myDiv.getBoundingClientRect();

4. 通过 event.target

当事件发生时，event.target

// 在事件处理函数中
const target = event.target;

2. Kaedah querySelector

🎜🎜querySelector boleh digunakan untuk mendapatkan elemen DOM berdasarkan pemilih CSS. 🎜rrreee🎜🎜3 Kembalikan objek DOMRect yang mengandungi maklumat segi empat tepat terikat bagi elemen DOM melalui kaedah getBoundingClientRect🎜🎜🎜getBoundingClientRect. 🎜rrreee🎜🎜4. Melalui event.target🎜🎜🎜Apabila peristiwa berlaku, sifat event.target mengandungi elemen DOM yang mencetuskan acara. 🎜rrreee🎜Bergantung pada situasi tertentu, anda boleh memilih kaedah yang paling sesuai untuk mendapatkan elemen DOM berdasarkan kaedah di atas. 🎜

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan dom dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!