組件化
vue的組件化是指把傳統(tǒng)的html, css, js資源集成到一個(gè).vue文件中，組成一個(gè)單獨(dú)的組件，被其他模塊調(diào)用凛澎，不再是文件之間相互引用，增加代碼復(fù)用性估蹄。
Paste_Image.png
vue組件的重要選項(xiàng)
- data：vue對象的數(shù)據(jù)
- methods：vue對象的方法
- watch：設(shè)置對象的監(jiān)聽方法
- 模板指令
- 數(shù)據(jù)渲染： v-text, v-html, {{}}
Paste_Image.png
- 控制模塊隱藏：v-if, v-show
Paste_Image.png
- 渲染循環(huán)列表： v-for
Paste_Image.png
- 事件綁定：v-on
Paste_Image.png
- 屬性綁定：v-bind
Paste_Image.png
組件demo
- todolist
Paste_Image.png
結(jié)構(gòu)：
Paste_Image.png
行為：
Paste_Image.png
樣式：
Paste_Image.png
- 加個(gè)開關(guān)：
Paste_Image.png
Paste_Image.png
- 存儲(chǔ)到LocalStorate
通過 watcher 我們能監(jiān)聽到任何數(shù)值屬性的數(shù)值更新
Paste_Image.png
如何劃分組件
功能模塊：select, pagenation ...
頁面區(qū)域：header, footer, sidebar ...
Vue組件之間的調(diào)用
Paste_Image.png
Vue組件之間的通信
Paste_Image.png
