一、Vuejs 模式
MVVM 模式：視圖層和數(shù)據(jù)層的雙向綁定，不用關(guān)心DOM 操作的事，更多精力放在數(shù)據(jù)和業(yè)務(wù)邏輯上
二、Vuejs 環(huán)境搭建
1? 通過(guò)script 標(biāo)簽，引入vuejs
2、vue 腳手架工具 vue-cli 搭建【基于nodejs npm 搭建的】
三、Vue實(shí)例和數(shù)據(jù)綁定
通過(guò)構(gòu)造函數(shù) Vue 就可以創(chuàng)建一個(gè) Vue 的根實(shí)例，并啟動(dòng) Vue 應(yīng)用—入口
var app ＝new Vue({
//element,用于指定頁(yè)面中已存在的DOM元素，掛載到DOM中，也可以是css,是必不可少的選項(xiàng)
el:'#app',
data:{ //可以聲明應(yīng)用內(nèi)需要雙向綁定的數(shù)據(jù),也可以指向一個(gè)已經(jīng)有的變量
msg:'開(kāi)始學(xué)習(xí)vue'
}
})
掛載成功后，訪(fǎng)問(wèn)屬性
1?訪(fǎng)問(wèn)vue實(shí)例的屬性
app.$el // 訪(fǎng)問(wèn)vue實(shí)例的屬性，都是以 $ 開(kāi)頭
2?訪(fǎng)問(wèn)data中的屬性
app.msg //直接app.屬性名
四、生命周期鉤子
1?created （還未掛載）：實(shí)例創(chuàng)建完成后調(diào)用，此階段完成了數(shù)據(jù)的觀測(cè)等，但尚未掛載， $el 還不可用。需要初始化處理一些數(shù)據(jù)時(shí)會(huì)比較有用，
2?mounted el （剛剛掛載）：掛載到實(shí)例上后調(diào)用，一般我們的第一個(gè)業(yè)務(wù)邏輯會(huì)在這里開(kāi)始，也就是初始化要執(zhí)行的業(yè)務(wù)邏輯代碼，相當(dāng)于 $(document).ready()
3?beforeDestroy 實(shí)例銷(xiāo)毀之前調(diào)用。主要解綁一些使用 addEventListener 監(jiān)聽(tīng)的事件等
看個(gè)實(shí)例
五、文本插值和表達(dá)式
1? 語(yǔ)法
使用雙大括號(hào) “{{}}“ ，會(huì)自動(dòng)將我們雙向綁定的數(shù)據(jù)實(shí)時(shí)顯示
2? 用法
在 {{ }} 中，除了簡(jiǎn)單的綁定屬性值外，也可以是 JavaScript 表達(dá)式進(jìn)行簡(jiǎn)單的運(yùn)算 、 三元運(yùn)算等
特別注意：Vue .js 只支持單個(gè)表達(dá)式，不支持語(yǔ)句和流控制
3?實(shí)例
{{ 6+6 *3}} // 支持 簡(jiǎn)單的運(yùn)算
{{ 6<3 ? msg :a}} // 支持 三元運(yùn)算符
{{if(6>3){}} // 不支持 書(shū)寫(xiě)表達(dá)式
{{var a = 6}} // 不支持 多行表達(dá)式 var a=6 相當(dāng)于 var a;a = 6;
{{ var book = ’ Vue . js 實(shí)戰(zhàn) ’}} // 不支持 語(yǔ)句
{{ if (ok) return msg }} // 不支持 流控制
六、過(guò)濾器
1? 作用
格式化文本【字母全大寫(xiě)、貨幣千位使用逗號(hào)分隔符】
2?用法
在 {{}} 插值的尾部添加一小管道符 “ | ” 對(duì)數(shù)據(jù)進(jìn)行過(guò)濾
{{date | formatDate}} // | 后面接的是 過(guò)濾器的名字
{{date | filter1 | filter2 }} // 過(guò)濾器的串聯(lián)
{{date | formatDate('arg1', 'arg2')}} //過(guò)濾器的參數(shù)
3?規(guī)則
自定義的， 通過(guò)給 Vue 實(shí)例添加選項(xiàng) filters 來(lái)設(shè)置
**注：{{date | formatDate(66,99)}} 中的第1個(gè)和第2個(gè)參數(shù)，分別對(duì)應(yīng)script 標(biāo)簽內(nèi) 過(guò)濾器 formatDate 的第2個(gè) a 和 第3個(gè)參數(shù) b **，而 script 標(biāo)簽內(nèi)的過(guò)濾器 formatDate 第一個(gè)參數(shù)是 date
七、指令
1? 定義
帶有前綴 v- ，能幫我們快速完成 DOM 操作，循環(huán)渲染，顯示和隱藏
2? 部分指令
A、v-text ：解析文本 等同于 {{ }} 文本插值
<span v-text="apple"></span> === {{apple}} //true
B、v-html ：解析html
C、v-bind ：動(dòng)態(tài)更新html 元素上的 屬性，如id,class等
D、v-on ： 綁定事件監(jiān)聽(tīng)器
v-on 用法：
1?在普通元素上，可以監(jiān)聽(tīng)原生的 DOM 事件（ click、dblclick、 keyup, mousemove 等）
2?表達(dá)式可以是一個(gè)方法名，這些方法都寫(xiě)在 Vue 實(shí)例的 methods 屬性?xún)?nèi)，并且是函數(shù)的形式，
3?函數(shù)內(nèi)的 this 指向的是當(dāng)前 Vue 實(shí)例本身，因此可以直接使用 this.xxx 的形式來(lái)訪(fǎng)問(wèn)或修改數(shù)據(jù)
注：vue中用 到的所有方法都定義在methods中
八、語(yǔ)法糖
在不影響功能的情況下，用簡(jiǎn)潔的方法實(shí)現(xiàn)同樣的效果，從而更方便程序開(kāi)發(fā)
