一、實(shí)現(xiàn)靜態(tài)組件
組件要按照功能點(diǎn)拆分，命名不要與HTML元素沖突。
-
1、根據(jù)
UI提供的原型圖，進(jìn)行結(jié)構(gòu)設(shè)計，結(jié)構(gòu)設(shè)計的粒度以是否方便給組件起名字為依據(jù)。并梳理好對應(yīng)組件的層級依賴關(guān)系。 -
2、設(shè)計好結(jié)構(gòu)后，開始寫對應(yīng)的組件，并根據(jù)梳理好的層級關(guān)系，對應(yīng)引入組件。
-
3、根據(jù)UI提供的靜態(tài)
HTML、CSS代碼，進(jìn)行模版結(jié)構(gòu)的拆分以及組件標(biāo)簽的替換。并同時調(diào)試效果。3.1)、把
HTML中的body里面的div內(nèi)容，直接全部拷貝到App.vue組件中。3.2)、把
CSS中的樣式代碼，全部拷貝到App.vue組件中。3.3)、利用瀏覽器
F12查看相應(yīng)結(jié)構(gòu)對應(yīng)的div，然后，將該div剪切到對應(yīng)的組件template區(qū)域。并將App.vue中對應(yīng)的div替換成vue組件標(biāo)簽。其他結(jié)構(gòu)以此類推。直到所有結(jié)構(gòu)拆分完畢。3.4)、將對應(yīng)
CSS代碼，剪切到對應(yīng)組件的style區(qū)域。
二、實(shí)現(xiàn)動態(tài)組件
- 1、數(shù)據(jù)的類型和名稱怎么定義？
這個最好和DB表結(jié)構(gòu)設(shè)計的字段保持一致，會省去很多麻煩事。
原則：一堆數(shù)據(jù)用數(shù)組存，每條數(shù)據(jù)用對象存。
例如：
- 2、數(shù)據(jù)與組件的對應(yīng)關(guān)系，即該塊數(shù)據(jù)應(yīng)該展示在哪個組件里？
1)、一個組件使用：放在組件自身即可。
2)、多個組件共同使用：放在他們共同的父組件上（狀態(tài)提升）。
三、實(shí)現(xiàn)交互（待補(bǔ)充）
-
首先，綁定事件。
比如@click、@change、@keyup等等事件。
然后，給對應(yīng)的事件編寫具體的函數(shù)邏輯。
這就是交互邏輯。 -
其次，組件間通信。
數(shù)據(jù)、事件函數(shù)等在各組件間如何通信？文章來源：http://www.zghlxwxcb.cn/news/detail-791496.html基礎(chǔ)方式：使用props屬性進(jìn)行通信。
(1).父組件 ==> 子組件 通信
(2).子組件 ==> 父組件 通信（要求父先給子一個函數(shù)）文章來源地址http://www.zghlxwxcb.cn/news/detail-791496.html
到了這里，關(guān)于Vue：將以往的JQ頁面，重構(gòu)成Vue組件頁面的大致思路梳理(組件化編碼大致流程)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
