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)建方法和上面兩種方法類似，不同的是位置是放在組件內(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)文章
這篇文章主要為大家介紹了Storybook?7.0?Beta?Vue3踩坑解決記錄詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
創(chuàng)建vue項(xiàng)目沒(méi)有router、view的解決辦法
在學(xué)習(xí)vue的時(shí)候遇到很多問(wèn)題,這里做一些總結(jié),下面這篇文章主要給大家介紹了關(guān)于創(chuàng)建vue項(xiàng)目沒(méi)有router、view文件夾的解決辦法,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
這篇文章主要介紹了Vue中data數(shù)據(jù)初始化方法，數(shù)據(jù)初始化是在組件實(shí)例化時(shí)發(fā)生的，在組件中，可以通過(guò)data選項(xiàng)來(lái)定義組件的初始數(shù)據(jù)，需要詳細(xì)了解可以參考下文2023-05-05
Vue基于vuex、axios攔截器實(shí)現(xiàn)loading效果及axios的安裝配置
這篇文章主要介紹了Vue基于vuex、axios攔截器實(shí)現(xiàn)loading效果及axios的安裝配置,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
這篇文章主要介紹了vue 微信授權(quán)解決方案，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
vue跳轉(zhuǎn)頁(yè)面打開(kāi)新窗口,并攜帶與接收參數(shù)方式
這篇文章主要介紹了vue跳轉(zhuǎn)頁(yè)面打開(kāi)新窗口，并攜帶與接收參數(shù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue封裝DateRangePicker組件流程詳細(xì)介紹
在后端管理項(xiàng)目中使用vue來(lái)進(jìn)行前端項(xiàng)目的開(kāi)發(fā)，但我們都知道Vue實(shí)際上無(wú)法監(jiān)聽(tīng)由第三方插件所引起的數(shù)據(jù)變化。也無(wú)法獲得JQuery這樣的js框架對(duì)元素值的修改的。而日期控件daterangepicker又基于JQuery來(lái)實(shí)現(xiàn)的2022-11-11
vscode 開(kāi)發(fā)Vue項(xiàng)目的方法步驟
這篇文章主要介紹了vscode 開(kāi)發(fā)Vue項(xiàng)目的方法步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
關(guān)于VUE點(diǎn)擊父組件按鈕跳轉(zhuǎn)到子組件的問(wèn)題及解決方案
本文主要介紹了在Vue框架中,如何通過(guò)父組件的點(diǎn)擊事件打開(kāi)子組件中的彈窗并展示表格內(nèi)容,主要步驟包括在父組件中定義數(shù)據(jù)屬性,創(chuàng)建并定義子組件的彈窗和表格內(nèi)容,通過(guò)props屬性和自定義事件實(shí)現(xiàn)父子組件間的數(shù)據(jù)傳遞和方法調(diào)用2024-10-10
vue多頁(yè)面項(xiàng)目開(kāi)發(fā)實(shí)戰(zhàn)指南
一般我們的vue項(xiàng)目都是單頁(yè)面的,其實(shí)因?yàn)関ue在工程化開(kāi)發(fā)的時(shí)候依賴了webpack,webpack幫我們將所有的資源整合到一起而形成一個(gè)單頁(yè)面,下面這篇文章主要給大家介紹了關(guān)于vue多頁(yè)面項(xiàng)目開(kāi)發(fā)的相關(guān)資料,需要的朋友可以參考下2022-01-01