Dalam Vue.js, anda boleh mendapatkan elemen DOM dalam empat cara: gunakan ref untuk membuat rujukan untuk komponen atau elemen DOM, gunakan querySelector untuk mendapatkan elemen DOM berdasarkan pemilih CSS; event.target Mendapat elemen DOM yang mencetuskan peristiwa apabila peristiwa itu berlaku.
Mendapatkan DOM dalam Vue
Dalam Vue.js, terdapat beberapa cara untuk mendapatkan elemen DOM, bergantung pada keperluan sebenar.
1 Cipta rujukan kepada komponen atau elemen DOM melalui atribut ref
. Dalam komponen, rujukan boleh diakses menggunakan this.$refs
. Untuk elemen DOM, anda boleh menggunakan $refs
untuk mengakses nod 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. Kaedah querySelector
🎜🎜querySelector
boleh digunakan untuk mendapatkan elemen DOM berdasarkan pemilih CSS. 🎜rrreee🎜🎜3 Kembalikan objek DOMRect yang mengandungi maklumat segi empat tepat terikat bagi elemen DOM melalui kaedah getBoundingClientRect🎜🎜🎜getBoundingClientRect
. 🎜rrreee🎜🎜4. Melalui event.target🎜🎜🎜Apabila peristiwa berlaku, sifat event.target
mengandungi elemen DOM yang mencetuskan acara. 🎜rrreee🎜Bergantung pada situasi tertentu, anda boleh memilih kaedah yang paling sesuai untuk mendapatkan elemen DOM berdasarkan kaedah di atas. 🎜Atas ialah kandungan terperinci Bagaimana untuk mendapatkan dom dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!