什么是Vue?

Vue.js 是一套構(gòu)建用戶界面的框架患朱，它不僅易于上手，還可以與其它第三方庫整合(Swiper炊苫、IScroll裁厅、...)。

2.框架和庫的區(qū)別?
框架：是一套完整的解決方案侨艾；對項(xiàng)目的侵入性較大执虹，項(xiàng)目如果需要更換框架，則需要重構(gòu)整個(gè)項(xiàng)目唠梨。
庫（插件）：提供某一個(gè)小功能声畏，對項(xiàng)目的侵入性較小渔伯，如果某個(gè)庫無法完成某些需求陶缺，可以很容易切換到其它庫實(shí)現(xiàn)需求迟杂。
例如: 從jQuery 切換到 Zepto, 無縫切換
從IScroll切換到ScrollMagic, 只需要將用到IScroll的代碼替換成ScrollMagic代碼即可

3.為什么要學(xué)習(xí)框架?
提升開發(fā)效率：在企業(yè)中跛蛋，時(shí)間就是效率唧领，效率就是金錢争涌；
前端提高開發(fā)效率的發(fā)展歷程：原生JS -> jQuery之類的類庫 -> 前端模板引擎 -> Vue / React / Angular

4.框架有很多, 為什么要先學(xué)Vue
Vue嘉冒、Angular削葱、React一起才睹，被稱之為前端三大主流框架徘跪！
但是Angular甘邀、React是老外編寫的, 所以所有的資料都是英文的
而Vue是國人編寫的, 所以所有的資料都是中文的, 并且Vue中整合了Angular、React中的眾多優(yōu)點(diǎn)
所以為了降低我們的學(xué)習(xí)難度, 我們先學(xué)Vue, 學(xué)完之后再學(xué)習(xí)Angular和React

5.使用Vue有哪些優(yōu)勢?
5.1Vue的核心概念之一:
通過數(shù)據(jù)驅(qū)動(dòng)界面更新, 無需操作DOM來更新界面
使用Vue我們只需要關(guān)心如何獲取數(shù)據(jù), 如何處理數(shù)據(jù), 如何編寫業(yè)務(wù)邏輯代碼,
我們只需要將處理好的數(shù)據(jù)交給Vue, Vue就會(huì)自動(dòng)將數(shù)據(jù)渲染到模板中(界面上)
5.2Vue的核心概念之二:
組件化開發(fā)垮庐，我們可以將網(wǎng)頁拆分成一個(gè)個(gè)獨(dú)立的組件來編寫
將來再通過封裝好的組件拼接成一個(gè)完整的網(wǎng)頁
https://cn.vuejs.org/images/components.png

<!
1.Vue框架使用方式
1.1傳統(tǒng)下載導(dǎo)入使用
1.2vue-cli安裝導(dǎo)入使用

2.Vue框架使用步驟
2.1下載Vue框架
2.2導(dǎo)入Vue框架
2.3創(chuàng)建Vue實(shí)例對象
2.4指定Vue實(shí)例對象控制的區(qū)域
2.5指定Vue實(shí)例對象控制區(qū)域的數(shù)據(jù)'
-->

<!
1.MVVM設(shè)計(jì)模式
在MVVM設(shè)計(jì)模式中由3個(gè)部分組成
M : Model 數(shù)據(jù)模型(保存數(shù)據(jù), 處理數(shù)據(jù)業(yè)務(wù)邏輯)
V : View 視圖(展示數(shù)據(jù), 與用戶交互)
VM: View Model 數(shù)據(jù)模型和視圖的橋梁(M是中國人, V是美國人, VM就是翻譯)

MVVM設(shè)計(jì)模式最大的特點(diǎn)就是支持?jǐn)?shù)據(jù)的雙向傳遞
數(shù)據(jù)可以從 M -> VM -> V
也可以從 V -> VM -> M

2.Vue中MVVM的劃分
Vue其實(shí)是基于MVVM設(shè)計(jì)模式的
被控制的區(qū)域: View
Vue實(shí)例對象 : View Model
實(shí)例對象中的data: Model

