How to register components in vue.js

How to register components in vue.js: 1. Use extend, the code is [var com1 = Vue.extend({template:'

This is the first way

' })]; 2. Define the external template element on the page.

The operating environment of this tutorial: windows10 system, vue2.5.2, this article is applicable to all brands of computers.

【Recommended related articles: vue.js】

How to register components in vue.js:

The first way extend:

Write like this in vue.js:

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

Note: myCom1 adopts the camel case naming method, so write like this in html:

<my-com1></my-com1>

Note: If you do not use camel case naming, it is written like this in js and html:

It is written like this in vue.js:

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

It is written like this in html:

<mycom1></mycom1>

You can not use intermediate variables above, that is, write the content of com1 directly in Vue.component("mycom1", com1), such as:

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

Second way: No need to extend

Write this in vue.js:

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

Note: No matter which way the component is created, there must be only one root element, that is, when there are multiple html elements, use A div package in

html still reads:

<mycom1></mycom1>

The third way: Define the external template element on the page

write like this in vue.js :

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

Write the template structure in html:

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

PS: The above is global registration, and the local registration is as follows:

The first local registration:

Write in the js file:

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

Write in the html file:

<mycom1></mycom1>

The second type of partial registration:

Write like this in the js file:

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

Writing in the html file:

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

Related free learning recommendations: JavaScript (video)

The above is the detailed content of How to register components in vue.js. For more information, please follow other related articles on the PHP Chinese website!