vueでdomを取得する方法

Vue.js では、DOM 要素を 4 つの方法で取得できます: ref を使用してコンポーネントまたは DOM 要素の参照を作成する; querySelector を使用して CSS セレクターに基づいて DOM 要素を取得する; getBoundingClientRect; イベントの発生時に、event.target を使用してイベントをトリガーした DOM 要素を取得します。

Vue での DOM の取得

Vue.js では、DOM 要素を取得する方法がいくつかあります。実際のニーズに合わせて。

1. ref

ref 属性を通じてコン​​ポーネントまたは 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 プロパティにはイベントをトリガーした DOM 要素が含まれます。

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

特定の状況に応じて、上記の方法に基づいて DOM 要素を取得するための最も適切な方法を選択できます。

以上がvueでdomを取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。