3.Vue中數(shù)據(jù)的單向傳遞
我們把"數(shù)據(jù)"交給"Vue實(shí)例對象", "Vue實(shí)例對象"將數(shù)據(jù)交給"界面"
Model -> View Model -> View
-->

<!
1.Vue調(diào)試工具安裝
如果你能打開谷歌插件商店, 直接在線安裝即可
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=zh-CN

由于國內(nèi)無法打開谷歌國外插件商店, 所以可以離線安裝
https://www.chromefor.com/vue-js-devtools_v5-3-0/

2.安裝步驟:
2.1下載離線安裝包
2.2打開谷歌插件界面
2.3直接將插件拖入
2.4報(bào)錯(cuò) 程序包無效: "CRX_HEADER_INVALID"
可以將安裝包修改為rar后綴, 解壓之后再安裝
2.5重啟瀏覽器
-->
<!
2.數(shù)據(jù)雙向綁定
默認(rèn)情況下Vue只支持?jǐn)?shù)據(jù)單向傳遞 M -> VM -> V
但是由于Vue是基于MVVM設(shè)計(jì)模式的, 所以也提供了雙向傳遞的能力
在<input>松邪、<textarea> 及 <select> 元素上可以用 v-model 指令創(chuàng)建雙向數(shù)據(jù)綁定

注意點(diǎn): v-model 會(huì)忽略所有表單元素的 value、checked哨查、selected 特性的初始值
而總是將 Vue 實(shí)例的數(shù)據(jù)作為數(shù)據(jù)來源
-->

<!
1.什么是指令?
指令就是Vue內(nèi)部提供的一些自定義屬性,
這些屬性中封裝好了Vue內(nèi)部實(shí)現(xiàn)的一些功能
只要使用這些指令就可以使用Vue中實(shí)現(xiàn)的這些功能

2.Vue數(shù)據(jù)綁定的特點(diǎn)
只要數(shù)據(jù)發(fā)生變化, 界面就會(huì)跟著變化

3.v-once指令:
讓界面不要跟著數(shù)據(jù)變化, 只渲染一次
-->

<!
1.Vue數(shù)據(jù)綁定過程
1.1會(huì)先將未綁定數(shù)據(jù)的界面展示給用戶
1.2然后再根據(jù)模型中的數(shù)據(jù)和控制的區(qū)域生成綁定數(shù)據(jù)之后的HTML代碼
1.3最后再將綁定數(shù)據(jù)之后的HTML渲染到界面上

正是在最終的HTML被生成渲染之前會(huì)先顯示模板內(nèi)容
所以如果用戶網(wǎng)絡(luò)比較慢或者網(wǎng)頁性能比較差, 那么用戶會(huì)看到模板內(nèi)容

2.如何解決這個(gè)問題
利用v-cloak配合 [v-cloak]:{display: none}默認(rèn)先隱藏未渲染的界面
等到生成HTML渲染之后再重新顯示

3.v-cloak指令作用:
數(shù)據(jù)渲染之后自動(dòng)顯示元素
-->

<!
1.什么是v-text指令
v-text就相當(dāng)于過去學(xué)習(xí)的innerText

2.什么是v-html指令
v-html就相當(dāng)于過去學(xué)習(xí)的innerHTML
-->

<!
1.什么是v-if指令
條件渲染: 如果v-if取值是true就渲染元素, 如果不是就不渲染元素

2.v-if特點(diǎn):
如果條件不滿足根本就不會(huì)創(chuàng)建這個(gè)元素(重點(diǎn))

3.v-if注意點(diǎn)
v-if可以從模型中獲取數(shù)據(jù)
v-if也可以直接賦值一個(gè)表達(dá)式
-->

<!
4.v-else指令
v-else指令可以和v-if指令配合使用, 當(dāng)v-if不滿足條件時(shí)就執(zhí)行v-else就顯示v-else中的內(nèi)容

5.v-else注意點(diǎn)
v-else不能單獨(dú)出現(xiàn)
v-if和v-else中間不能出現(xiàn)其它內(nèi)容
-->
<!
6.v-else-if指令
v-else-if可以和v-if指令配合使用, 當(dāng)v-if不滿足條件時(shí)就依次執(zhí)行后續(xù)v-else-if, 哪個(gè)滿足就顯示哪個(gè)

