什么是Vue.js?
什么是MVC、MVVM？
簡述MVVM
- MVVM是Model-View-ViewModel的縮寫。MVVM是一種設(shè)計思想。Model層代表數(shù)據(jù)模型，也可以在Model中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯；View代表UI組件，它負(fù)責(zé)將數(shù)據(jù)模型轉(zhuǎn)化成UI展現(xiàn)出來，ViewModel是一個同步View和Model的對象。
- 在MVVM架構(gòu)下，View和Model之間并沒有直接的聯(lián)系，而是通過ViewModel進(jìn)行交互，Model和ViewModel之間的交互是雙向的，因此View數(shù)據(jù)的變化會同步到Model中，而Model數(shù)據(jù)的變化也會立即反應(yīng)到View上。
- ViewModel通過雙向數(shù)據(jù)綁定把View層和Model層連接了起來，而View和Model之間的同步工作完全是自動的，無需人為干涉，因此開發(fā)者只需關(guān)注業(yè)務(wù)邏輯，不需要手動操作DOM,不需要關(guān)注數(shù)據(jù)狀態(tài)的同步問題，復(fù)雜的數(shù)據(jù)狀態(tài)維護(hù)完全由MVVM來統(tǒng)一管理。
Vue的簡介
- 客戶端路由Vue-router
- 大規(guī)模狀態(tài)管理Vuex
- 構(gòu)建工具Webpack/Vue-cli
- 服務(wù)端通信Axios
Vue.js的優(yōu)點
- 簡單輕巧，功能強(qiáng)大，擁有非常容易上手的API；
- 可組件化和響應(yīng)式設(shè)計；
- 實現(xiàn)數(shù)據(jù)與結(jié)構(gòu)分離，高性能，易于瀏覽器的加載速度；
- MVVM模式，數(shù)據(jù)雙向綁定，減少了DOM操作，將更多精力放在數(shù)據(jù)和業(yè)務(wù)邏輯上
Vue的基礎(chǔ)語法介紹
- v-model:主要是在表單元素的雙向數(shù)據(jù)綁定中使用。比如文本框、下拉框、單選、復(fù)選、textarea等等。因為v-model是雙向綁定的，所以文本框輸入以后，模型也會發(fā)生改變。反之模型改變了文本框也會改變。
- v-text：主要用于文本的渲染。和{{}}功能一樣。但是{{}}在第一次頁面Vue木沒有初始化完成時，會顯示{{}}字符。故文本渲染多用v-text。
- v-html:則會以html的方式把內(nèi)容載入到界面中
- v-show：控制顯示隱藏。不用藝v-if，使用v-show的情況下，dom是存在的。v-show通過指定CSS樣式給元素添加displayblock或者displaynone進(jìn)行控制。
- v-if：控制顯示隱藏。如果if不成立，則整個dom不進(jìn)行渲染，即不存在。
- v-bind：綁定屬性。給一個dom元素添加屬性。比如：在做圖片的渲染過程中，如果圖片的src地址是動態(tài)的，那么就可以利用v-bind去綁定src屬性來實現(xiàn)src的賦值。
- v-for：循環(huán)。主要用于表格<li>標(biāo)簽，去循環(huán)一個數(shù)組。
- v-on：事件綁定。(v-on:同等于@)
- filter:過濾器。格式化數(shù)據(jù)。如后臺返回金額19數(shù)字。頁面顯示：￥19.00元。
- component：組件。在做單頁面過程中使用多些。把每一個網(wǎng)頁做成多個組件然后拼接。起到組件復(fù)用。如頁面頭部底部和輪播等。