Bagaimana untuk mendapatkan nod dalam vue

Kaedah untuk mendapatkan nod dalam Vue: Akses terus nod DOM: Gunakan $el untuk mengakses elemen akar komponen. Gunakan $refs: Untuk mengakses elemen anak atau elemen akar komponen, anda perlu menggunakan ref untuk menentukan nama. Gunakan fungsi render: Cipta elemen dalam fungsi render dan akses nod DOM melalui vm.$vnode. Menggunakan perpustakaan pihak ketiga: seperti Vuetify dan UI Element, nod DOM boleh diakses melalui $el dan $refs masing-masing.

Bagaimana untuk mendapatkan nod dalam Vue?

Akses terus ke nod DOM

• $el: Akses elemen akar komponen. $el: 访问组件根元素。
• $refs: 访问组件的子元素或根元素，需要在模板中使用 ref 属性指定名称。

使用渲染函数

• 在 render 函数中，使用 createElement 函数创建元素，并将其作为 v-node 返回。
• 然后可以通过 vm.$vnode 访问 v-node，进而获取 DOM 节点。

使用第三方的库

• Vuetify: 提供 $el 属性，可以通过 this.$el 访问 DOM 节点。
• Element UI: 提供 $refs 属性，可以通过 this.$refs
$refs: Untuk mengakses elemen anak atau elemen akar komponen, anda perlu menentukan nama menggunakan atribut ref dalam templat.

Gunakan fungsi render

• Dalam fungsi render, gunakan fungsi createElement untuk mencipta elemen dan hantarkannya sebagai v-node kembali. <strong></strong>Kemudian anda boleh mengakses <code>v-node melalui vm.$vnode untuk mendapatkan nod DOM.

• Gunakan perpustakaan pihak ketiga

Vuetify: Menyediakan atribut $el, yang boleh mengakses nod DOM melalui this.$el.

• UI Elemen: Menyediakan atribut $refs, yang boleh mengakses nod DOM melalui this.$refs.

Contoh:

🎜🎜🎜🎜🎜Akses terus ke nod DOM: 🎜🎜

<code class="html"><template>
<div id="app">Hello</div>
</template>

<script>
export default {
mounted() {
  console.log(this.$el); // 获取 DOM 节点 <div id="app">
}
}
</script></code>

🎜🎜🎜🎜Gunakan fungsi pemaparan: 🎜🎜🎜 perpustakaan y: 🎜🎜

<code class="html"><template>
<div>Hello</div>
</template>

<script>
export default {
render(h) {
  return h('div', 'Hello');
},
mounted() {
  console.log(this.$vnode.elm); // 获取 DOM 节点 <div>
}
}
</script></code>

🎜🎜

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan nod dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!