7.v-else-if注意點(diǎn)
和v-else一樣
-->

<!
1.什么是v-show指令
v-show和v-if的能夠一樣都是條件渲染, 取值為true就顯示, 取值為false就不顯示

2.v-if和v-show區(qū)別
v-if: 只要取值為false就不會(huì)創(chuàng)建元素
v-show: 哪怕取值為false也會(huì)創(chuàng)建元素, 只是如果取值是false會(huì)設(shè)置元素的display為none

3.v-if和v-show應(yīng)用場景
由于取值為false時(shí)v-if不會(huì)創(chuàng)建元素, 所以如果需要切換元素的顯示和隱藏, 每次v-if都會(huì)創(chuàng)建和刪除元素
由于取值為false時(shí)v-show會(huì)創(chuàng)建元素并設(shè)置display為none, 所有如果需要切換元素的顯示和隱藏,
不會(huì)反復(fù)創(chuàng)建和刪除, 只是修改display的值
所以: 如果企業(yè)開發(fā)中需要頻繁切換元素顯示隱藏, 那么推薦使用v-show, 否則使用v-if
-->

<!
1.什么是v-bind指令
在企業(yè)開發(fā)中想要給"元素"綁定數(shù)據(jù), 我們可以使用{{}}, v-text, v-html
但是如果想給"元素的屬性"綁定數(shù)據(jù), 就必須使用v-bind
所以v-bind的作用是專門用于給"元素的屬性"綁定數(shù)據(jù)的

2.v-bind格式
v-bind:屬性名稱="綁定的數(shù)據(jù)"
:屬性名稱="綁定的數(shù)據(jù)"

3.v-bind特點(diǎn)
賦值的數(shù)據(jù)可以是任意一個(gè)合法的JS表達(dá)式
例如: :屬性名稱="age + 1"
-->

<!
1.v-bind指令的作用
v-bind指令給"任意標(biāo)簽"的"任意屬性"綁定數(shù)據(jù)
對于大部分的屬性而言我們只需要直接賦值即可, 例如:value="name"
但是對class于和style屬性而言, 它的格式比較特殊

2.通過v-bind綁定類名格式
:class="['需要綁定類名', ...]"

3.注意點(diǎn):
3.1直接賦值一個(gè)類名(沒有放到數(shù)組中)默認(rèn)回去Model中查找
:class="需要綁定類名"
2.2數(shù)組中的類名沒有用引號括起來也會(huì)去Model中查找
:class="[需要綁定類名]"
2.3數(shù)組的每一個(gè)元素都可以是一個(gè)三目運(yùn)算符按需導(dǎo)入
:class="[flag?'active':'']"
2.4可以使用對象來替代數(shù)組中的三目運(yùn)算符按需導(dǎo)入
:class="[{'active': true}]"
2.5綁定的類名太多可以將類名封裝到Model中
obj: {
'color': true,
'size': true,
'active': false,
}

4.綁定類名企業(yè)應(yīng)用場景
從服務(wù)器動(dòng)態(tài)獲取樣式后通過v-bind動(dòng)態(tài)綁定類名
這樣就可以讓服務(wù)端來控制前端樣式
常見場景: 618 雙11等
-->

<!
1.如何通過v-bind給style屬性綁定數(shù)據(jù)
1.1將數(shù)據(jù)放到對象中
:style="{color:'red','font-size':'50px'}"
1.2將數(shù)據(jù)放到Model對象中
obj: {
color: 'red',
'font-size': '80px',
}

2.注意點(diǎn)
2.1如果屬性名稱包含-, 那么必須用引號括起來
2.2如果需要綁定Model中的多個(gè)對象, 可以放到一個(gè)數(shù)組中賦值
-->

