Home > Web Front-end > Vue.js > body text

How to register components in vue.js

coldplay.xixi
Release: 2020-11-30 16:34:24
Original
3885 people have browsed it

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.

How to register components in vue.js

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>这是第一种方式</h3>&#39;
});
Vue.component("myCom1",com1);
Copy after login

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

<my-com1></my-com1>
Copy after login

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>这是第一种方式</h3>&#39;
});
Vue.component("mycom1",com1);
Copy after login

It is written like this in html:

<mycom1></mycom1>
Copy after login
Copy after login

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>这是第一种方式</h3>&#39;
}));
Copy after login

Second way: No need to extend

Write this in vue.js:

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

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>
Copy after login
Copy after login

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

write like this in vue.js :

Vue.component("mycom1",{
    template:&#39;#temp&#39;
});
Copy after login

Write the template structure in html:

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

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>这是局部template</h3></div>&#39;
        }
    }
});
Copy after login

Write in the html file:

<mycom1></mycom1>
Copy after login

The second type of partial registration:

Write like this in the js file:

var vm = new Vue({
    el:"#newBrand",
    data:{},
    components:{
        mycom1:{
            template: &#39;#temp&#39;
        }
    }
});
Copy after login

Writing in the html file:

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

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template