So fügen Sie Dom zu VueJS hinzu

So fügen Sie dom zu vuejs hinzu: 1. Erstellen Sie zuerst eine Instanz mit new;

Die Betriebsumgebung dieses Artikels: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer

Wie füge ich Dom zu VueJS hinzu?

So fügen Sie Dom-Knoten mit vue.js ein

Dieser Artikel stellt hauptsächlich vor. Über die Methode zum Einfügen von Dom-Knoten in vue.js gibt es nicht viel zu sagen. Schauen wir uns die ausführliche Einführung an.

HTML-Code:

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

js-Code:

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

Beschreibung:

1. Beim Vergleich der Einfügemethode des Dom-Knotens von jquery muss bei der Interpolation von vue.js new verwendet werden, um eine Instanz zu erstellen zuerst und übergeben Sie dann $mount() . $mount() 。

2.手动挂载到dom节点中，然后使用$appendTo/$before/$after

2. Mounten Sie es manuell auf dem Dom-Knoten und führen Sie es dann mit Methoden wie $appendTo/$before/$after aus Interpolation.

3. Diese Idee, Dom zu betreiben, ist eigentlich nicht die Art und Weise, wie Vue sie befürwortet, sondern die Art und Weise, wie Vue sie befürwortet, darin, durch die Manipulation von Daten die gewünschten Ergebnisse zu erzielen.

4. Die Idee von Vue ist, dass dieser Dom bereits existiert und Sie seine Anzeige und sein Verstecken durch Urteilsvermögen steuern können.

5. Wenn Sie also Vue verwenden, versuchen Sie, Ihre Denkweise bei der Verwendung von JQuery auf die von der API bereitgestellte Methode (v-if) umzustellen.

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

Sie können das Ein- und Ausblenden auch über (V-Show) steuern:

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

Dann ist der Unterschied zwischen V-IF und V-Show:

Beim Wechseln von V-IF-Blöcken hat Vue.js eine teilweiser Kompilierungs-/Deinstallationsprozess, da Vorlagen in v-if auch Datenbindungen oder Unterkomponenten enthalten können.

v-if ist echtes bedingtes Rendering, da dadurch sichergestellt wird, dass der bedingte Block die Ereignis-Listener und Unterkomponenten innerhalb des bedingten Blocks während des Wechsels ordnungsgemäß zerstört und neu aufbaut.

v-if ist auch faul: Wenn die Bedingung beim ersten Rendern falsch ist, wird nichts unternommen – die Teilkompilierung beginnt erst, wenn die Bedingung zum ersten Mal wahr wird (Kompilierung wird zwischengespeichert).

Im Vergleich dazu ist v-show viel einfacher – Elemente werden immer kompiliert und beibehalten, nur einfach basierend auf CSS umgeschaltet.

Im Allgemeinen hat v-if höhere Wechselkosten und v-show hat höhere anfängliche Renderingkosten. V-show ist also besser, wenn Sie häufig wechseln müssen, v-if ist besser, wenn sich die Bedingungen zur Laufzeit wahrscheinlich nicht ändern.

Empfohlen: „Die neueste Auswahl von 5 vue.js-Video-Tutorials

“🎜

Das obige ist der detaillierte Inhalt vonSo fügen Sie Dom zu VueJS hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!