Vue.js 和 angular.js一樣也是一個(gè)客戶端框架茁瘦，利用H5自定義標(biāo)簽的能力忧勿，把數(shù)據(jù)和控制通過(guò)js實(shí)現(xiàn)分離的功能
沖擊比較大的就是 freemarker补胚，jsp這些服務(wù)端模板技術(shù)蒂教，利用客戶端框架+Ajax肾扰、實(shí)現(xiàn)客戶端層面的 MVC点楼，MVP，MVMM這些模式白对。html和js掠廓，雙向綁定。自此甩恼，服務(wù)端可以不用再關(guān)心頁(yè)面內(nèi)容分發(fā)這些蟀瞧，只需要提供服務(wù)接口，比如Rest
1条摸、典型用法
入門的 vue例子
包含元素
I悦污、id 屬性標(biāo)注一個(gè) app 名稱 -- 對(duì)應(yīng)的 angular 對(duì)象就是ng-app/ng-controller???
II、定義一個(gè) Vue 對(duì)象钉蒲，其中 el屬性 對(duì)應(yīng)到 前面的id屬性 (背后的邏輯就是 document.getElementById())-- 對(duì)應(yīng)angular 就是 define???
III切端、Vue 中的數(shù)據(jù)存儲(chǔ)在 data屬性中
IV、使用數(shù)據(jù)對(duì)象{{}} -- 這點(diǎn)和angular 是一致性的
V顷啼、對(duì)于 Vue data中的對(duì)象踏枣，Vue都直接代理 即 var v = new Vue 后 v.message 可以直接引用
Vue對(duì)象中的其他實(shí)例方法 v.$watch('obj',function(old,new){}); 監(jiān)控屬性值變化
2、概念
對(duì)應(yīng)每一個(gè)模版框架钙蒙，基礎(chǔ)部分都需要了解： 表達(dá)式茵瀑；邏輯控制。掌握了這兩部分躬厌，就可以切入這個(gè)模型马昨，后續(xù)高級(jí)部分在使用中學(xué)習(xí)。
更重要的是扛施，幾乎所有的模版框架這部分內(nèi)容都有相似之處鸿捧，掌握一個(gè)就可以掌握大部分的使用
I、表達(dá)式
-- js的表達(dá)式全部支持
II疙渣、邏輯控制指令
a匙奴、判斷邏輯 v-if 指令
通過(guò)在 屬性中 增加 v-if 屬性，如果里面的表達(dá)式計(jì)算結(jié)果為真昌阿，則該 元素會(huì)插入到最后的頁(yè)面中
b饥脑、循環(huán)邏輯 v-for 指令
采用在屬性中 增加 v-for 屬性恳邀，屬性里面迭代語(yǔ)法 item in items 和js的迭代語(yǔ)法類似
3、綁定
綁定是實(shí)現(xiàn)MVMM/MVP一個(gè)核心因素灶轰，通過(guò)修改 數(shù)據(jù)model部分的數(shù)據(jù)谣沸，可以實(shí)時(shí)聯(lián)動(dòng)改變 html中的數(shù)據(jù)，從而系統(tǒng)實(shí)現(xiàn)了控制笋颤，無(wú)需再專門做Controller的開(kāi)發(fā)乳附，減少了開(kāi)發(fā)成本
I、數(shù)據(jù)綁定 v-model指令
-- 這點(diǎn)和 angular 的 ng-model 是一樣的
綁定的變量 class1伴澄，在界面和數(shù)據(jù)js中雙向綁定赋除，一般用在表單元素比較多
II、屬性綁定 v-bind指令
-- 這個(gè)和 angular的 ng-bind 也是一致的非凌，v-bind: 可以縮寫成 :
new Vue({
el: '#app',
data:{
class1: false,
class2: true
}
});
一種是簡(jiǎn)單的綁定表達(dá)式的值举农；
一種是綁定對(duì)象和數(shù)組(主要針對(duì) class和style 屬性)
{class1:true, class2:true} - 這點(diǎn)類似于angular
[class1,class2]
除此之外，還可以使用 computed 返回值敞嗡，只要返回值是符合如上格式的對(duì)象
4颁糟、邏輯-事件-控制
v-if/v-for 只是對(duì)界面內(nèi)容的簡(jiǎn)單控制，web開(kāi)發(fā)有很大一部分是事情相應(yīng)控制喉悴，Vue模版使用什么來(lái)代替js的onclick 這些事件處理呢
I棱貌、v-on 指令 + Vue 方法
v-on 指令對(duì)常用的 html事件都可以操作，一般相應(yīng)的函數(shù)都放在 methods中, v-on: 可以縮寫成 @
v:on 對(duì)應(yīng)js所有的 鼠標(biāo)和鍵盤事件
II箕肃、其他Vue方法
a婚脱、過(guò)濾器 |
對(duì)應(yīng) angular ，可以實(shí)現(xiàn)類似 管道的過(guò)濾功能勺像，前一個(gè)處理結(jié)果障贸，作為第一個(gè)參數(shù)傳給后一個(gè)過(guò)濾器函數(shù)，對(duì)于過(guò)濾器必須使用 filters 來(lái)標(biāo)注函數(shù)咏删。
b喳篇、計(jì)算屬性?computed
和普通methods的區(qū)別是羹铅，直接使用 名稱就可以惭每，而methods需要 () 才能作為方法執(zhí)行柠并；此外享怀，computed 的記錄會(huì)緩存,直到依賴的數(shù)據(jù)發(fā)生變化命爬，而methods每次調(diào)用都重新執(zhí)行
5番刊、表單元素
主要通過(guò)v-model綁定表單控件的值
比如 復(fù)選框
6菊匿、組件化
任何框架最終的殺傷力都是能夠模塊化垄分，組件化宛篇，這是非常精華重要的部分，Vue也不例外薄湿，下面看Vue如何抽象封裝成新的框架和組件
組件化叫倍，一般包含幾個(gè)部分：a偷卧、H5界面上，使用的自定義標(biāo)簽和屬性吆倦；b听诸、js模版中，提供標(biāo)簽和屬性的 html模版替換
I蚕泽、組件化的一個(gè)例子
II晌梨、組件化的步驟
一、注冊(cè)一個(gè)組件
a须妻、全局組件 Vue.component
b仔蝌、局部組件 在 new Vue 中 的 components 屬性
new Vue({
components: {
'runoob': {template: '< ?> 自定義組件 <>''}
}
})
二、使用 template 進(jìn)行替換 標(biāo)簽元素
三荒吏、父控件(外層) 傳遞數(shù)據(jù)給 子控件(內(nèi)層)敛惊，通過(guò) props 傳遞數(shù)據(jù)
如果傳遞的是靜態(tài)數(shù)據(jù)比如字符串 直接使用 todo屬性，比如 todo="aaa";如果是動(dòng)態(tài)數(shù)據(jù)绰更，綁定的其他數(shù)據(jù)使用 v-bind:todo 綁定一個(gè)變量
四瞧挤、子控件(內(nèi)層) 傳遞數(shù)據(jù)給父控件(外層),通過(guò)事件來(lái)傳遞
使用 $on(eventName) 監(jiān)聽(tīng)事件
使用 $emit(eventName) 觸發(fā)事件
7、自定義指令
Vue和AugularJS一樣动知，也有自定義指令皿伺，不過(guò)功能卻不一樣，angularJS的自定義指令對(duì)應(yīng)的是Vue的component 組件功能盒粮，通過(guò)自定義指令這樣可以實(shí)現(xiàn)更多的組合功能鸵鸥，比如可以在指令中定義自己的事件處理體系
和組件一樣，也有全局和局部指令
Vue.directive('focus', {});
directives: {focus:{});
I丹皱、注冊(cè)一個(gè)指令 directive
II妒穴、鉤子(回調(diào))函數(shù) bind/inserted/update/componentUpdated/unbind
函數(shù)入?yún)?/p>
el -- 指令綁定的元素
binding -- 獲取綁定的指令的信息
vnode -- vue編譯后的節(jié)點(diǎn)
使用鉤子函數(shù)用在何時(shí)實(shí)現(xiàn)指令的功能，如果不指定則所有時(shí)候都生效
III摊崭、通過(guò)函數(shù)獲取的 el,bingding 對(duì)象實(shí)現(xiàn)相應(yīng)的操作
8讼油、其他重點(diǎn)知識(shí)
其他常見(jiàn)指令
v-show 指令
-- 對(duì)比 angular 的ng-show
實(shí)現(xiàn)的效果和 v-if 類似，但背后的邏輯不通呢簸，v-if 是控制是否插入該元素矮台，而v-show 是肯定插入該元素，通過(guò) display:none 樣式控制顯示
