1.Vue的介紹
（1）Vue是一套構(gòu)建用戶界面的漸進(jìn)式前端框架蔚龙。
（2）只關(guān)注視圖層挟阻，并且非常容易學(xué)習(xí)，還可以很方便的與其它庫或已有項目整合嫁艇。
（3）通過盡可能簡單的API來實現(xiàn)響應(yīng)數(shù)據(jù)的綁定和組合的視圖組件。
（4）特點
? ? ? ? ? ? ? * 易用：在有HTMLCSSJavaScript的基礎(chǔ)上弦撩，快速上手步咪。
? ? ? ? ? ? ? * 靈活：簡單小巧的核心，漸進(jìn)式技術(shù)棧益楼，足以應(yīng)付任何規(guī)模的應(yīng)用猾漫。
? ? ? ? ? ? ? * 性能：20kbmin+gzip運行大小、超快虛擬DOM感凤、最省心的優(yōu)化悯周。
2.Vue的快速入門
2.1.編寫步驟：
（1）下載和引入vue.js文件。
（2）編寫入門程序陪竿。
? ? ? ? ? ? ? ? 視圖：負(fù)責(zé)頁面渲染队橙，主要由HTML+CSS構(gòu)成。
? ? ? ? ? ? ? ? 腳本：負(fù)責(zé)業(yè)務(wù)數(shù)據(jù)模型（Model）以及數(shù)據(jù)的處理邏輯萨惑。
2.2.代碼：
2.3小結(jié)：
（1）Vue是一套構(gòu)建用戶界面的漸進(jìn)式前端框架捐康。
（2）Vue的程序包含視圖和腳本兩個核心部分。
（3）腳本部分
? ? ? ? ?* Vue核心對象：每一個 Vue 程序都是從一個 Vue 核心對象開始的庸蔼。
? ? ? ? ?* 選項列表
? ? ? ? ? ? ? ?* el：接收獲取的元素解总。
? ? ? ? ? ? ? ?* data：保存數(shù)據(jù)。
? ? ? ? ? ? ? ?* methods：定義方法姐仅。
? ? ? ? ?* 視圖部分
? ? ? ? ? ? ? ?* 數(shù)據(jù)綁定：{{變量名}}
3.Vue 常用指令
3.1.指令介紹
（1）指令：是帶有 v- 前綴的特殊屬性花枫，不同指令具有不同含義。例如 v-html掏膏，v-if劳翰，v-for。
（2）使用指令時馒疹，通常編寫在標(biāo)簽的屬性上佳簸，值可以使用 JS 的表達(dá)式
（3）常用指令：
3.2.代碼形式介紹
（1）文本插值：v-html：把文本解析為 HTML 代碼。
（2）綁定屬性：v-bind：為 HTML 標(biāo)簽綁定屬性值颖变。
（3）條件渲染：
v-if：條件性的渲染某元素生均，判定為真時渲染,否則不渲染。
v-else：條件性的渲染腥刹。
v-else-if：條件性的渲染马胧。
v-show：根據(jù)條件展示某元素，區(qū)別在于切換的是display屬性的值衔峰。
（4）列表渲染：v-for：列表渲染佩脊，遍歷容器的元素或者對象的屬性蛙粘。
（5）事件綁定：v-on：為 HTML 標(biāo)簽綁定事件。
（6）表單綁定：v-model：在表單元素上創(chuàng)建雙向數(shù)據(jù)綁定威彰。
雙向數(shù)據(jù)綁定：
? ? ? ?當(dāng)原始數(shù)據(jù)產(chǎn)生更改出牧，頁面數(shù)據(jù)也會隨之改變。
? ? ? ?頁面數(shù)據(jù)更改時抱冷，原始數(shù)據(jù)也隨之而變崔列。
MVVM模型(ModelViewViewModel)：是MVC模式的改進(jìn)版：
? ? ? 在前端頁面中梢褐，JS對象表示Model旺遮，頁面表示View，兩者做到了最大限度的分離盈咳。 將Model和View關(guān)聯(lián)起來的就是ViewModel耿眉，它是橋梁。ViewModel負(fù)責(zé)把Model的數(shù)據(jù)同步到View顯示出來鱼响，還負(fù)責(zé)把View修改的數(shù)據(jù)同步回Model鸣剪。
4.Vue 自定義組件
（1）概念：本質(zhì)上，組件是帶有一個名字且可復(fù)用的 Vue 實例丈积。
（2）定義格式：
? ? ? ? ?Vue.component(組件名稱, {
? ? ? ? ?props:組件的屬性,
? ? ? ? ?data: 組件的數(shù)據(jù)函數(shù),
? ? ? ? template: 組件解析的標(biāo)簽?zāi)０?/p>
? ? ? ? })
（3）代碼形式介紹：
5.Vue的生命周期
（1）生命周期：一個vue實列筐骇，在beforeCreate（創(chuàng)建前）階段，會進(jìn)行事件及生命周期的初始化江滨，在created（創(chuàng)建后）階段铛纬，進(jìn)行注入以及校驗；在beforeMount（載入前）階段唬滑，進(jìn)行判斷是否指定了“el”選項告唆，否，則查看當(dāng)前是否調(diào)用vm.$mount(el)函數(shù)晶密，當(dāng)前函數(shù)與“el”功能一致擒悬，都是用來去解析元素的，如果沒有調(diào)用稻艰，則當(dāng)前元素?zé)o法解析懂牧，導(dǎo)致程序無法繼續(xù)執(zhí)行；而當(dāng)前有調(diào)用vm.$mount(el)函數(shù)或者指定了“el”選項尊勿，則接著進(jìn)行判斷是否指定template模板選項归苍，是，會將template進(jìn)行編譯到render函數(shù)中运怖，否將el外部的HTML作為template進(jìn)行編譯拼弃；在mounted（載入后）階段，進(jìn)行vm.$el的創(chuàng)建摇展，并用其替換掉“el”吻氧，當(dāng)前整個vue已經(jīng)掛載完畢，如果在沒有數(shù)據(jù)修改的狀態(tài)下，緊接著是進(jìn)入到銷毀階段盯孙，在有數(shù)據(jù)修改的狀態(tài)下鲁森，會進(jìn)入beforeUpdate（更新前）階段，進(jìn)行虛擬DOM重新渲染并應(yīng)用更新振惰；接著進(jìn)入updated（更新后）階段歌溉；當(dāng)調(diào)用vm.$destroy()函數(shù)時，進(jìn)入beforeDestroy（銷毀前）階段骑晶；進(jìn)行綁定解除以及銷毀子組件和事件監(jiān)聽器痛垛，最后銷毀完畢destroyed（銷毀后）階段。
（2）生命周期演示效果
