vueでノードを取得する方法

Vue でノードを取得する方法: DOM ノードに直接アクセス: $el を使用してコンポーネントのルート要素にアクセスします。 $refs を使用する: コンポーネントの子要素またはルート要素にアクセスするには、ref を使用して名前を指定する必要があります。 render 関数を使用する: 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: this に渡すことができる $el 属性を提供します.$ el DOM ノードにアクセスします。
• Element UI: this.$refs を通じて DOM ノードにアクセスできる $refs 属性を提供します。

#例:

• 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 中国語 Web サイトの他の関連記事を参照してください。