Wie man Dom in Vue bekommt

In Vue.js können Sie DOM-Elemente auf vier Arten abrufen: Verwenden Sie ref, um eine Referenz für eine Komponente oder ein DOM-Element zu erstellen. Verwenden Sie querySelector, um DOM-Elemente zu erhalten, die auf CSS-Selektoren basieren event.target Ruft das DOM-Element ab, das das Ereignis ausgelöst hat, wenn das Ereignis auftritt.

DOM in Vue abrufen

In Vue.js gibt es je nach tatsächlichem Bedarf mehrere Möglichkeiten, DOM-Elemente abzurufen.

1. Erstellen Sie über das Attribut ref

ref einen Verweis auf die Komponente oder das DOM-Element. Innerhalb einer Komponente kann mit this.$refs auf Referenzen zugegriffen werden. Für DOM-Elemente können Sie $refs verwenden, um auf DOM-Knoten zuzugreifen. this.$refs 访问引用。对于 DOM 元素，可以使用 $refs 访问 DOM 节点。

<code class="javascript">// 组件中
<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></code>

2. 通过 querySelector

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

<code class="javascript">// 组件中
const myDiv = this.$el.querySelector('div');

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

3. 通过 getBoundingClientRect

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

<code class="javascript">// 组件中
const rect = this.$el.getBoundingClientRect();

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

4. 通过 event.target

当事件发生时，event.target

<code class="javascript">// 在事件处理函数中
const target = event.target;</code>

2. Verwenden Sie die Methode querySelector

🎜🎜querySelector, um DOM-Elemente basierend auf CSS-Selektoren abzurufen. 🎜rrreee🎜🎜3. Geben Sie über die Methode getBoundingClientRect🎜🎜🎜getBoundingClientRect ein DOMRect-Objekt zurück, das die umgebenden Rechteckinformationen des DOM-Elements enthält. 🎜rrreee🎜🎜4. Über event.target🎜🎜🎜Wenn ein Ereignis auftritt, enthält die Eigenschaft event.target das DOM-Element, das das Ereignis ausgelöst hat. 🎜rrreee🎜Abhängig von der spezifischen Situation können Sie basierend auf den oben genannten Methoden die am besten geeignete Methode zum Abrufen des DOM-Elements auswählen. 🎜

Das obige ist der detaillierte Inhalt vonWie man Dom in Vue bekommt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!