<div id="app">
<!- <p style="color: red">我是段落</p>-->
<!
注意點(diǎn):
和綁定類名一樣, 默認(rèn)情況下v-bind回去Model中查找, 找不到所以沒有效果
-->
<! <p :style="color: red">我是段落</p>-->
<!
注意點(diǎn):
我們只需要將樣式代碼放到對象中賦值給style即可
但是取值必須用引號括起來
-->
<! <p :style="{color: 'red'}">我是段落</p>-->
<!
注意點(diǎn):
如果樣式的名稱帶-, 那么也必須用引號括起來才可以
-->
<! <p :style="{color: 'red', 'font-size': '100px'}">我是段落</p>-->
<! <p :style="obj">我是段落</p>-->
<!
注意點(diǎn):
如果Model中保存了多個(gè)樣式的對象 ,想將多個(gè)對象都綁定給style, 那么可以將多個(gè)對象放到數(shù)組中賦值給style即可
-->

<!
1.什么是v-on指令?
v-on指令專門用于給元素綁定監(jiān)聽事件

2.v-on指令格式
v-on:事件名稱="回調(diào)函數(shù)名稱"
@事件名稱="回調(diào)函數(shù)名稱"

3.v-on注意點(diǎn):
v-on綁定的事件被觸發(fā)之后, 會(huì)去Vue實(shí)例對象的methods中查找對應(yīng)的回調(diào)函數(shù)
-->

<div id="app">
<! <button onclick="alert('lnj')">我是按鈕</button>-->
<!
注意點(diǎn):
1.如果是通過v-on來綁定監(jiān)聽事件, 那么在指定事件名稱的時(shí)候不需要寫on
2.如果是通過v-on來綁定監(jiān)聽事件, 那么在賦值的時(shí)候必須賦值一個(gè)回調(diào)函數(shù)的名稱
-->
<! <button v-on:click="alert('lnj')">我是按鈕</button>-->
<!
注意點(diǎn):
當(dāng)綁定的事件被觸發(fā)后, 會(huì)調(diào)用Vue實(shí)例的methods對象中對應(yīng)的回調(diào)函數(shù)
-->

<!
1.v-on修飾符
在事件中有很多東西需要我們處理, 例如事件冒泡,事件捕獲, 阻止默認(rèn)行為等
那么在Vue中如何處理以上內(nèi)容呢, 我們可以通過v-on修飾符來處理

2.常見修飾符
.once - 只觸發(fā)一次回調(diào)逗抑。
.prevent - 調(diào)用 event.preventDefault()。
.stop - 調(diào)用 event.stopPropagation()寒亥。
.self - 只當(dāng)事件是從偵聽器綁定的元素本身觸發(fā)時(shí)才觸發(fā)回調(diào)邮府。
.capture - 添加事件偵聽器時(shí)使用 capture 模式。
-->

<!
1.v-on注意點(diǎn)
1.1綁定回調(diào)函數(shù)名稱的時(shí)候, 后面可以寫()也可以不寫
v-on:click="myFn"
v-on:click="myFn()"

1.2可以給綁定的回調(diào)函數(shù)傳遞參數(shù)
v-on:click="myFn('lnj', 33)"

1.3如果在綁定的函數(shù)中需要用到data中的數(shù)據(jù)必須加上this
-->

<!
1.什么是按鍵修飾符
我們可以通過按鍵修飾符監(jiān)聽特定按鍵觸發(fā)的事件
例如: 可以監(jiān)聽當(dāng)前事件是否是回車觸發(fā)的, 可以監(jiān)聽當(dāng)前事件是否是ESC觸發(fā)的等

2.按鍵修飾符分類
2.1系統(tǒng)預(yù)定義修飾符
2.2自定義修飾符
-->

<!
1.自定義全局指令
在Vue中除了可以使用Vue內(nèi)置的一些指令以外, 我們還可以自定義指令

2.自定義全局指令語法
ue.directive('自定義指令名稱', {
生命周期名稱: function (el) {
指令業(yè)務(wù)邏輯代碼
}
});

3.指令生命周期方法
自定義指令時(shí)一定要明確指令的業(yè)務(wù)邏輯代碼更適合在哪個(gè)階段執(zhí)行
例如: 指令業(yè)務(wù)邏輯代碼中沒有用到元素事件, 那么可以在bind階段執(zhí)行
例如: 指令業(yè)務(wù)邏輯代碼中用到了元素事件, 那么就需要在inserted階段執(zhí)行

