Vue에서 DOM을 얻는 방법

Vue.js에서는 네 가지 방법으로 DOM 요소를 얻을 수 있습니다. ref를 사용하여 구성 요소 또는 DOM 요소에 대한 참조를 생성하고, querySelector를 사용하여 CSS 선택기를 기반으로 DOM 요소 경계 사각형 정보를 얻습니다. event.target 이벤트가 발생할 때 이벤트를 트리거한 DOM 요소를 가져옵니다.

Vue에서 DOM 가져오기

Vue.js에는 실제 필요에 따라 DOM 요소를 가져오는 여러 가지 방법이 있습니다.

1 ref

ref 속성을 통해 구성 요소 또는 DOM 요소에 대한 참조를 만듭니다. 구성 요소 내에서 this.$refs를 사용하여 참조에 액세스할 수 있습니다. DOM 요소의 경우 $refs를 사용하여 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. CSS 선택기를 기반으로 DOM 요소를 가져오려면 querySelector

🎜🎜querySelector 메서드를 사용하세요. 🎜rrreee🎜🎜3. getBoundingClientRect🎜🎜🎜getBoundingClientRect 메소드를 통해 DOM 요소의 경계 사각형 정보가 포함된 DOMRect 객체를 반환합니다. 🎜rrreee🎜🎜4. via event.target🎜🎜🎜이벤트가 발생하면 event.target 속성에는 이벤트를 트리거한 DOM 요소가 포함됩니다. 🎜rrreee🎜특정 상황에 따라 위의 방법을 기반으로 DOM 요소를 얻는 가장 적절한 방법을 선택할 수 있습니다. 🎜

위 내용은 Vue에서 DOM을 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!