一、Vue官網(wǎng)
二、Vue簡(jiǎn)介
Vue是一個(gè)前端的雙向綁定類(lèi)的框架，新的Vue版本參考了React的部分設(shè)計(jì)，當(dāng)然也有自己獨(dú)特的地方，比如Vue的單文件組件開(kāi)發(fā)方式都很有創(chuàng)新，另外Vue自身的一些綁定的語(yǔ)法、用法等都非常精煉，很容易上手，而且第三方的插件都非常豐富，社區(qū)非?；钴S，最新的文檔都有中文版本。而且Vue配合官方的和第三方的庫(kù)可以實(shí)現(xiàn)單文件的組件化開(kāi)發(fā)、SPA等現(xiàn)代化前端開(kāi)發(fā)。
- 是一個(gè)輕量級(jí)MVVM框架(大小只有18KB)
- 數(shù)據(jù)驅(qū)動(dòng)+組件化的前端開(kāi)發(fā)
- 社區(qū)完善
三、MVVM框架
-
MVVM框架好處
- 針對(duì)具有復(fù)雜交互邏輯的前端應(yīng)用 - 提供的結(jié)構(gòu)抽象 - 主要目的是為了解決應(yīng)用程序展示結(jié)構(gòu)、業(yè)務(wù)邏輯之間的緊耦合關(guān)系 - 通過(guò)ajax數(shù)據(jù)持久化，保證前端用戶(hù)體驗(yàn)(部分異步刷新)MVVM框架 -
MVC組成
- 模型(Model): 處理數(shù)據(jù)和業(yè)務(wù)邏輯 - 視圖(View): 向用戶(hù)展示數(shù)據(jù)的界面 - 控制器(Controller): 組織調(diào)度相應(yīng)的處理模型
四、Vue入門(mén)
Vue 可以直接把它當(dāng)做一個(gè)js庫(kù)使用，可以很簡(jiǎn)單的接入到你的項(xiàng)目中，或者你只需要使用雙向數(shù)據(jù)綁定。
需求: 網(wǎng)頁(yè)中有個(gè)div標(biāo)簽，而需要有json對(duì)象存儲(chǔ)數(shù)據(jù)，把json對(duì)象上的數(shù)據(jù)放到div。
- 在頁(yè)面中引入Vue庫(kù)
<script src="https://unpkg.com/vue/dist/vue.js"></script>
- 在頁(yè)面中div標(biāo)簽添加一個(gè)id，例如app
<div id='app'></app>
- 創(chuàng)建Vue的對(duì)象，并把數(shù)據(jù)綁定到上面創(chuàng)建好的div上去
<html>
<head>
<meta charset="utf8"/>
<title>hello vue</title>
<!--1、引入Vue庫(kù)-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<!-- 2、創(chuàng)建一個(gè)Div -->
<div id="app">
<!--Vue的模板的綁定數(shù)據(jù)的方法，可以用兩對(duì)花括號(hào)進(jìn)行綁定Vue中的數(shù)據(jù)對(duì)象的屬性 -->
{{message}}
</div>
</body>
<!-- 3、創(chuàng)建Vue的對(duì)象，并把數(shù)據(jù)綁定到上面創(chuàng)建好的div上去 -->
<script>
// 創(chuàng)建Vue對(duì)象(Vue的核心對(duì)象)
var app = new Vue({
el: '#app', // el屬性：把當(dāng)前Vue對(duì)象掛載到 div標(biāo)簽上，#app是id選擇器
data: { // data: 是Vue對(duì)象中綁定的數(shù)據(jù)
message: 'hello Vue!' // message 自定義的數(shù)據(jù)
}
});
</script>
</html>
五、Vue核心思想
-
數(shù)據(jù)驅(qū)動(dòng)(即是雙向的數(shù)據(jù)綁定)
DOM是數(shù)據(jù)的一種自然映射。雙向是指：HTML標(biāo)簽數(shù)據(jù) 綁定到 Vue對(duì)象，另外反方向數(shù)據(jù)也是綁定的。Vue對(duì)象的改變會(huì)直接影響到HTML的標(biāo)簽的變化，而且標(biāo)簽的變化也會(huì)反過(guò)來(lái)影響Vue對(duì)象的屬性的變化。之前Dom驅(qū)動(dòng)的開(kāi)發(fā)方式尤其是以jQuery為主的開(kāi)發(fā)時(shí)代，都是dom變化后，觸發(fā)js事件，然后在事件中通過(guò)js代碼取得標(biāo)簽的變化，再跟后臺(tái)進(jìn)行交互，然后根據(jù)后臺(tái)返回的結(jié)果再更新HTML標(biāo)簽，異常的繁瑣。有了Vue這種雙向綁定，讓開(kāi)發(fā)人員只需要關(guān)心json數(shù)據(jù)的變化即可，Vue自動(dòng)映射到HTML上，而且HTML的變化也會(huì)映射回js對(duì)象上，開(kāi)發(fā)方式直接變革成了前端由數(shù)據(jù)驅(qū)動(dòng)的開(kāi)發(fā)時(shí)代。
數(shù)據(jù)驅(qū)動(dòng) -
組件化
擴(kuò)展HTML元素，封裝可重用的代碼。組件設(shè)計(jì)原則: - 頁(yè)面上每個(gè)獨(dú)立的可視/可交互區(qū)域視為一個(gè)組件(例如頭部尾部)； - 每個(gè)組件對(duì)應(yīng)一個(gè)工程目錄，組件所需要的各種資源在該目錄下就近維護(hù)； - 頁(yè)面不過(guò)是組件的容器，組件可以嵌套自由組合，形成完整的頁(yè)面；
