day01
1. Vue簡介
一套用于構(gòu)建用戶界面的 漸進式框架
2. 初識Vue
2.1 搭建Vue開發(fā)環(huán)境
第一步：去Vue2官網(wǎng)场绿，下載依賴包。
第二步：在
html文件中引入vue.js嫉入。
<!-- 引入Vue -->
<script type="text/javascript" src="../../js/vue.js"></script>
輸出一下
Vue構(gòu)造函數(shù)：console.log(Vue)裳凸，看是否配置成功贱鄙。
- 第三步：編寫腳本關(guān)閉生產(chǎn)提示劝贸。
//阻止 vue 在啟動時生成生產(chǎn)提示
Vue.config.productionTip = false
注意：如果上述方法無法關(guān)閉姨谷，可直接操作
vue.js修改productionTip的值為false。
第四步：安裝開發(fā)者工具映九，打開瀏覽器的【插件管理】梦湘，直接拖動
.crx文件到瀏覽器即可。第五步：配置頁簽圖標(biāo)件甥，直接復(fù)制
favicon.ico到根目錄即可捌议。
2.2 一個Hello效果
- 實現(xiàn)效果：
- 核心代碼：
<!-- 準(zhǔn)備好一個容器 -->
<div id="demo">
<h1>Hello，{{school}}</h1>
</div>
<script type="text/javascript" >
// 創(chuàng)建Vue實例引有，并傳入配置對象
new Vue({
el:'#demo', //用于指定當(dāng)前Vue實例服務(wù)于哪個容器瓣颅，值為CSS選擇器字符串
data:{ // data用于配置數(shù)據(jù)，數(shù)據(jù)可以直接在模板中使用譬正，值暫時寫成一個對象
school:'尚硅谷'
}
})
</script>
-
總結(jié)：
想讓
Vue工作宫补，就要創(chuàng)建一個Vue實例，且要傳入一個配置對象曾我。demo容器中的代碼被稱為模板粉怕，它依然符合HTML規(guī)范，只是混入了一些特殊的Vue語法抒巢。el 配置：用于指定當(dāng)前
Vue實例服務(wù)于哪個容器贫贝，值為：css選擇器字符串。data 配置：用于配置數(shù)據(jù)蛉谜，數(shù)據(jù)可以直接在模板中使用稚晚，值暫時寫成一個對象（以后還會寫成函數(shù)）。
2.3 分析Hello效果
Vue實例和容器是<font color="red">一一對應(yīng)</font>的型诚，真實開發(fā)中只有一個Vue實例客燕，而且還會配合組件一起使用。data中的數(shù)據(jù)只要發(fā)生改變俺驶，模板中用到該數(shù)據(jù)的地方就會自動更新幸逆。{{xxx}}中的xxx要寫js表達(dá)式，且xxx可以自動讀取到data中的屬性暮现。-
復(fù)習(xí)一個點：【
js表達(dá)式】與【js語句】- 表達(dá)式：會產(chǎn)生一個值还绘，可以放在任何一個需要值的地方，例如：
(1).
1
(2).a
(3).x > = 18 ? '成年' : '未成年'
(4).200 - 2
(5).arr.map()等等....
- 語句（代碼）: 不會產(chǎn)生值栖袋，只是控制代碼走向拍顷，例如：
(1).
if ( ) {}
(2).for ( ) {}
(3).try {} catch (err) {}
等等....
3. 了解開發(fā)者工具
- 視角一
- 視角二
4. Vue的模板語法
4.1 插值與指令
-
插值語法（簡單）：
功能：用于操作標(biāo)簽體，可以在標(biāo)簽體的指定位置插入數(shù)據(jù)塘幅。
寫法：{{xxx}}昔案，xxx是js表達(dá)式尿贫，且可以自動讀取到data中配置的所有屬性。 -
指令語法（復(fù)雜）：
功能：用于操作標(biāo)簽（標(biāo)簽屬性踏揣、標(biāo)簽體庆亡、綁定事件......）
舉例：v-bind:href = "xxx"，xxx 是js表達(dá)式捞稿，且可以自動讀取到data中配置的所有屬性又谋。 備注：
Vue中有很多的指令，形式都是v-???娱局，此處我們只是拿v-bind舉個例子彰亥。-
務(wù)必搞懂如下代碼：
<a v-bind:href="url" a="url" v-bind:b="url" c="1+1" v-bind:d="1+1" e="url.toUpperCase()" v-bind:f="url.toUpperCase()" > 點我去{{school.name}}學(xué)習(xí) </a> <script type="text/javascript"> new Vue({ el: '#demo', data: { school: '尚硅谷', url: 'http://www.atguigu.com' } }) </script>
4.2 v-bind 的簡寫
- 指令才能簡寫為
:別的指令不行。 - 其他的指令有其他的簡寫形式衰齐、但并不是所有的指令都有簡寫形式任斋。
5. 數(shù)據(jù)綁定
-
Vue中有兩種綁定數(shù)據(jù)的方式：- 單向數(shù)據(jù)綁定（
v-bind）：數(shù)據(jù)只能從data流向頁面。 - 雙向數(shù)據(jù)綁定（
v-model）：數(shù)據(jù)不僅能從data流向頁面耻涛，也能從頁面流向data废酷。
- 單向數(shù)據(jù)綁定（
-
注意點：
-
v-model目前只能用在輸入類（表單類）元素上（以后還能用寫在組件標(biāo)簽上）。 -
v-model默認(rèn)收集的是value值犬第，所以v-model:value="xxx"可以簡寫為v-model="xxx"锦积。
-
-
核心代碼：
<!-- 準(zhǔn)備好一個容器--> <div id="demo"> <!-- 標(biāo)準(zhǔn)寫法 --> 單項數(shù)據(jù)綁定：<input type="text" v-bind:value="school"> <br><br> 雙項數(shù)據(jù)綁定：<input type="text" v-model:value="school"> <!-- 簡寫形式 --> 單項數(shù)據(jù)綁定：<input type="text" :value="school"> <br> 雙向數(shù)據(jù)綁定：<input type="text" v-model="school"> <!-- 下面的代碼是不對的，v-model只能用在輸入類元素上 --> <!-- <h1 v-model="school">你好</h1> --> </div> <script type="text/javascript"> new Vue({ el:'#demo', data:{ school:'尚硅谷' } }) </script>
6. el 與 data 的寫法
6.1 el 的三種寫法
-
第一種寫法：值為
css選擇器字符串new Vue({ el:'#demo' //****** }) -
第二種寫法：值為一個真實
DOM元素 —— 幾乎不用歉嗓，了解即可丰介。new Vue({ el:document.getElementById('demo'), //****** }) -
第三種寫法：使用
$mount方法去替代el配置。new Vue(/******/).$mount('#demo')
6.2 data 的兩種寫法
-
第一種（對象式）
data:{ school:'尚硅谷' } -
第二種（函數(shù)式）—— 最近不用鉴分，以后會用哮幢。
data(){ return { school:'尚硅谷' } }
7. 理解MVVM
-
M：模型(Model) ：data中的數(shù)據(jù)。 -
V：視圖(View) ：模板志珍。 -
VM：視圖模型(ViewModel) ： Vue實例對象橙垢。
8. 認(rèn)識一下vm
vm身上有很多$開頭的屬性或方法，這是給我們程序員用的（但也不是都用）伦糯。data中所配置的屬性柜某，也不知道怎么了（后面會詳細(xì)說），最終都出現(xiàn)在了vm身上敛纲。vm身上所有的屬性喂击，以及順著vm能找到的東西，都能在模板中直接使用淤翔，但往往我們使用的只是那些：配置項中所寫的東西翰绊。-
務(wù)必搞懂如下代碼：
<!-- 準(zhǔn)備好一個容器--> <div id="demo"> <h1>{{school}}歡迎你！</h1> <h2>測試1：{{a}}</h2> <h2>測試2：{}</h2> <h2>測試3：{{_c}}</h2> <h2>測試4：{{$attrs}}</h2> <h2>測試5：{{toString}}</h2> <h2>測試6：{hivnacu}</h2> </div> <script type="text/javascript"> Object.prototype.d = 9 let vm = new Vue({ el: '#demo', data: { school: '尚硅谷', a: 1, b: 2 } }) // 輸出Vue實例對象 —— vm console.log(vm) </script>
9. 復(fù)習(xí)Object.defineProperty
-
Object.defineProperty监嗜，能給對象追加屬性谐檀，并且可以對屬性進行“高級定制”。//定義一個對象 let person = {name:'張三',sex:'女'} //通過Object.defineProperty裁奇，也可以給person對象追加一個age屬性桐猬，且可以對age進行“高級定制”。 Object.defineProperty(person,'age',{ value:90,//值 enumerable:true, //控制屬性是否可以枚舉(是否參與遍歷)框喳，默認(rèn)值是false configurable:true, //控制屬性是否可以刪除课幕，默認(rèn)值是false writable:true,//控制屬性是否可以被修改，默認(rèn)值是false }) -
Object.defineProperty的get與set配置：//定義一個number變量 let number = 18 // 定義一個person對象 let person = {name:'張三',sex:'女'} //借助Object.defineProperty去追加age屬性 Object.defineProperty(person,'age',{ enumerable:true, //get函數(shù)（getter）何時執(zhí)行五垮？—— 有人讀取person對象的age屬性時執(zhí)行 //get函數(shù)（getter）中的this是誰？ —— 當(dāng)前對象（person） get:function peiqi(){ console.log('getter執(zhí)行了',this) return number }, //set函數(shù)（setter）何時會被調(diào)用杜秸？ —— 有人修改person對象的age屬性時執(zhí)行 //get函數(shù)（setter）中的this是誰放仗？ —— 當(dāng)前對象（person） set:function qiaozhi(value){ console.log('有人修改了person的age屬性，值為：',value,this) number = value } })
10. 數(shù)據(jù)代理
10.1 何為數(shù)據(jù)代理
通過一個對象代理對另一個對象中屬性的操作（讀/寫）撬碟。
10.2 Vue中的數(shù)據(jù)代理
前情提要：我們
new Vue(options)時傳入的那個data诞挨，Vue收到后放在了vm上，名為_data呢蛤。Vue中的數(shù)據(jù)代理：通過vm來對_data中屬性的操作（讀/寫）惶傻。-
Vue中數(shù)據(jù)代理的好處：模板中可以更加方便的操作_data中的數(shù)據(jù)，例如：若無數(shù)據(jù)代理其障，這么寫：
{{_data.name}}—— 很麻煩银室。若有數(shù)據(jù)代理，這么寫：
{{name}}—— 香励翼！注意：此時我們先不關(guān)注
_data中為什么也有getter蜈敢、setter，過幾天就會說汽抚。
10.3 數(shù)據(jù)代理的原理
遍歷
_data對象中所有的屬性抓狭，通過Object.defineProperty()一個一個都添加到vm上。隨后
vm上就擁有了_data中所有的屬性造烁，且都有自己的getter否过、setter。getter惭蟋、setter內(nèi)部操作（讀/寫）的是_data中對應(yīng)的屬性苗桂。
