vue.js中註冊元件的方法：1、使用extend，程式碼為【var com1 = Vue.extend({template:'
這是第一種方式
' })】；2、在頁面上定義外部template元素。
本教學操作環境：windows10系統、vue2.5.2，本文適用於所有品牌的電腦。
【相關文章推薦：vue.js】
#vue.js中註冊元件的方法：
第一種方式extend:
vue.js中這樣寫：
var com1 = Vue.extend({
template:'<h3>这是第一种方式</h3>'
});
Vue.component("myCom1",com1);註：myCom1是採用駝峰的命名方式，所以html中這樣寫：
<my-com1></my-com1>
註：如果不採用駝峰命名方式，js和html中這樣寫：
vue.js中這樣寫：
var com1 = Vue.extend({
template:'<h3>这是第一种方式</h3>'
});
Vue.component("mycom1",com1);html中寫法：
<mycom1></mycom1>
上面可以不使用中間變量，也就是把com1的內容直接寫在Vue.component(“mycom1”,com1)裡面，如：
Vue.component("mycom1",Vue.extend({
template:'<h3>这是第一种方式</h3>'
}));第二種方式：不用extend
vue.js中這樣寫：
Vue.component("mycom1",{
template:'<div><h3>这是h3标签</h3><span>这是span标签</span></div>'
});註：不論是哪一種方式創建出來的元件，必須只有一個根元素，也就是多個html元素的時候，要用一個div包裹
html中依舊寫成：
<mycom1></mycom1>
第三種：在頁面上定義外部template元素
vue.js中這樣寫：
Vue.component("mycom1",{
template:'#temp'
});html中寫template結構：
<template id="temp">
<h3>这是html中的temp</h3>
</template>PS：以上是全域註冊，局部註冊如下：
第一種局部註冊：
js檔案中寫：
var vm = new Vue({
el:"#newBrand",
data:{},
components:{
mycom1:{
template: '<div><h3>这是局部template</h3></div>'
}
}
});html檔案中寫：
<mycom1></mycom1>
第二種局部註冊：
js檔案中這樣寫：
var vm = new Vue({
el:"#newBrand",
data:{},
components:{
mycom1:{
template: '#temp'
}
}
});html檔案中寫法：
<template id="temp">
<div><h3>这是局部template啦</h3></div>
</template>#相關免費學習推薦：JavaScript（影片）
以上是vue.js中如何註冊元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！
