vue中怎麼取得節點

在 Vue 中取得節點的方法：直接存取 DOM 節點：使用 $el 存取元件根元素。使用 $refs：存取元件的子元素或根元素，需要使用 ref 指定名稱。使用渲染函數：在 render 函數中建立元素，並透過 vm.$vnode 存取 DOM 節點。使用第三方函式庫：例如 Vuetify 和 Element UI，可以分別透過 $el 和 $refs 存取 DOM 節點。

如何在 Vue 中取得節點？

直接存取 DOM 節點

• #$el: 存取元件根元素。
• $refs: 存取元件的子元素或根元素，需要在範本中使用 ref 屬性指定名稱。

使用渲染函數

• 在render 函數中，使用createElement# 函數建立元素，並將其作為v-node 傳回。
• 然後可以透過 vm.$vnode 存取 v-node，進而取得 DOM 節點。

使用第三方的函式庫

• Vuetify: 提供$el 屬性，可以透過this.$ el 存取DOM 節點。
• Element UI: 提供 $refs 屬性，可以透過 this.$refs 存取 DOM 節點。

範例：

• #直接存取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>

  登入後複製

• 使用渲染函數：

  <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>

  登入後複製

• 使用第三方函式庫：

  <code class="html"><template>
  <v-btn ref="button" @click="handleClick">Button</v-btn>
  </template>
  
  <script>
  import { Button } from 'vuetify';
  
  export default {
  components: { Button },
  methods: {
    handleClick() {
      console.log(this.$refs.button); // 获取 DOM 节点 <button>
    }
  }
  }
  </script></code>

  登入後複製

以上是vue中怎麼取得節點的詳細內容。更多資訊請關注PHP中文網其他相關文章！