Comment Vue.js implémente le rendu des modèles dans le navigateur

Cet article présente comment Vue.js implémente le rendu des modèles dans le navigateur. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Rendu. : Obtenez les données back-end, chargez-les dans le modèle écrit selon certaines règles et affichez-les au format HTML affiché dans le navigateur. vue.js est un rendu de modèle effectué sur le front-end (c'est-à-dire dans le navigateur). .

Comparaison du rendu front-end et back-end

Back-end : le rendu est effectué côté serveur une fois que le processus serveur a obtenu les données de. la base de données, il utilise le moteur de modèle frontal pour charger les données. Le HTML est généré, puis transmis au navigateur de l'utilisateur via le réseau, puis analysé en pages visibles par le navigateur.

Front-end : utilisez JS pour combiner des données et des modèles HTML dans le navigateur.

Les avantages du rendu front-end sont :

1. Séparation des activités, le back-end n'a besoin que de fournir une interface de données, et le front-end n'en a pas besoin pendant le développement. Déployez l'environnement back-end correspondant et utilisez certains outils de serveur proxy pour accéder à distance aux données back-end pour le développement, ce qui peut améliorer l'efficacité du développement.
2. La quantité de calcul est transférée. Les tâches qui nécessitaient initialement un rendu back-end sont transférées vers le front-end, réduisant ainsi la pression sur le serveur.

Avantages du rendu back-end

1.
2. Le temps de chargement de la page d'accueil est court. Le HTML sera affiché directement après le chargement du rendu back-end, mais le rendu front-end a encore besoin d'un certain temps de rendu js une fois le chargement terminé.

Rendu conditionnel

1.v-if/v-else

Déterminer s'il faut afficher le nœud DOM en fonction de la valeur des données , et Contient des éléments enfants.

    <p v-if="yes">yes</p> //若当前vm实例中包含data.yes = true，则模板引擎将会编译这个DOM节点，输出<p>yes</p>
    <p v-if="yes">yes</p>
    <p v-else>no</p>    //注：v-else必须紧跟v-if使用。v-if绑定的元素包含子元素则不影响和v-else的使用。

    <p v-if="yes">
        <p v-if="inner">inner</p>
        <p v-else>not inner </p>
    </p>
    <p v-else>no</p>    new Vue({
        data: {
            yes: true,
            inner :false
        }
    })

Le résultat de sortie est :

    <p>
        <p>not inner</p>
    </p>

2.v-show

    <p v-show="show">show</p>
    <p v-show="show">show</p>
    <p v-else>hidden</p>

Remarque : élément v-show, que la valeur de liaison soit ou non est vrai ou faux, sera rendu et conservé dans le DOM. La modification de la valeur de liaison change uniquement l'affichage de l'attribut CSS de l'élément. v-if élément, la page n'affichera pas cette étiquette.

3.v-if vs v-show

1. Lorsque v-if est commuté, cela entraîne des changements dans le niveau de fonctionnement du dom. v-show n'a changé que le style. Par conséquent, du point de vue de la commutation, v-show consomme moins de performances que v-if.

2. Lorsque v-if est commuté, vue.js aura un processus de compilation/désinstallation partielle, car le modèle dans v-if peut également inclure une liaison de données ou des sous-composants. v-show effectuera toujours les opérations normales, puis définira le style CSS pour afficher : aucun.

En général, v-if a un coût de commutation plus élevé et v-show a un coût de rendu initial plus élevé. Par conséquent, il est nécessaire de choisir l’instruction appropriée en fonction du scénario d’utilisation réel.

Rendu de liste

L'instruction v-for est principalement utilisée pour le rendu de liste. Elle restituera à plusieurs reprises l'élément DOM lié à v-for et les enfants internes en fonction. l'élément de tableau reçu, et vous pouvez obtenir les données dans le tableau et les restituer dans le nœud en définissant un alias.

    v-for遍历数组：    <ul>
        <li v-for="item in items">
            <h3>{{ item.title}}</h3>
            <p>{{item.description}}</p>
        </li>
    </ul>
    var vm = new Vue({
        el: &#39;#app&#39;,        data: {
            items: [
                {_id:1,title:"title-1",description:"description-1"},
                {_id:2,title:"title-2",description:"description-2"},
                {_id:3,title:"title-3",description:"description-3"},
                {_id:4,title:"title-4",description:"description-4"},            ]
        }
    });

//items est le nom de l'attribut dans data, et item est un alias. Vous pouvez utiliser item pour obtenir chaque élément traversé par le tableau actuel.

v-for a une variable $index intégrée, qui peut être appelée dans l'instruction v-for pour afficher l'index de l'élément actuel du tableau.
De plus, nous pouvons également créer notre propre alias pour l'index :

    <li v-for="(index,item) in items">{{ index }} - {{ $index }} - {{ item.title }}</li>

Remarque : vue.js encapsule la méthode native du tableau dans data, il peut donc déclencher une mise à jour de la vue lors d'un changement le tableau, mais les mises à jour de View ne peuvent pas être déclenchées dans les deux situations suivantes :
1. Modifiez les éléments du tableau directement via l'index, par exemple : vm.items[0] = {title:'title-changed'}; 2. Impossible de modifier directement la longueur de "Modifier le tableau", par exemple : vm.items.length = 0

Pour le premier cas, Vue.js fournit la méthode $set pour mettre à jour la vue tout en modifiant les données, qui peut s'écrire comme :

    vm.items.$set(0,{title:'title-changed'})  
 或者  vm.$set('items[0]',{title:'title-also-changed'});

Lors du rendu de la liste, déterminez l'ID unique dans le tableau. Définissez un identifiant unique pour le tableau via trace-by. Vue.js tentera de réutiliser la portée de l'objet d'origine et les éléments DOM pendant le processus de rendu.

    <li v-for="item in items" track-by="_id"></p>

v-for parcourt l'objet. La variable intégrée $key est accessible dans la portée, ou la variable clé peut être personnalisée sous la forme de (clé, valeur).

    <li v-for="(key,value) in objectDemo">
        {{ key }} - {{ $key }} : {{ value }}    </li>
    var vm = new Vue({
        el:&#39;#app&#39;,        data: {
            objectDemo : {
                a:&#39;a-value&#39;,
                b:&#39;b-value&#39;,
                c:&#39;c-value&#39;
            }
        }
    })

v-for peut accepter un seul entier, utilisé comme nombre de boucles :

    <li v-for="n in 5">{{ n }}</li>

utilisation de la balise de modèle

Appliquer l'instruction de balise de modèle, mais elle ne sera pas incluse dans le résultat final du rendu.

    <template v-if="yes">
        <p>this is first dom</p>
        <p>this is second dom</p>
    </template>
    //输出结果    <p>this is first dom</p>
    <p>this is second dom</p>template标签也支持使用v-for指令，用来渲染同级的多个兄弟元素。    <template v-for="item in items">
        <p>{{ item.name }}</p>
        <p>{{ item.desc }}</p>
    </template>

Recommandations associées :

Modèles front-end et rendu

Utilisation détaillée du moteur de rendu de modèles jquery jtemplates.js

Conception et mise en œuvre du modèle + rendu de séparation des données méthode

flask utilise un modèle de rendu

Programme WeChat Mini - Rendu de modèles de structures de données complexes

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!