4.自定義指令注意點(diǎn)
使用時(shí)需要加上v-, 而在自定義時(shí)不需要加上v-
-->
'
<!
1.自定義指令參數(shù)
在使用官方指令的時(shí)候我們可以給指令傳參
例如: v-model="name"
在我們自定義的指令中我們也可以傳遞傳遞

2.獲取自定義指令傳遞的參數(shù)
在執(zhí)行自定義指令對應(yīng)的方法的時(shí)候, 除了會(huì)傳遞el給我們, 還會(huì)傳遞一個(gè)對象給我們
這個(gè)對象中就保存了指令傳遞過來的參數(shù)
-->

<!
1.自定義全局指令的特點(diǎn)
在任何一個(gè)Vue實(shí)例控制的區(qū)域中都可以使用

2.自定義局部指令的特點(diǎn)
只能在自定義的那個(gè)Vue實(shí)例中使用

3.如何自定義一個(gè)局部指令
給創(chuàng)建Vue實(shí)例時(shí)傳遞的對象添加
directives: {
// key: 指令名稱
// value: 對象
'color': {
bind: function (el, obj) {
el.style.color = obj.value; }}}
-->

<!
1.插值語法特點(diǎn)
可以在{{}}中編寫合法的JavaScript表達(dá)式

2.在插值語法中編寫JavaScript表達(dá)式缺點(diǎn)
2.1沒有代碼提示
2.2語句過于復(fù)雜不利于我們維護(hù)

3.如何解決?
對于任何復(fù)雜邏輯溉奕，你都應(yīng)當(dāng)使用計(jì)算屬性
-->

<!
1.計(jì)算屬性和函數(shù)
通過計(jì)算屬性我們能拿到處理后的數(shù)據(jù), 但是通過函數(shù)我們也能拿到處理后的數(shù)據(jù)
那么計(jì)算屬性和函數(shù)有什么區(qū)別呢?
2.1函數(shù)"不會(huì)"將計(jì)算的結(jié)果緩存起來, 每一次訪問都會(huì)重新求值
2.2計(jì)算屬性"會(huì)"將計(jì)算的結(jié)果緩存起來, 只要數(shù)據(jù)沒有發(fā)生變化, 就不會(huì)重新求值

2.計(jì)算屬性應(yīng)用場景
計(jì)算屬性:比較適合用于計(jì)算不會(huì)頻繁發(fā)生變化的的數(shù)據(jù)
-->

<!
1.什么是過濾器?
過濾器和函數(shù)和計(jì)算屬性一樣都是用來處理數(shù)據(jù)的
但是過濾器一般用于格式化插入的文本數(shù)據(jù)

2.如何自定義全局過濾器
Vue.filter("過濾器名稱", 過濾器處理函數(shù)):

3.如何使用全局過濾器
{{msg | 過濾器名稱}}
:value="msg | 過濾器名稱"

4.過濾器注意點(diǎn)
4.1只能在插值語法和v-bind中使用
4.2過濾器可以連續(xù)使用
-->

<!
1.自定義全局過濾器的特點(diǎn)
在任何一個(gè)Vue實(shí)例控制的區(qū)域中都可以使用

2.自定義局部過濾器的特點(diǎn)
只能在自定義的那個(gè)Vue實(shí)例中使用

3.如何自定義一個(gè)局部指令
給創(chuàng)建Vue實(shí)例時(shí)傳遞的對象添加
filters: {
// key: 過濾器名稱
// value: 過濾器處理函數(shù)
'formartStr': function (value) {}
}
-->

<!
1.transition注意點(diǎn):
transition中只能放一個(gè)元素, 多個(gè)元素?zé)o效
如果想給多個(gè)元素添加過渡動(dòng)畫, 那么就必須創(chuàng)建多個(gè)transition組件

