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:'<h3>这是第一种方式</h3>' }); 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:'<h3>这是第一种方式</h3>' }); 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:'<h3>这是第一种方式</h3>' }));
Second way: No need to extend
Write this in vue.js:
Vue.component("mycom1",{ template:'<div><h3>这是h3标签</h3><span>这是span标签</span></div>' });
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>这是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: '<div><h3>这是局部template</h3></div>' } } });
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>这是局部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!