先了解什么是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的時候可以保持Presenter不變确沸。
MVP模式的框架：Riot.js捌锭。
· 3.MVVM：MVVM是把MVC里的Controller和MVP里的Presenter改成了ViewModel。Model+View+ViewModel罗捎。
View的變化會自動更新到ViewModel观谦，ViewModel的變化也會自動同步到View上顯示。這種自動同步是因為ViewModel中的屬性實現(xiàn)了Observer桨菜，當(dāng)屬性變更時都能觸發(fā)對應(yīng)的操作豁状。
MVVM模式的框架有：Angular.js + Vue.js和Konckout+Ember.js后兩種知名度較低以及是早起的框架模式捉偏。
vue是什么？
· vue 是一套構(gòu)建用戶界面的漸進(jìn)式框架（MVVM框架）泻红。vue采用自底向上增量開發(fā)的設(shè)計夭禽。vue的核心只關(guān)注視圖層，是一個構(gòu)建數(shù)據(jù)驅(qū)動的Web頁面的庫谊路。
· Vue的特性如下：
· 1.輕量級的框架
· 2.雙向數(shù)據(jù)綁定
· 3.指令
· 4.插件化
· Vue和其他框架的區(qū)別
· 1.與Angular.js的區(qū)別
· 相同點：
· 《锴ａ：都支持指令：內(nèi)置指令和自定義指令。
· 〔啊ｂ：都支持過濾器：內(nèi)置過濾器和自定義過濾器潮梯。
· ｃ：都支持雙向數(shù)據(jù)綁定惨恭。
· ”蟆ｄ：都不支持低端瀏覽器。
· 不同點：
· 『砹怠ａ：Aangular的學(xué)習(xí)成本高沃饶，增加了依賴注入Dependency Injection特性，而Vue本身提供的API都比較簡單轻黑，直觀糊肤。
· b：在性能上，Angualr依賴對數(shù)據(jù)做臟檢查氓鄙，所以Watcher越多越慢馆揉。Vue使用基于依賴追蹤的觀察并且使用異步隊列更新。所有的數(shù)據(jù)都是獨立觸發(fā)的抖拦。對于龐大的應(yīng)用來說升酣，這個優(yōu)化差異還是比較明顯的。
· 2.與React的區(qū)別
· 相同點：
· √铩ａ：React采用特殊的JSX語法噩茄，Vue在組件開發(fā)中也推崇編寫Vue特殊文件格式，對文件內(nèi)容都有一些約定复颈，兩者都需要編譯后使用绩聘。
· b：中心思想相同：一切都是組件，組件實例之間可以嵌套耗啦。
· c：都提供合理的鉤子函數(shù)凿菩，可以讓開發(fā)者定制化地去處理需求。
· d：都不內(nèi)置列數(shù)Ajax帜讲，Route等功能的核心包衅谷，而是以插件的方式加載。
· e：在組件開發(fā)中都支持mixins的特性似将。
· 不同點：
· 』袂ａ：React依賴Virtual DOM蚀苛，而Vue使用的是DOM模板，React采用的Virtual DOM會對渲染出來的結(jié)果做臟檢查肢执。
· b：vue在模板中提供了指令枉阵，過濾器等译红，可以非常方便预茄，開解的操作DOM
如何使用vue？
· 1.安裝
· 1）script
· 如果項目直接通過script加載CDN文件侦厚，代碼示例如下：
<script src="http://www.baidu.com/vue.min.js"></script>
· 2）npm
· 如果項目給予nom管理依賴耻陕，則可以使用npm來安裝Vue，執(zhí)行如下命令：
$npm i vue --save-dev
· 3）bower
· 如果項目基于bower管理依賴刨沦，則可以使用bower來安裝Vue诗宣，執(zhí)行如下命令：
$bower i vue --save-dev
· 2.第一個Hello World程序
· 每一次學(xué)習(xí)新框架，都必將經(jīng)歷過Hello World程序想诅，下面我們來寫一個簡單的雙向數(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>