2.初始動(dòng)畫設(shè)置
默認(rèn)情況下第一次進(jìn)入的時(shí)候沒沒有動(dòng)畫的
如果想一進(jìn)來就有動(dòng)畫, 我們可以通過給transition添加appear屬性的方式
告訴Vue第一次進(jìn)入就需要顯示動(dòng)畫

3.如何給多個(gè)不同的元素指定不同的動(dòng)畫
如果有多個(gè)不同的元素需要執(zhí)行不同的過渡動(dòng)畫,那么我們可以通過給transition指定name的方式
來指定"進(jìn)入之前/進(jìn)入之后/進(jìn)入過程中, 離開之前/離開之后/離開過程中"對應(yīng)的類名
來實(shí)現(xiàn)不同的元素執(zhí)行不同的過渡動(dòng)畫
-->

<!
1.當(dāng)前過渡存在的問題
通過transition+類名的方式確實(shí)能夠?qū)崿F(xiàn)過渡效果
但是實(shí)現(xiàn)的過渡效果并不能保存動(dòng)畫之后的狀態(tài)
因?yàn)閂ue內(nèi)部的實(shí)現(xiàn)是在過程中動(dòng)態(tài)綁定類名, 過程完成之后刪除類名
正式因?yàn)閯h除了類名, 所以不能保存最終的效果

2.在Vue中如何保存過渡最終的效果
通過Vue提供的JS鉤子來實(shí)現(xiàn)過渡動(dòng)畫
v-on:before-enter="beforeEnter" 進(jìn)入動(dòng)畫之前
v-on:enter="enter" 進(jìn)入動(dòng)畫執(zhí)行過程中
v-on:after-enter="afterEnter" 進(jìn)入動(dòng)畫完成之后
v-on:enter-cancelled="enterCancelled" 進(jìn)入動(dòng)畫被取消

v-on:before-leave="beforeLeave" 離開動(dòng)畫之前
v-on:leave="leave" 離開動(dòng)畫執(zhí)行過程中
v-on:after-leave="afterLeave" 離開動(dòng)畫完成之后
v-on:leave-cancelled="leaveCancelled" 離開動(dòng)畫被取消

3.JS鉤子實(shí)現(xiàn)過渡注意點(diǎn)
3.1在動(dòng)畫過程中必須寫上el.offsetWidth或者el.offsetHeight
3.2在enter和leave方法中必須調(diào)用done方法, 否則after-enter和after-leave不會(huì)執(zhí)行
3.3需要需要添加初始動(dòng)畫, 那么需要把done方法包裹到setTimeout方法中調(diào)用
-->

<!
1.自定義類名動(dòng)畫
在Vue中除了可以使用 默認(rèn)類名(v-xxx)來指定過渡動(dòng)畫
除了可以使用 自定義類名前綴(yyy-xx)來指定過渡動(dòng)畫(transition name="yyy")
除了可以使用 JS鉤子函數(shù)來指定過渡動(dòng)畫以外
還可以使用自定義類名的方式來指定過渡動(dòng)畫

enter-class // 進(jìn)入動(dòng)畫開始之前
enter-active-class // 進(jìn)入動(dòng)畫執(zhí)行過程中
enter-to-class // 進(jìn)入動(dòng)畫執(zhí)行完畢之后
leave-class // 離開動(dòng)畫開始之前
leave-active-class // 離開動(dòng)畫執(zhí)行過程中
leave-to-class // 離開動(dòng)畫執(zhí)行完畢之后
-->

<!
1.配合Animate.css實(shí)現(xiàn)過渡動(dòng)畫
1.1導(dǎo)入Animate.css庫
1.2在執(zhí)行過程中的屬性上綁定需要的類名
-->

<!
1.v-for注意點(diǎn)
1.1v-for為了提升性能, 在更新已渲染過的元素列表時(shí)褂傀，會(huì)采用“就地復(fù)用”策略。
也正是因?yàn)檫@個(gè)策略, 在某些時(shí)刻會(huì)導(dǎo)致我們的數(shù)據(jù)混亂
例如: 在列表前面新增了內(nèi)容
1.2為了解決這個(gè)問題, 我們可以在渲染列表的時(shí)候給每一個(gè)元素加上一個(gè)獨(dú)一無二的key
v-for在更新已經(jīng)渲染過的元素列表時(shí), 會(huì)先判斷key是否相同, 如果相同則復(fù)用, 如果不同則重新創(chuàng)建

