Comment avoir dom en vue

Dans Vue.js, vous pouvez obtenir des éléments DOM de quatre manières : utilisez ref pour créer une référence pour un composant ou un élément DOM ; utilisez querySelector pour obtenir des éléments DOM basés sur des sélecteurs CSS ; obtenez les informations du rectangle de délimitation de l'élément DOM via getBoundingClientRect ; use event.target Obtient l'élément DOM qui a déclenché l'événement lorsque celui-ci se produit.

Obtenir du DOM dans Vue

Dans Vue.js, il existe plusieurs façons d'obtenir des éléments DOM, en fonction des besoins réels.

1. Créez une référence au composant ou à l'élément DOM via l'attribut ref

ref. Au sein d'un composant, les références sont accessibles en utilisant this.$refs. Pour les éléments DOM, vous pouvez utiliser $refs pour accéder aux nœuds DOM. 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. La méthode querySelector

🎜🎜querySelector peut être utilisée pour obtenir des éléments DOM basés sur des sélecteurs CSS. 🎜rrreee🎜🎜3. Renvoyez un objet DOMRect contenant les informations du rectangle englobant de l'élément DOM via la méthode getBoundingClientRect🎜🎜🎜getBoundingClientRect. 🎜rrreee🎜🎜4. Via event.target🎜🎜🎜Lorsqu'un événement se produit, la propriété event.target contient l'élément DOM qui a déclenché l'événement. 🎜rrreee🎜En fonction de la situation spécifique, vous pouvez choisir la méthode la plus appropriée pour obtenir l'élément DOM en fonction de la méthode ci-dessus. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!