Comment ajouter du dom à vuejs

Comment ajouter dom à vuejs : 1. Créez d'abord une instance avec new ; 2. Montez-la manuellement sur le nœud dom ; 3. Utilisez "$appendTo/$before/$after" et d'autres méthodes pour interpoler.

L'environnement d'exploitation de cet article : système Windows 7, Vue version 2.9.6, ordinateur DELL G3

Comment ajouter un dom à vuejs ?

Comment insérer des nœuds dom à l'aide de vue.js

Cet article présente principalement Il n'y a pas grand chose à dire sur la méthode d'insertion de nœuds dom dans vue.js. Jetons un coup d'œil à l'introduction détaillée.

code html :

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

code 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

Description :

1. En comparant la méthode d'insertion du nœud dom de jquery, l'interpolation de vue.js doit utiliser new pour créer une instance d'abord, puis transmettez $mount() . $mount() 。

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

2. Montez-le manuellement sur le nœud dom, puis utilisez des méthodes telles que $appendTo/$before/$after pour effectuer interpolation.

3. Cette idée d'exploitation dom n'est en fait pas la façon dont vue préconise, mais la façon dont vue préconise est d'obtenir les résultats souhaités en manipulant les données.

4. L'idée de vue est que ce dom existe déjà, et vous pouvez contrôler son affichage et sa dissimulation par le biais du jugement.

5. Ainsi, lorsque vous utilisez vue, essayez de changer votre façon de penser lorsque vous utilisez jquery vers la méthode (v-if) fournie par l'API.

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

Vous pouvez également contrôler l'affichage et le masquage via (v-show) :

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

Ensuite, la différence entre v-if et v-show :

Lors du changement de bloc v-if, Vue.js a un Processus de compilation/désinstallation partielle, car les modèles dans v-if peuvent également inclure des liaisons de données ou des sous-composants.

v-if est un véritable rendu conditionnel, car il garantira que le bloc conditionnel détruit et reconstruit correctement les écouteurs d'événements et les sous-composants au sein du bloc conditionnel pendant le changement.

v-if est également paresseux : si la condition est fausse lors du rendu initial, rien n'est fait - la compilation partielle ne démarre que lorsque la condition devient vraie pour la première fois (la compilation est mise en cache).

En comparaison, v-show est beaucoup plus simple : les éléments sont toujours compilés et conservés, simplement commutés en fonction du CSS.

De manière générale, v-if a un coût de commutation plus élevé et v-show a un coût de rendu initial plus élevé. Donc, v-show est meilleur si vous devez changer fréquemment, v-if est meilleur s'il est peu probable que les conditions changent au moment de l'exécution.

Recommandé : "La dernière sélection de 5 didacticiels vidéo vue.js

"🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!