2.key屬性注意點(diǎn)
不能使用index的作為key,因?yàn)楫?dāng)列表的內(nèi)容新增或者刪除時(shí)index都會(huì)發(fā)生變化
-->

<!
1.如何同時(shí)給多個(gè)元素添加過渡動(dòng)畫
通過transition可以給單個(gè)元素添加過渡動(dòng)畫
如果想給多個(gè)元素添加過渡動(dòng)畫, 那么就必須通過transition-group來添加

transition-group和transition的用法一致, 只是一個(gè)是給單個(gè)元素添加動(dòng)畫, 一個(gè)是給多個(gè)元素添加動(dòng)畫而已
-->

<!
1.transition-group注意點(diǎn):
默認(rèn)情況下transition-group會(huì)將動(dòng)畫的元素放到span標(biāo)簽中
我們可以通過tag屬性來指定將動(dòng)畫元素放到什么標(biāo)簽中

2.transition-group動(dòng)畫混亂問題
一般情況下組動(dòng)畫出現(xiàn)動(dòng)畫混亂都是因?yàn)関-for就地復(fù)用導(dǎo)致的
我們只需要保證所有數(shù)據(jù)key永遠(yuǎn)是唯一的即可
-->

<!
Vue兩大核心: 1.數(shù)據(jù)驅(qū)動(dòng)界面改變 2.組件化
1.什么是組件? 什么是組件化?
1.1在前端開發(fā)中組件就是把一個(gè)很大的界面拆分為多個(gè)小的界面, 每一個(gè)小的界面就是一個(gè)組件
1.2將大界面拆分成小界面就是組件化

2.組件化的好處
2.1可以簡化Vue實(shí)例的代碼
2.2可以提高復(fù)用性

3.Vue中如何創(chuàng)建組件?
3.1創(chuàng)建組件構(gòu)造器
3.2注冊已經(jīng)創(chuàng)建好的組件
3.3使用注冊好的組件
-->

<!
1.創(chuàng)建組件的其它方式
1.1在注冊組件的時(shí)候, 除了傳入一個(gè)組件構(gòu)造器以外, 還可以直接傳入一個(gè)對象
1.2在編寫組件模板的時(shí)候, 除了可以在字符串模板中編寫以外, 還可以像過去的art-template一樣在script中編寫
1.3在編寫組件模板的時(shí)候, 除了可以在script中編寫以外, vue還專門提供了一個(gè)編寫模板的標(biāo)簽template
-->

<!
1.自定義全局組件特點(diǎn)
在任何一個(gè)Vue實(shí)例控制的區(qū)域中都可以使用

2.自定義局部組件特點(diǎn)
只能在自定義的那個(gè)Vue實(shí)例控制的區(qū)域中可以使用

3.如何自定義一個(gè)局部組件
在vue實(shí)例中新增components: {}
在{}中通過key/vue形式注冊組件
components:{
abc: {}
}
-->

<!
1.自定義組件中的data和methods
Vue實(shí)例控制的區(qū)域相當(dāng)于一個(gè)大的組件, 在大組件中我們可以使用data和methods
而我們自定義的組件也是一個(gè)組件, 所以在自定義的組件中也能使用data和methods

2.自定義組件中data注意點(diǎn)
在自定義組件中不能像在vue實(shí)例中一樣直接使用data
而是必須通過返回函數(shù)的方式來使用data
-->

<!
1.什么是生命周期方法?
和wbpack生命周期方法一樣, 都是在從生到死的特定階段調(diào)用的方法
PS: 生命周期鉤子 = 生命周期函數(shù) = 生命周期事件
2.Vue生命周期方法分類
2.1創(chuàng)建期間的生命周期方法
beforeCreate:
created:
beforeMount:
mounted:
2.2運(yùn)行期間的生命周期方法
beforeUpdate:
updated:
2.3銷毀期間的生命周期方法
beforeDestroy:
destroyed：
-->