vue がマウントされた後でも変更できますか?

Vue.js は人気のあるフロントエンド フレームワークであり、その中心的な考え方はデータ駆動型でコンポーネント化されています。 Vue.jsでは、コンポーネント化されたページを簡単に構築でき、Vue.jsが提供するデータバインディング機能を利用してデータドライブを実現できます。

Vue.js では、通常、Vue オブジェクトをインスタンス化してルート コンポーネントをマウントし、レンダリングする DOM 要素を指定します。 Vue インスタンスがマウントされたら、ビューのレンダリングを開始し、データ バインディング機能を使用してデータをビューにバインドできます。

多くの場合、Vue インスタンスがマウントされた後に、マウントされた DOM 要素を変更する必要があります。たとえば、ボタンがクリックされた後に、ページにいくつかの新しい要素を追加したい場合があります。この場合、Vue インスタンスがマウントされた後に、マウントされた DOM 要素を変更できますか?この記事では、この質問に答え、対応する解決策を示します。

1. DOM 要素を直接変更する

最も簡単な方法は、JavaScript を通じて DOM 要素を直接操作し、DOM ノードを追加、削除、変更することです。ただし、Vue.js のデータ バインディングは仮想 DOM に基づいているため、この方法は Vue.js の設計思想には準拠しておらず、DOM 要素を直接操作すると、この操作は Vue.js によって監視されなくなります。したがって、レスポンシブアップデートを取得できなくなります。したがって、DOM 要素を直接操作しないでください。

2. DOM 要素を参照によって取得する

Vue インスタンスがマウントされた後、マウントされた DOM 要素を参照によって取得できます。この方法により、Vue.js が正常であることを確認できます。 。 仕事。ルート コンポーネントで ref 属性を定義し、$refs オブジェクトを使用してこの DOM 要素を参照するだけです。例:

<template>
  <div ref="root"></div>
</template>

ここでは、root という名前の ref 属性を定義し、それを空の div 要素にバインドします。

Vue インスタンスがマウントされると、$refs オブジェクトを通じてこの DOM 要素にアクセスできるようになります。たとえば、マウントされたライフサイクル フック関数の $refs.root を通じてこの要素にアクセスし、変更を加えることができます。例:

mounted() {
  const root = this.$refs.root
  root.innerHTML = '<p>Hello, world!</p>'
}

ここでは、マウントされたフック関数でルート コンポーネントの DOM 要素を取得し、そのコンテンツを「

Hello, world!

」に変更します。 innerHTML 属性。

3. Vue.js の非同期レンダリング メカニズムを介して DOM 要素を変更する

Vue.js バージョン 2.5 以降では、非同期レンダリング メカニズムがサポートされています。 Vue インスタンスがマウントされ、Vue.nextTick() メソッドを通じて DOM 要素が変更され、対応する応答更新を取得できます。例:

mounted() {
  this.$nextTick(() => {
    const root = this.$el
    root.innerHTML = '<p>Hello, world!</p>'
  })
}

ここでは、マウントされたフック関数で $nextTick メソッドを使用して、次の DOM 更新サイクルで DOM 操作を実行します。これにより、続行する前に DOM の更新が完了していることが保証され、Vue.js が適切に動作することが保証されます。

概要

Vue.js では、マウントされた DOM 要素を参照によって取得したり、非同期レンダリング メカニズムを通じて DOM 要素を変更したりできます。これにより、Vue.js が適切に動作し、それに応じて応答的に更新されることが保証されます。同時に、Vue.js のデータ バインディング メカニズムに損傷を与えたり、不要な問題を引き起こすことを避けるために、DOM 要素を直接操作することは避けてください。

以上がvue がマウントされた後でも変更できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。