1.什么是VUE:
? ? VUE是漸進(jìn)式的基于MVVM設(shè)計(jì)模式的純前端JS框架
?漸進(jìn)式: 可以在項(xiàng)目中逐步使用VUE的功能，也可以和其它技術(shù)混搭。
vs全家桶:要使用，就必須使用全套所有技術(shù)。且不能喝其它技術(shù)混搭。
MVVM設(shè)計(jì)模式: ?
純前端: nodejs學(xué)的不好和vue無關(guān)！
框架:原生DOM vs jQuery函數(shù)庫(kù) vs VUE框架
? ?（1）原生DOM:步驟多，函數(shù)繁瑣
? ?（2）jQuery函數(shù)庫(kù): 步驟沒少，每個(gè)函數(shù)都變的很簡(jiǎn)單
? ?（3）框架:徹底簡(jiǎn)化了步驟，無需人工干預(yù)。
什么是框架:已經(jīng)是一個(gè)半成品的項(xiàng)目，封裝了大量重復(fù)性勞動(dòng)。人只要提供個(gè)性化定制即可。
注意：VUE只適合于數(shù)據(jù)操作為主的項(xiàng)目。
? ? ?還是五件事:增刪改查+事件綁定.
2.如何使用:（兩種方式）
1.下載并引入vue.js文件: 前2天
2.用腳手架代碼: 最后一天講
?版本: 2.5
開發(fā)版:未壓縮版本 , 有完備的錯(cuò)誤提示
生產(chǎn)版:壓縮版本 , 刪掉了錯(cuò)誤提示
3.?MVVM設(shè)計(jì)模式
傳統(tǒng)前端劃分:
??HTML: 專門保存網(wǎng)頁(yè)內(nèi)容和結(jié)構(gòu)的文檔
??CSS: 專門定義網(wǎng)頁(yè)樣式的文檔
??JS: 為網(wǎng)頁(yè)添加交互行為
（問題: HTML和CSS不會(huì)動(dòng)態(tài)變化）
一切交互都只能靠JS添加。
導(dǎo)致JS中大量重復(fù)的代碼和重復(fù)的步驟。
?MVVM模式:
??1. 界面View: 增強(qiáng)版的HTML和CSS，可跟據(jù)數(shù)據(jù)自動(dòng)變化
??2. 模型數(shù)據(jù)Model:集中存儲(chǔ)一個(gè)頁(yè)面內(nèi)的所有變化的數(shù)據(jù)。
??3.?視圖模型ViewModel:將View界面和Model模型數(shù)據(jù)包裹起來，統(tǒng)一管理，自動(dòng)同步修改。
ViewModel中(new Vue()對(duì)象)
包含兩大子系統(tǒng):
????????1. 響應(yīng)系統(tǒng):
? ? ?將模型數(shù)據(jù)包裹起來，為每個(gè)模型變量自動(dòng)添加get()和set()保鏢。
今后只要修改任何模型變量，都自動(dòng)經(jīng)過set()，set()中會(huì)觸發(fā)通知: xx變量變?yōu)閤x新值
通知會(huì)發(fā)給虛擬DOM樹
????????2. 虛擬DOM樹
什么是:創(chuàng)建new Vue時(shí)，通過掃描完整DOM樹，僅提取可能變化的元素和屬性，組成的一顆及精簡(jiǎn)的虛擬DOM樹。
優(yōu)點(diǎn):?
1.查找元素快
? 2.?封裝了重復(fù)性的增刪改查DOM操作
虛擬DOM樹接到通知，快速找到受影響的元素。調(diào)用已經(jīng)封裝好的DOM函數(shù)，僅更新受影響的元素的受影響的屬性。
例子：
<!DOCTYPE?html>
<html?lang="en">
<head>
??<meta?charset="UTF-8">
??<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
??<meta?http-equiv="X-UA-Compatible"?content="ie=edge">
??<title>Document</title>
??<!--0.?引入vue.js-->
??<script?src="js/vue.js"></script>
</head>
<body>
<!--1.?做網(wǎng)頁(yè)界面-->
<div?id="app">
??<h1>Welcome</h1>
??<button?@click="add">click?me({{i}})</button>
</div>
<script>
//2.?定義數(shù)據(jù)
var?data={
??i:0?//將頁(yè)面中可能變化的數(shù)據(jù)保存在data對(duì)象中統(tǒng)一管理
};
//3.?創(chuàng)建VUE對(duì)象，將界面和數(shù)據(jù)包裹起來
new?Vue({//至少兩個(gè)成員
??el:"#app",//找到界面div
??data,//data:data//將數(shù)據(jù)裝入VUE
??methods:{//所有函數(shù)都要放在methods中
????add(){//:function(){
??????this.i++;//將i+1
????}
??}
})
</script>
</body>
</html>
1.綁定語(yǔ)法:學(xué)名: 插值語(yǔ)法 Interpolation ?== {{}}
? 什么是:讓HTML可以自動(dòng)找到程序中的變量的特殊語(yǔ)法
? 為什么:因?yàn)閭鹘y(tǒng)的HTML是靜態(tài)的，缺少動(dòng)態(tài)變化的能力。導(dǎo)致js當(dāng)中要想操作HTML，需要大量重復(fù)的代碼。
? 何時(shí): 只要HTML中某個(gè)位置的數(shù)據(jù)，需要根據(jù)程序中的一個(gè)變量動(dòng)態(tài)變化！都要用綁定語(yǔ)法！
? 如何:2步:
?? 1.先找頁(yè)面中所有可能發(fā)生變化的地方有幾處
?? 2. 再在模型數(shù)據(jù)中定義相同數(shù)量的變量:
?????new Vue({
??????? el:"#app",
??????? data:{
??????? 變量名:值,
????????? ???... : ...,?
????? }
?????})
強(qiáng)調(diào): HTML中有幾處變化，data對(duì)象中就要有幾個(gè)變量與之對(duì)應(yīng)。
3.在HTML中，可能發(fā)生變化的位置用綁定語(yǔ)法定義變量: {{變量或表達(dá)式}}
強(qiáng)調(diào):其實(shí){{}}的用法和模板字符串中${}的用法完全一樣！
能寫：變量,算術(shù)計(jì)算，關(guān)系/邏輯運(yùn)算，函數(shù)調(diào)用, 訪問數(shù)組元素, 三目——凡是有返回值的js表達(dá)式都能
不能: if ?else ??while ???for——都是程序結(jié)構(gòu)，沒有返回值！
結(jié)果:運(yùn)行時(shí)，HTML中的所有{{}}會(huì)自動(dòng)去data中找同名的變量使用。且內(nèi)存中的data中的變量值發(fā)生變化，HTML中的{{}}的值自動(dòng)變化！用戶最終看到的是{{}}中的變量或者表達(dá)式計(jì)算后的值！而看不見雙花括號(hào)——節(jié)省了大量重復(fù)的查找和修改操作?！嗵澚薓VVM中的ViewModel中的兩大子系統(tǒng): 響應(yīng)系統(tǒng)和虛擬DOM樹。
2. 指令:
? 什么是:為HTML添加更多新功能的Vue預(yù)置的自定義屬性
? 為什么:因?yàn)樵瓉鞨TML缺少程序必須的功能: 判斷/分支結(jié)構(gòu)，循環(huán)。。。功能。所以只能依靠js中反復(fù)查找，反復(fù)修改來控制HTML元素的內(nèi)容和狀態(tài)。
?? 1.綁定屬性:
??? 什么是: v-bind屬性專門動(dòng)態(tài)綁定元素的屬性值
??? 為什么: 要綁定屬性值，不能用{{}}，只能用v-bind或:簡(jiǎn)寫
??? 何時(shí):只要屬性值需要根據(jù)變量動(dòng)態(tài)變化時(shí)，就要用v-bind或:簡(jiǎn)寫
??? 如何: <img v-bind:src="pm25<100?'img/1.png':
????????????? ??pm25<200?'img/2.png':
????????????? ??pm25<300?'img/3.png':
?????????????????????? ????'img/4.png'">
???????? 去{{}}換v-bind:
??? 其實(shí)可簡(jiǎn)寫: <img v-bind:src="...
???????? 去{{}}換:
2.控制元素的顯示隱藏:
1.控制一個(gè)元素的顯示隱藏: 2種:
1. <ANY v-if="判斷條件"
只要條件滿足，就顯示元素
一旦條件不再滿足，就隱藏元素！
2. v-show=
總結(jié):
1.如果元素內(nèi)容要變化:用 {{}}?綁定
2.如果元素的屬性值要變化: 用 :屬性名 綁定
