vuejsにdomを追加する方法

vuejs に dom を追加する方法: 1. new first でインスタンスを作成します; 2. 手動で dom ノードにマウントします; 3. "$appendTo/$before/$after" およびその他のメソッドを使用して補間します。

この記事の動作環境: Windows7 システム、Vue2.9.6 バージョン、DELL G3 パソコン

dom の追加方法vuejs?

vue.js を使って dom ノードを挿入する方法

この記事では主に vue.js で dom ノードを挿入する方法を紹介します。以下では多くを語らないので、詳しく紹介しましょう。

html コード:

<div id="app"></div>

js コード:

var MyComponent = Vue.extend({
 template: &#39;<p>Hello World</p>&#39;
})
var myAppendTo = Vue.extend({
template:&#39;<p>appendTo</p>&#39;
})
var myBefore = Vue.extend({
 template:&#39;<p>before</p>&#39;
})
var myAfter = Vue.extend({
 template:&#39;<p>after</p>&#39;
})
// 创建并挂载到 #app (会替换 #app)
new MyComponent().$mount(&#39;#app&#39;);

// 手动挂载
new myAppendTo().$mount().$appendTo(&#39;#app&#39;);//appendTo
new myBefore().$mount().$before(&#39;#app&#39;);//before
new myAfter().$mount().$after(&#39;#app&#39;);//after

説明:

1. jquery の dom ノードの挿入方法を比較すると、vue.js の補間では、まず new でインスタンスを作成し、次に $mount() を渡す必要があります。

2. 手動で dom ノードにマウントし、$appendTo/$before/$after## などのメソッドを使用します。 # 補間。

3. dom を操作するというこの考え方は、実際には vue が提唱する方法ではなく、データを操作することで望む結果を達成するという vue が提唱する方法です。

4. vue の考え方は、dom がすでに存在しており、判断によってその表示と非表示を制御できるというものです。

5. そこで、vueを使うときは、APIが提供するメソッド(v-if)のように、jqueryを使うときの考え方を変えてみてください。

<ul>
 <li v-if="ok">显示</li>
 <li v-else>隐藏</li>
</ul>

(v-show) を通じて表示と非表示を制御することもできます:

<ul>
 <li v-show="ok">显示</li>
</ul>

次に、v-if と v-show の違い:

v-if ブロックを切り替える場合、v-if のテンプレートにはデータ バインディングまたはサブコンポーネントも含まれる可能性があるため、Vue.js では部分的なコンパイル/アンロード プロセスが行われます。

v-if は true の条件付きレンダリングです。これは、切り替え中に条件付きブロックが条件付きブロック内のイベント リスナーとサブコンポーネントを適切に破棄して再構築することを保証するためです。

v-if も遅延型です。最初のレンダリングで条件が false の場合は、何も行われません。部分的なコンパイルは、条件が初めて true になったときにのみ開始されます (コンパイルはキャッシュされスタンドアップで行われます)。

それに比べて、v-show ははるかに単純です。要素は常にコンパイルされて保持され、CSS に基づいて切り替えるだけです。

一般に、v-if のスイッチング コストは高く、v-show の初期レンダリング コストは高くなります。したがって、頻繁に切り替える必要がある場合は v-show が適しており、実行時に条件が変化する可能性が低い場合は

v-if が適しています。

推奨: 「

最新の 5 つの vue.js ビデオ チュートリアル セレクション 」

以上がvuejsにdomを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。