ホームページ > ウェブフロントエンド > Vue.js > vueでノードを取得する方法

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

下次还敢
リリース: 2024-05-02 21:45:39
オリジナル
1096 人が閲覧しました

Vue でノードを取得する方法: DOM ノードに直接アクセス: $el を使用してコンポーネントのルート要素にアクセスします。 $refs を使用する: コンポーネントの子要素またはルート要素にアクセスするには、ref を使用して名前を指定する必要があります。 render 関数を使用する: render 関数で要素を作成し、vm.$vnode を通じて DOM ノードにアクセスします。 Vuetify や Element UI などのサードパーティ ライブラリを使用すると、それぞれ $el と $refs を通じて DOM ノードにアクセスできます。

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

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

関連ラベル:
vue
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート