vue.js實(shí)例對(duì)象+組件樹(shù)的詳細(xì)介紹
vue的實(shí)例對(duì)象
首先用js的new關(guān)鍵字實(shí)例化一個(gè)vue
el: vue組件或?qū)ο笱b載在頁(yè)面的位置，可通過(guò)id或class或標(biāo)簽名
template: 裝載的內(nèi)容。HTML代碼/包含指令或者其他組件的HTML片段，template將是我們使用的模板
**data:** 數(shù)據(jù)通過(guò)data引入到組件中
在組件中的data要以函數(shù)的形式返回?cái)?shù)據(jù)，當(dāng)不同的界面用了同一個(gè)組件時(shí)，才不會(huì)以為一個(gè)組件的值發(fā)生改變而改變其他頁(yè)面的內(nèi)容。
{{ }} 雙括號(hào)語(yǔ)法里面放入數(shù)據(jù)的變量
組件注冊(cè)語(yǔ)法糖
全局組件
A方法：
調(diào)用Vue.extend()方法創(chuàng)建組件構(gòu)造器
調(diào)用Vue.component(組件標(biāo)簽,組件構(gòu)造器)方法注冊(cè)組件
在Vue實(shí)例的作用范圍內(nèi)才能夠使用組件
/*A方法全局組件1:*/
//1.Vue.extend() 創(chuàng)建組件構(gòu)造器
var mycomponent = Vue.extend({
/*組件內(nèi)容*/
template:…… ,
data: ……
})
//2.Vue.component注冊(cè)組件
Vue.component('my-component1', mycomponent);
B方法（與A方法一樣，只是交簡(jiǎn)單的寫(xiě)法）：
沒(méi)有A方法中的第1步，直接調(diào)用Vue.component(標(biāo)簽名，選項(xiàng)對(duì)象)方法
/*B方法 全局組件2:*/
Vue.component('my-component2', {
/*組件內(nèi)容*/
template:…… ,
data: ……
}
/*在html中的組件調(diào)用，把組件標(biāo)簽直接用在html中相應(yīng)的位置即可*/
<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: { …… }
}
})
```
子組件
創(chuàng)建方法和上面兩種方法類(lèi)似，不同的是位置是放在組件內(nèi)部。
var compentChild ={
el:……,
data:……
}
component: {
el: ……,
data: {……}
components: {
'component-child': componentChild
}
}
內(nèi)置組件
不需要在components里面聲明組件。而是直接用標(biāo)簽。例如在如下的myHeader中使用內(nèi)置組件,root-view、keep-alived等也是vue本身提供的一個(gè)內(nèi)置組件。
var myHeader = {
template: '<component></component> <root-view></rooot-view>'
}
總結(jié)
以上所述是小編給大家介紹的vue.js實(shí)例對(duì)象+組件樹(shù)的詳細(xì)介紹，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
vue與django(drf)實(shí)現(xiàn)文件上傳下載功能全過(guò)程
最近簡(jiǎn)單的學(xué)習(xí)了django和drf上傳文件(主要是圖片),做一個(gè)記錄,下面這篇文章主要給大家介紹了關(guān)于vue與django(drf)實(shí)現(xiàn)文件上傳下載功能的相關(guān)資料,需要的朋友可以參考下2023-02-02
這篇文章主要為大家詳細(xì)介紹了vue的ElementUI表格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02
vue中使用cookies和crypto-js實(shí)現(xiàn)記住密碼和加密的方法
這篇文章給大家介紹一下關(guān)于vue中使用cookies和crypto-js如何實(shí)現(xiàn)密碼的加密與記住密碼，有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你們有所幫助。2018-10-10
Vue實(shí)現(xiàn)移動(dòng)端拖拽交換位置
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)移動(dòng)端拖拽交換位置，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07
vue cli如何配置開(kāi)發(fā)環(huán)境下的sourcemap
這篇文章主要介紹了vue cli如何配置開(kāi)發(fā)環(huán)境下的sourcemap問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
vue 路由傳參的使用場(chǎng)景一般都是應(yīng)用在父路由跳轉(zhuǎn)到子路由時(shí),攜帶參數(shù)跳轉(zhuǎn),傳參方式可劃分為 params 傳參和 query 傳參,本文將給大家介紹如何通過(guò)不同方式在 Vue 3 中傳遞路由參數(shù),需要的朋友可以參考下2024-07-07
這篇文章主要給大家介紹了關(guān)于Vue-CLI多頁(yè)分目錄打包的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
Vue3中虛擬dom轉(zhuǎn)成真實(shí)dom的過(guò)程詳解
Vue.js?在其運(yùn)行過(guò)程中會(huì)將模板編譯成虛擬?DOM?(VNode),然后再將?VNode?渲染成實(shí)際的?DOM?節(jié)點(diǎn),這個(gè)過(guò)程是由?Vue?內(nèi)部的編譯器和渲染系統(tǒng)完成的,本文給大家介紹了Vue3中虛擬dom轉(zhuǎn)成真實(shí)dom的過(guò)程,需要的朋友可以參考下2024-09-09
Vue 動(dòng)態(tài)生成數(shù)據(jù)字段的實(shí)例
這篇文章主要介紹了Vue 動(dòng)態(tài)生成數(shù)據(jù)字段的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要給大家介紹了關(guān)于如何基于Vue-cli快速搭建項(xiàng)目的完整步驟，文中通過(guò)示例代碼以及圖片將搭建的步驟一步步介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11