????：哈哈哈Vue.js 入門1. 細(xì)說(shuō)MVC和MVVM設(shè)計(jì)模型 (1).MVC: [1]. 背景:Web項(xiàng)目需求日益復(fù)雜,為了使項(xiàng)目簡(jiǎn)化,采用了MVC架構(gòu),實(shí)現(xiàn)了前端UI展示, 與后端業(yè)務(wù)邏輯處理的完全分離,利于前后端開(kāi)發(fā)人員分工
哈哈哈
Vue.js 入門
1. 細(xì)說(shuō)MVC和MVVM設(shè)計(jì)模型
(1).MVC:
[1]. 背景:Web項(xiàng)目需求日益復(fù)雜,為了使項(xiàng)目簡(jiǎn)化,采用了MVC架構(gòu),實(shí)現(xiàn)了前端UI展示,
與后端業(yè)務(wù)邏輯處理的完全分離,利于前后端開(kāi)發(fā)人員分工協(xié)作,提升效率
[2]. MVC:是Model-View-Controller的縮寫;
[3]. M:Model,模型,主要處理與數(shù)據(jù)庫(kù)相關(guān)的業(yè)務(wù)邏輯;
V:View,視圖,主要負(fù)責(zé)數(shù)據(jù)在客戶端/瀏覽器上的展示;
C:Controller:控制器,視圖與模型之間傳遞消息,例如接受請(qǐng)求,選擇模型,渲染視圖等;
[4]. MVC基本的運(yùn)行流程是:
1. 視圖發(fā)起請(qǐng)求-->控制器接收請(qǐng)求-->轉(zhuǎn)發(fā)給對(duì)應(yīng)模型處理-->模型將結(jié)果返回到控制器-->控制器返回到視圖;
2. 簡(jiǎn)單描述: View-->Controller-->Model-->Controller-->View, 即 V-C-M-C-V;
3. 整個(gè)過(guò)程是封閉的,單向的,視圖與模型之間不允許直接直接通訊,必須通過(guò)控制器進(jìn)行;
[5]. MVC開(kāi)發(fā)的基本原則:
1. 需要服務(wù)器端配合,模型Model與控制器Controller都在服務(wù)器端完成;
2. 服務(wù)器處理過(guò)的數(shù)據(jù),必須通過(guò)JavaScript在前端進(jìn)行渲染;
2. '厚模型,薄控制器',業(yè)務(wù)邏輯盡可能寫到模型中,控制器僅調(diào)用模型提供的接口即可;
(2).MVVM:
[1].隨著前端頁(yè)面開(kāi)發(fā)越來(lái)越復(fù)雜,用戶與數(shù)據(jù)的交互也越來(lái)越頻繁,而很多交互都是臨時(shí)性的,沒(méi)有必要每一次都要
和服務(wù)器中的模型對(duì)象進(jìn)行交互,但是傳統(tǒng)的jQuery等函數(shù)庫(kù)又力不從心,這時(shí)MVVM模型就應(yīng)運(yùn)而生啦。
[2].MVVM: 是Model-View-ViewModel的縮寫;
M:Model層, V:View層, VM: ViewModel層;
[3].Model:JavaScript對(duì)象/模型, View:HTML代碼/模板,各司其職,完全分離
[4].VM層:負(fù)責(zé)Model與View之間的交互,完全使用JavaScript進(jìn)行編寫;
[5].基本流程: VM層根據(jù)Model數(shù)據(jù)來(lái)更新View,或者根據(jù)View來(lái)更新Model,這個(gè)過(guò)程是雙向的,即雙向數(shù)據(jù)綁定;
[6].服務(wù)器端只負(fù)責(zé)更新Model即可,而Model就是一個(gè)JavaScript對(duì)象,所以服務(wù)器只需要返回可被Model解析的
數(shù)據(jù)即可,例如:json,html等,這樣就完全實(shí)現(xiàn)了面向接口/API編程。
[7].Vue.js就是一個(gè)完全采用了MVVM機(jī)制的前端開(kāi)發(fā)框架,采用從底層向上的漸進(jìn)式開(kāi)發(fā)思想,易學(xué)易用!
----------------------------------------------------------------------------------------------
2. Vue.js 是什么? 如何導(dǎo)入到項(xiàng)目中?
[1].Vue.js作者也是中國(guó)人:尤雨溪
1.中國(guó)上海復(fù)旦附中畢業(yè)后,去了美國(guó)上大學(xué),學(xué)的是藝術(shù),并獲得藝術(shù)碩士學(xué)位,
2.之前在谷歌工作,2014年開(kāi)發(fā)出了Vue.js前端庫(kù),這是一個(gè)用來(lái)快速構(gòu)造Web界面的javascri庫(kù),通過(guò)簡(jiǎn)潔的API提供高效
的數(shù)據(jù)雙向綁定和靈活的組件式開(kāi)發(fā)系統(tǒng)。
3.2016年9月,以技術(shù)顧問(wèn)身份加盟阿里巴巴Weex團(tuán)隊(duì);
[1].打開(kāi)Vue.js官網(wǎng)(中文版): cn.vuejs.org,點(diǎn)擊頭部導(dǎo)航區(qū)的"學(xué)習(xí)",選擇"教程",再點(diǎn)擊"安裝";
[2].Vue不再支持IE8及以下版本,例如IE6,IE7這類老古董,大家開(kāi)發(fā)時(shí)不必再考慮,除非客戶指定必須兼容;
[3].官方提供了三種安裝方式:
1.<script>標(biāo)簽導(dǎo)入: 有二個(gè)版本可以選擇
(1). 完整開(kāi)發(fā)版本:包括警告與調(diào)試模式,推薦學(xué)習(xí)與開(kāi)發(fā)階段使用;
(2). 壓縮精簡(jiǎn)版本:刪除警告等多余內(nèi)容,非常短小,適合線上生產(chǎn)環(huán)境使用;
2.命令行方式:
(1). npm: 需要Node.js支持,配合前端資源打包器Webpack使用;
(2). cli: 官方提供的腳手架工具,進(jìn)一步簡(jiǎn)化了vue項(xiàng)目創(chuàng)建的難度,更加智能和自動(dòng)化;
我們的課程采用傳統(tǒng)的<script>標(biāo)簽引入方式,將源碼下載的本地,當(dāng)然也可以使用cdn引入:
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
[4].測(cè)試是否引入成功
----------------------------------------------------------------------------------------------
3. 基本術(shù)語(yǔ):
1. 實(shí)例: Vue.js本身就是一個(gè)構(gòu)造函數(shù),可以用來(lái)創(chuàng)建對(duì)象,使用Vue第一步,就是要?jiǎng)?chuàng)建一個(gè)Vue實(shí)例:new Vue();
2. 實(shí)例參數(shù): Vue()接受一個(gè)js字面量對(duì)象做為參數(shù),所有的功能,都以對(duì)象屬性的方式進(jìn)行設(shè)置;
3. 掛載點(diǎn): Vue實(shí)例的作用域,本質(zhì)上就是通過(guò)css選擇器獲取到的頁(yè)面元素;
4. 模板: 帶有html標(biāo)簽的字符串;
5. 值/變量: 掛載點(diǎn)中的文本內(nèi)容;
6. 屬性: 描述模板或html標(biāo)簽;
7. 事件: 模板或元素上發(fā)生的系統(tǒng)或用戶事件,例如點(diǎn)擊,移動(dòng)等;
?? ???：天蓬老師?? ??：2019-01-01 09:15:04
???? ??：你把筆記幾乎全部照抄過(guò)來(lái)了, 不知你是否理解了?