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 ノードにアクセスできます。

// 组件中   // DOM 元素 
 

2. querySelector

##querySelectorメソッドを使用して、CSS セレクターに基づいて DOM 要素を取得します。

// 组件中 const myDiv = this.$el.querySelector('div'); // DOM 元素 const myDiv = document.querySelector('div');

3. getBoundingClientRect

getBoundingClientRectメソッドを通じて、DOM 要素の境界四角形情報を含む DOMRect オブジェクトを返します。

// 组件中 const rect = this.$el.getBoundingClientRect(); // DOM 元素 const rect = document.myDiv.getBoundingClientRect();

4.event.target

event.targetプロパティにはイベントをトリガーした DOM 要素が含まれます。

// 在事件处理函数中 const target = event.target;

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