VUE組件
模塊化 和 組件化 區(qū)別
- 模塊化：從
代碼角度分析問(wèn)題集灌，把可復(fù)用的代碼抽離為單獨(dú)的模塊 - 好處：方便程序員之間模塊調(diào)用悴侵，提高了代碼的復(fù)用率
- 組件化：從
頁(yè)面UI的角度分析問(wèn)題 - 好處：方便UI的重用
組件創(chuàng)建的三種方式
-
Vue.extend()返回一個(gè)組件的構(gòu)造器，包含一個(gè)對(duì)象類(lèi)型參數(shù)，用來(lái)配置，Vue.component()利用Vue.extend()返回的構(gòu)造器創(chuàng)建一個(gè)組件的實(shí)例壶辜。參數(shù)1：組件的名字，參數(shù)2：另一個(gè)組件的構(gòu)造器 - 直接使用
Vue.component()創(chuàng)建担租，第一種方式的簡(jiǎn)寫(xiě) - 通過(guò)指定模板創(chuàng)建
- 注意點(diǎn)：模板內(nèi)只能有一個(gè)根節(jié)點(diǎn)砸民，模板名如果用駝峰命名法，使用時(shí)應(yīng)該使用連字符連接
組件中使用指令和事件
- 在組件中使用數(shù)據(jù)
- 寫(xiě)在
Vue.extend()構(gòu)造器配置里面,它必須用一個(gè)函數(shù)奋救，返回一個(gè)對(duì)象,主要原因是在多處使用模板時(shí)岭参，改變數(shù)據(jù)時(shí)其他位置引用的話數(shù)據(jù)也會(huì)改變
- 寫(xiě)在
創(chuàng)建子組件
- 使用
components對(duì)象,寫(xiě)在與template同級(jí)的位置，內(nèi)部與創(chuàng)建新組件方法一致
父組件傳值給 子組件
- 在配置子組件中聲明
props尝艘，用來(lái)接收父組件傳遞過(guò)來(lái)的值演侯，props可以跟一個(gè)數(shù)組，里面的值是一個(gè)個(gè)的字符串背亥，可以當(dāng)屬性使用 - 在使用子組件使用時(shí)
v-bind指令給子組件的props里的屬性傳值 - 實(shí)驗(yàn)證明蚌本，子組件只能使用字符串拼接的方式，還沒(méi)找到指定模板創(chuàng)建傳值給父組件的方式
- 屬性綁定只能父向子傳遞普通數(shù)據(jù)隘梨，傳遞方法的引用必須使用
v-on的事件綁定機(jī)制
子組件傳值給父組件
- 在子組件內(nèi)部使用
$emit('eventName', params)自定義事件 - 在模板內(nèi)部調(diào)用事件，觸發(fā)父組件定義的函數(shù)
- 在父組件內(nèi)定義函數(shù)舷嗡，定義一個(gè)形參接收子組件傳輸?shù)闹?/li>
VUE生命周期函數(shù)
- 創(chuàng)建階段
-
beforeCreate()創(chuàng)建階段的第一個(gè)生命周期函數(shù)轴猎，在創(chuàng)建實(shí)例之前，并沒(méi)有什么卵用 -
created()創(chuàng)建階段的第二個(gè)步驟进萄，此時(shí)正在初始化data中的數(shù)據(jù)和methods的方法捻脖，這個(gè)函數(shù)執(zhí)行完后data和methods都可以使用了，經(jīng)常在這個(gè)函數(shù)中使用發(fā)送ajax請(qǐng)求 -
beforeMount()創(chuàng)建階段的第三個(gè)步驟中鼠，此時(shí)內(nèi)存中已經(jīng)有編譯好的模板字符串了可婶，但是還沒(méi)有渲染到瀏覽器，這是瀏覽器的內(nèi)容并不是真實(shí)的頁(yè)面 -
mounted()創(chuàng)建階段的最后一個(gè)生命周期函數(shù)援雇，表示頁(yè)面首次被渲染出來(lái)矛渴。如果項(xiàng)目中需要初始化某些JS插件，需要在mounted中進(jìn)行初始化，當(dāng)這個(gè)函數(shù)運(yùn)行完后創(chuàng)建階段已經(jīng)結(jié)束具温，進(jìn)入運(yùn)行階段中
-
- 運(yùn)行中階段
- 運(yùn)行中的函數(shù)會(huì)根據(jù)
data數(shù)據(jù)的變化有選擇性的執(zhí)行0次或多次蚕涤，運(yùn)行中這些操作本指向就是問(wèn)了保證 model 中數(shù)據(jù)和 View視圖層渲染的數(shù)據(jù)保持一致 -
beforeUpdate()數(shù)據(jù)更新之前，此時(shí)數(shù)據(jù)已經(jīng)是更新過(guò)的铣猩，頁(yè)面還是舊數(shù)據(jù) -
updated()當(dāng)執(zhí)行到updated時(shí)揖铜，數(shù)據(jù)已經(jīng)被渲染到頁(yè)面
- 運(yùn)行中的函數(shù)會(huì)根據(jù)
- 銷(xiāo)毀階段
-
beforeDestory()此時(shí)實(shí)例還沒(méi)有被銷(xiāo)毀，實(shí)例上所有數(shù)據(jù)監(jiān)聽(tīng)都正炒锩螅可用 -
destroyed()實(shí)例已經(jīng)被銷(xiāo)毀,vm已經(jīng)不在工作
-
