本文主要介紹了vue.js實例物件+元件樹的相關資料,需要的朋友可以參考下，希望能幫助到大家。
vue的實例物件
先用js的new關鍵字實例化一個vue
el: vue元件或物件裝載在頁面的位置，可透過id或class或標籤名稱
template: 裝載的內容。 HTML程式碼/包含指令或其他元件的HTML片段，template將是我們使用的模板
**data:** 資料透過data引入到元件中
在元件中的data要以函數的形式傳回數據，當不同的介面使用了同一個元件時，才不會以為一個元件的值改變而改變其他頁面的內容。
{{ }} 雙括號語法裡面放入資料的變數
#元件註冊語法糖
全域元件
A方法：
呼叫Vue.extend()方法建立元件建構器
呼叫Vue.component(元件標籤,元件建構器)方法註冊元件
在Vue實例的作用範圍內才能夠使用元件
/*A方法全局组件1:*/
//1.Vue.extend() 创建组件构造器
var mycomponent = Vue.extend({
/*组件内容*/
template:…… ,
data: ……
})
//2.Vue.component注册组件
Vue.component('my-component1', mycomponent);B方法（與A方法一樣，只是交簡單的寫法）：
沒有A方法中的第1步，直接呼叫Vue .component(標籤名，選項物件)方法
/*B方法 全局组件2:*/
Vue.component('my-component2', {
/*组件内容*/
template:…… ,
data: ……
}
/*在html中的组件调用，把组件标签直接用在html中相应的位置即可*/
<mycomponent1></mycomponent1>
<mycomponent2></mycomponent2>局部元件使用components屬性
"javascript
var partcomponent2 = {
el:…… ,
data: { …… }
}
new Vue({
el: '#app',
data: {
……
},
components: {
/* A方法： 局部组件1 /
'part-component1': partcomponent1
}，
/B方法 局部组件2 */
'part-component2':{
el:…… ,
data: { …… }
}
})
"子元件
建立方法和上面兩種方法類似，不同的是位置是放在組件內部。
var compentChild ={
el:……,
data:……
}
component: {
el: ……,
data: {……}
components: {
'component-child': componentChild
}
}內建元件
不需要在components裡面宣告元件。而是直接用標籤。例如在如下的myHeader中使用內建元件,root-view、keep-alived等也是vue本身提供的內建元件。
var myHeader = {
template: '<component></component> <root-view></rooot-view>'
}相關推薦：
以上是vue.js實例物件和組件樹實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
