先了解什么是MVX框架模式？
MVX框架模式：MVC+MVP+MVVM
· 1.MVC：Model模型+View視圖+controller控制器，主要是基于分層的目的，讓彼此的職責(zé)分開。View通過Controller來和Model聯(lián)系，Controller是View和Model的協(xié)調(diào)者，View和Model不直接聯(lián)系，基本聯(lián)系都是單向的。
用戶通User過控制器Controller來操作模板Model從而達(dá)到視圖View的變化
· 2.MVP：是從MVC模式演變而來，都是通過Controller/Presenter負(fù)責(zé)邏輯的處理+Model提供數(shù)據(jù)+View負(fù)責(zé)顯示。
在MVP中，Presenter和View是沒有直接關(guān)聯(lián)的，是通過定義好的借口進(jìn)行交互，從而使得在變更View的時(shí)候可以保持Presenter不變。
MVP模式的框架：Riot.js。
· 3.MVVM：MVVM是把MVC里的Controller和MVP里的Presenter改成了ViewModel。Model+View+ViewModel。
View的變化會(huì)自動(dòng)更新到ViewModel，ViewModel的變化也會(huì)自動(dòng)同步到View上顯示。這種自動(dòng)同步是因?yàn)閂iewModel中的屬性實(shí)現(xiàn)了Observer，當(dāng)屬性變更時(shí)都能觸發(fā)對(duì)應(yīng)的操作。
MVVM模式的框架有：Angular.js + Vue.js和Konckout+Ember.js后兩種知名度較低以及是早起的框架模式。
vue是什么？
· vue 是一套構(gòu)建用戶界面的漸進(jìn)式框架（MVVM框架）。vue采用自底向上增量開發(fā)的設(shè)計(jì)。vue的核心只關(guān)注視圖層，是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的Web頁面的庫(kù)。
· Vue的特性如下：
· 1.輕量級(jí)的框架
· 2.雙向數(shù)據(jù)綁定
· 3.指令
· 4.插件化
· Vue和其他框架的區(qū)別
· 1.與Angular.js的區(qū)別
· 相同點(diǎn)：
· ａ：都支持指令：內(nèi)置指令和自定義指令。
· ｂ：都支持過濾器：內(nèi)置過濾器和自定義過濾器。
· ?。悖憾贾С蛛p向數(shù)據(jù)綁定。
· ?。洌憾疾恢С值投藶g覽器。
· 不同點(diǎn)：
· ?。幔篈angular的學(xué)習(xí)成本高，增加了依賴注入Dependency Injection特性，而Vue本身提供的API都比較簡(jiǎn)單，直觀。
· b：在性能上，Angualr依賴對(duì)數(shù)據(jù)做臟檢查，所以Watcher越多越慢。Vue使用基于依賴追蹤的觀察并且使用異步隊(duì)列更新。所有的數(shù)據(jù)都是獨(dú)立觸發(fā)的。對(duì)于龐大的應(yīng)用來說，這個(gè)優(yōu)化差異還是比較明顯的。
· 2.與React的區(qū)別
· 相同點(diǎn)：
· ?。幔篟eact采用特殊的JSX語法，Vue在組件開發(fā)中也推崇編寫Vue特殊文件格式，對(duì)文件內(nèi)容都有一些約定，兩者都需要編譯后使用。
· b：中心思想相同：一切都是組件，組件實(shí)例之間可以嵌套。
· c：都提供合理的鉤子函數(shù)，可以讓開發(fā)者定制化地去處理需求。
· d：都不內(nèi)置列數(shù)Ajax，Route等功能的核心包，而是以插件的方式加載。
· e：在組件開發(fā)中都支持mixins的特性。
· 不同點(diǎn)：
· ?。幔篟eact依賴Virtual DOM，而Vue使用的是DOM模板，React采用的Virtual DOM會(huì)對(duì)渲染出來的結(jié)果做臟檢查。
· b：vue在模板中提供了指令，過濾器等，可以非常方便，開解的操作DOM
如何使用vue？
· 1.安裝
· 1）script
· 如果項(xiàng)目直接通過script加載CDN文件，代碼示例如下：
<script src="http://www.baidu.com/vue.min.js"></script>
· 2）npm
· 如果項(xiàng)目給予nom管理依賴，則可以使用npm來安裝Vue，執(zhí)行如下命令：
$npm i vue --save-dev
· 3）bower
· 如果項(xiàng)目基于bower管理依賴，則可以使用bower來安裝Vue，執(zhí)行如下命令：
$bower i vue --save-dev
· 2.第一個(gè)Hello World程序
· 每一次學(xué)習(xí)新框架，都必將經(jīng)歷過Hello World程序，下面我們來寫一個(gè)簡(jiǎn)單的雙向數(shù)據(jù)綁定，反序輸出的效果
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="obox">
<input type="text" v-model="m"/><br/>{{msg}}
</div>
</body>
<script>
let vu = new Vue({
//元素
el: "#obox",
//屬性
data: {
m: "hello Vue"
},
computed:{
msg(){
return this.m.split('').reverse().join('')
}
}
})
</script>
</html>
