Comment enregistrer des composants dans vue.js

Comment enregistrer des composants dans vue.js : 1. Utilisez extend, le code est [var com1 = Vue.extend({template:'

This is the first way

' } )]; 2. Définissez l'élément de modèle externe sur la page.

L'environnement d'exploitation de ce tutoriel : système windows10, vue2.5.2, cet article est applicable à toutes les marques d'ordinateurs.

[Articles connexes recommandés : vue.js]

Comment enregistrer des composants dans vue.js :

La première façon d'étendre :

Écrivez comme ceci dans vue.js :

var com1 = Vue.extend({
   template:&#39;<h3>这是第一种方式</h3>&#39;
});
Vue.component("myCom1",com1);

Remarque : myCom1 adopte la méthode de dénomination des cas de chameau, alors écrivez comme ceci en html :

<my-com1></my-com1>

Remarque : Si vous n'utilisez pas de nommage en cas de chameau, il est écrit comme ceci en js et html :

vue.js est écrit comme ceci :

var com1 = Vue.extend({
    template:&#39;<h3>这是第一种方式</h3>&#39;
});
Vue.component("mycom1",com1);

html est écrit comme ceci :

<mycom1></mycom1>

Vous ne pouvez pas utiliser de variables intermédiaires ci-dessus, c'est-à-dire écrire le contenu de com1 directement dans Vue.component("mycom1", com1), tel que :

Vue.component("mycom1",Vue.extend({
    template:&#39;<h3>这是第一种方式</h3>&#39;
}));

Deuxième méthode : pas besoin d'étendre

Écrivez ceci dans vue.js :

Vue.component("mycom1",{
    template:&#39;<div><h3>这是h3标签</h3><span>这是span标签</span></div>&#39;
});

Remarque : quelle que soit la manière dont le composant est créé, il ne doit y avoir qu'une seule racine élément, c'est-à-dire lorsqu'il y a plusieurs éléments html, utilisez Un div enveloppé dans

html lit toujours :

<mycom1></mycom1>

La troisième façon : définir l'élément de modèle externe sur la page

vue.js écrit comme ceci :

Vue.component("mycom1",{
    template:'#temp'
});

Écrire la structure du modèle en html :

<template id="temp">
    <h3>这是html中的temp</h3>
</template>

PS : ce qui précède est un enregistrement global, l'enregistrement local est le même suit :

Le premier type d'inscription locale :

Ecrivez dans le fichier js :

var vm = new Vue({
    el:"#newBrand",
    data:{},
    components:{
        mycom1:{
            template: &#39;<div><h3>这是局部template</h3></div>&#39;
        }
    }
});

Ecrivez dans le fichier html :

<mycom1></mycom1>

Le deuxième type d'inscription partielle :

Écrivez comme ceci dans le fichier js :

var vm = new Vue({
    el:"#newBrand",
    data:{},
    components:{
        mycom1:{
            template: '#temp'
        }
    }
});

Écrivez dans un fichier html :

<template id="temp">
    <div><h3>这是局部template啦</h3></div>
</template>

Recommandations d'apprentissage gratuites associées : JavaScript (vidéo)

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!