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

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!