So registrieren Sie Komponenten in vue.js

So registrieren Sie Komponenten in vue.js: 1. Verwenden Sie „extend“, der Code lautet [var com1 = Vue.extend({template:'

This is the first way

'})]; . Definieren Sie externe Vorlagenelemente auf der Seite.

Die Betriebsumgebung dieses Tutorials: Windows10-System, vue2.5.2, dieser Artikel gilt für alle Computermarken.

【Empfohlene verwandte Artikel: vue.js】

vue.js-Methode zum Registrieren von Komponenten:

Die erste Möglichkeit zur Erweiterung:

vue.js schreibt Folgendes:

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

Hinweis: myCom1 verwendet die Benennungsmethode für Kamelfälle, daher wird sie in HTML wie folgt geschrieben:

<my-com1></my-com1>

Hinweis: Wenn die Benennungsmethode für Kamelfälle nicht verwendet wird, wird sie in js und HTML wie folgt geschrieben:

vue.js wird wie folgt geschrieben:

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

in HTML geschrieben:

<mycom1></mycom1>

Sie können das Obige tun, ohne Zwischenvariablen zu verwenden, dh den Inhalt von com1 direkt in Vue.component("mycom1", com1) schreiben, z : Keine Erweiterung erforderlich

vue.js Schreiben Sie so:

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

Hinweis: Egal auf welche Weise die Komponente erstellt wird, es darf nur ein Stammelement vorhanden sein, das heißt, wenn mehrere HTML-Elemente vorhanden sind, müssen sie vorhanden sein mit einem div umschlossen

Der HTML-Code schreibt immer noch:

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

Dritter Typ: Externe Vorlagenelemente auf der Seite definieren

vue.js schreibt so:

<mycom1></mycom1>

Vorlagenstruktur in HTML schreiben:

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

PS: Das Obige ist eine globale Registrierung, die lokale Registrierung lautet wie folgt:

Die erste lokale Registrierung:

js-Datei schreibt:

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

html-Datei schreibt:

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

Die zweite Art der Teilregistrierung:

js-Datei schreibt:

<mycom1></mycom1>

html-Datei schreibt:

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

Verwandtes kostenloses Lernen Empfohlen:

JavaScript(Video)

Das obige ist der detaillierte Inhalt vonSo registrieren Sie Komponenten in vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!