開(kāi)篇

• 1.什么是Vue?

  • Vue.js是一套構(gòu)建用戶(hù)界面的框架熙含，它不僅易于上手罚缕，還可以與其它第三方庫(kù)整合(Swiper、IScroll怎静、...)邮弹。

• 2.框架和庫(kù)的區(qū)別?

  • 框架：是一套完整的解決方案；對(duì)項(xiàng)目的侵入性較大蚓聘，項(xiàng)目如果需要更換框架腌乡，則需要重構(gòu)整個(gè)項(xiàng)目。
  • 庫(kù)（插件）：提供某一個(gè)小功能夜牡，對(duì)項(xiàng)目的侵入性較小与纽，如果某個(gè)庫(kù)無(wú)法完成某些需求，可以很容易切換到其它庫(kù)實(shí)現(xiàn)需求。
    • 例如: 從jQuery 切換到 Zepto, 無(wú)縫切換
    • 從IScroll切換到ScrollMagic, 只需要將用到IScroll的代碼替換成ScrollMagic代碼即可

• 3.為什么要學(xué)習(xí)框架?

  • 提升開(kāi)發(fā)效率：在企業(yè)中急迂，時(shí)間就是效率影所，效率就是金錢(qián)；
  • 前端提高開(kāi)發(fā)效率的發(fā)展歷程：原生JS -> jQuery之類(lèi)的類(lèi)庫(kù) -> 前端模板引擎 -> Vue / React / Angular

• 4.框架有很多, 為什么要先學(xué)Vue

  • Vue僚碎、Angular猴娩、React一起，被稱(chēng)之為前端三大主流框架勺阐！
    • 但是Angular卷中、React是老外編寫(xiě)的, 所以所有的資料都是英文的
    • 而Vue是國(guó)人編寫(xiě)的,所以所有的資料都是中文的,并且Vue中整合了Angular、React中的眾多優(yōu)點(diǎn)
    • 所以為了降低我們的學(xué)習(xí)難度,我們先學(xué)Vue, 學(xué)完之后再學(xué)習(xí)Angular和React

• 5.使用Vue有哪些優(yōu)勢(shì)?

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

Vue基本模板

• 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í)例對(duì)象
  • 2.4指定Vue實(shí)例對(duì)象控制的區(qū)域
  • 2.5指定Vue實(shí)例對(duì)象控制區(qū)域的數(shù)據(jù)

Vue數(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ù), 與用戶(hù)交互)
    • VM: View Model 數(shù)據(jù)模型和視圖的橋梁(M是中國(guó)人, V是美國(guó)人, 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í)例對(duì)象 : View Model
    • 實(shí)例對(duì)象中的data: Model

• 3.Vue中數(shù)據(jù)的單向傳遞

  • 我們把"數(shù)據(jù)"交給"Vue實(shí)例對(duì)象","Vue實(shí)例對(duì)象"將數(shù)據(jù)交給"界面"
  • Model -> View Model -> View

<!--這里就是MVVM中的View-->
<div id="app">
    <p>{{ name }}</p>
</div>
<script>
// 這里就是MVVM中的View Model
let vue = new Vue({
    el: '#app',
    // 這里就是MVVM中的Model
    data: {
        name: "微雙"
    }
});
</script>

Vue數(shù)據(jù)雙向傳遞

• 1.Vue調(diào)試工具安裝

  • 如果你能打開(kāi)谷歌插件商店, 直接在線安裝即可
    https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=zh-CN
  • 由于國(guó)內(nèi)無(wú)法打開(kāi)谷歌國(guó)外插件商店, 所以可以離線安裝
    https://www.chromefor.com/vue-js-devtools_v5-3-0/

• 2.安裝步驟:

  • 2.1下載離線安裝包
  • 2.2打開(kāi)谷歌插件界面
  • 2.3直接將插件拖入
  • 2.4報(bào)錯(cuò)程序包無(wú)效:"CRX_HEADER_INVALID",可以將安裝包修改為rar后綴,解壓之后再安裝
  • 2.5重啟瀏覽器

• 3.數(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ù)來(lái)源

常用指令-v-once

• 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ù)變化, 只渲染一次

• 4.v-model指令

  • 渲染多次
  • 示例

<div id="app">
    <p v-once>{{ name }}</p>
    <p>{{ name }}</p>
</div>
<script src="js/vue.js"></script>
<script>
    let vue = new Vue({
        el: '#app',
        data: {
            name: "微雙"
        }
    });
</script>

常用指令-v-cloak

• 1.Vue數(shù)據(jù)綁定過(guò)程

  • 1.1會(huì)先將未綁定數(shù)據(jù)的界面展示給用戶(hù)
  • 1.2然后再根據(jù)模型中的數(shù)據(jù)和控制的區(qū)域生成綁定數(shù)據(jù)之后的HTML代碼
  • 1.3最后再將綁定數(shù)據(jù)之后的HTML渲染到界面上
    • 正是在最終的HTML被生成渲染之前會(huì)先顯示模板內(nèi)容毛雇，所以如果用戶(hù)網(wǎng)絡(luò)比較慢或者網(wǎng)頁(yè)性能比較差, 那么用戶(hù)會(huì)看到模板內(nèi)容

• 2.如何解決這個(gè)問(wèn)題

  • 利用v-cloak配合 [v-cloak]:{display: none}默認(rèn)先隱藏未渲染的界面嫉称，等到生成HTML渲染之后再重新顯示

• 3.v-cloak指令作用:

  • 數(shù)據(jù)渲染之后自動(dòng)顯示元素
  • 示例：

<style>
    [v-cloak] { display: none }
</style>
<div id="app">
    <p v-cloak>{{ name }}</p>
</div>
<script src="js/vue.js"></script>
<script>
    let vue = new Vue({
        el: '#app',
        data: {
            name: "微雙"
        }
    });
</script>

常用指令v-text和v-html

• 1.什么是v-text指令

  • v-text就相當(dāng)于過(guò)去學(xué)習(xí)的innerText
  • 會(huì)覆蓋便簽內(nèi)原有的內(nèi)容
  • 不會(huì)解析html

• 2.什么是v-html指令

  • v-html就相當(dāng)于過(guò)去學(xué)習(xí)的innerHTML
  • 會(huì)覆蓋便簽內(nèi)原有的內(nèi)容
  • 會(huì)解析html

<div id="app">
    <!--插值的方式: 可以將指定的數(shù)據(jù)插入到指定的位置-->
  <p>++++{{ name }}++++</p>
    <!--插值的方式: 不會(huì)解析HTML-->
  <p>++++{{ msg }}++++</p>
    <!--v-text的方式: 會(huì)覆蓋原有的內(nèi)容-->
  <p v-text="name">++++++++</p>
    <!--v-text的方式: 也不會(huì)解析HTML-->
  <p v-text="msg">++++++++</p>
    <!--v-html的方式: 會(huì)覆蓋原有的內(nèi)容-->
    <p v-html="name">++++++++</p>
    <!--v-html的方式:會(huì)解析HTML-->
    <p v-html="msg">++++++++</p>
</div>
<script>
    let vue = new Vue({
        el: '#app',
        data: {
            name: "微雙",
            msg: "<span>我是span</span>"
        }
    });
</script>

常用指令v-if/v-else

• 1.什么是v-if指令

  • 條件渲染: 如果v-if取值是true就渲染元素, 如果不是就不渲染元素

• 2.==v-if特點(diǎn)==:

  • 如果條件不滿足根本就不會(huì)創(chuàng)建這個(gè)元素

• 3.v-if注意點(diǎn)

  • v-if可以從模型中獲取數(shù)據(jù)
  • v-if也可以直接賦值一個(gè)表達(dá)式

<div id="app">
    <p v-if="show">我是true</p>
    <p v-if="hidden">我是false</p>
</div>
<script>
    let vue = new Vue({
        el: '#app',
        data: {
            show: true,
            hidden: false
        }
    });
</script>

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

<div id="app">
  <p v-if="age >= 18">成年人</p>
  <p v-else>未成年人</p>
</div>
 <script>
    let vue = new Vue({
        el: '#app',
        data: {
            show: true,
            hidden: false,
            age: 17
        }
    });
</script>

5.v-else注意點(diǎn)

• v-else不能單獨(dú)出現(xiàn)
• v-if和v-else中間不能出現(xiàn)其它內(nèi)容

// 錯(cuò)誤寫(xiě)法
<div id="app">
  <p v-if="age >= 18">成年人</p>
  <p>中間的內(nèi)容</p>
  <p v-else>未成年人</p>
</div>

• 6.v-else-if指令
  • v-else-if可以和v-if指令配合使用
    • 當(dāng)v-if不滿足條件時(shí)就依次執(zhí)行后續(xù)v-else-if, 哪個(gè)滿足就顯示哪個(gè)

<div id="app">
  <p v-if="score >= 80">優(yōu)秀</p>
  <p v-else-if="score >= 60">良好</p>
  <p v-else>差</p>
</div>
 <script>
    let vue = new Vue({
        el: '#app',
        data: {
            show: true,
            hidden: false,
            age: 17，
            score: 50
        }
    });
</script>

• 7.v-else-if注意點(diǎn)
  • v-else-if不能單獨(dú)出現(xiàn)
  • v-if和v-else-if中間不能出現(xiàn)其它內(nèi)容

常用指令v-show

• 1.什么是v-show指令

  • v-show和v-if的能夠一樣都是條件渲染, 取值為true就顯示, 取值為false就不顯示

• 2.==v-show特點(diǎn)==

  • 如果條件不滿足根本就不會(huì)創(chuàng)建這個(gè)元素

• 3.v-show注意點(diǎn)

  • v-show可以從模型中獲取數(shù)據(jù)
  • v-show也可以直接賦值一個(gè)表達(dá)式

v-if和v-show區(qū)別

• 區(qū)別1：元素是否存在

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

• 區(qū)別2：應(yīng)用場(chǎ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è)開(kāi)發(fā)中需要頻繁切換元素顯示隱藏, 那么推薦使用v-show, 可以提高性能灵疮，否則使用v-if

常用指令v-for

• 1.什么是v-for指令

  • 相當(dāng)于JS中的for in循環(huán),可以根據(jù)數(shù)據(jù)多次渲染元素

• 2.v-for特點(diǎn)

  • 可以遍歷 數(shù)組, 字符, 數(shù)字（輸出是從1開(kāi)始的）, 對(duì)象
  • 示例：

<div id="app">
    <ul>
        <li v-for="(value, index) in list">{{index}}-&#45;&#45;{{value}}</li>  // 遍歷數(shù)組
        <li v-for="(value, index) in 'abcdefg'">{{index}}-&#45;&#45;{{value}}</li>  // 遍歷字符串
        <li v-for="(value, index) in 6">{{index}}-&#45;&#45;{{value}}</li>  // 遍歷數(shù)字
        <li v-for="(value, key) in obj">{{key}}---{{value}}</li> // 遍歷對(duì)象
    </ul>
</div>
<script>
    let vue = new Vue({
        el: '#app',
        data: {
            list: ["張三", "李四", "王五", "趙六"],
            obj: {
                name: "lnj",
                age: 33,
                gender: "man",
                class: "知播漁"
            }
        }
    });
</script>

==注意點(diǎn)==

• 1.v-for注意點(diǎn)

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

• 2.key屬性注意點(diǎn)

  • 不能使用index的作為key,因?yàn)楫?dāng)列表的內(nèi)容新增或者刪除時(shí)index都會(huì)發(fā)生變化
    • 添加到列表的末尾震捣，index到不會(huì)發(fā)生變化荔棉，但是添加到列表頭的話，整體的index都會(huì)發(fā)生變化

• 示例：

<div id="app">
    <form>
        <input type="text" v-model="name">
        <input type="submit" value="添加" @click.prevent="add">
    </form>
    <ul>
        <li v-for="(person,index) in persons" :key="person.id">
            <input type="checkbox">
            <span>{{index}} --- {{person.name}}</span>
        </li>
    </ul>
</div>
<script>
    let vue = new Vue({
        el: '#app',
        data: {
            persons: [
                {name: "zs", id: 1},
                {name: "ls", id: 2},
                {name: "ww", id: 3}
                ],
            name: ""
        },
        methods: {
            add(){
                let lastPerson = this.persons[this.persons.length - 1];
                let newPerson = {name: this.name, id: lastPerson.id + 1};
                // this.persons.push(newPerson);
                this.persons.unshift(newPerson);
                this.name = "";
            }
        }
    });
</script>

常用指令v-bind

• 1.什么是v-bind指令

  • 給"元素的==屬性=="綁定數(shù)據(jù),就必須使用v-bind
    • 不同于給"元素"綁定數(shù)據(jù),我們可以使用{{}}, v-text, v-html

• 2.v-bind格式

  • v-bind:屬性名稱(chēng)="綁定的數(shù)據(jù)"
  • : 屬性名稱(chēng)="綁定的數(shù)據(jù)"

<input type="text" v-bind:value="age">
<input type="text" :value="age">
<script>
    let vue = new Vue({
        el: '#app',
        data: {
            age: 18
        }
    });
</script>

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

綁定類(lèi)名

• 1.v-bind指令的特殊作用

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

• 2.通過(guò)v-bind綁定類(lèi)名格式

  • :class="['需要綁定類(lèi)名', ...]" 普通格式
  • :class="[flag?'active':'']"數(shù)組的每一個(gè)元素都可以是一個(gè)三目運(yùn)算符按需導(dǎo)入
  • :class="[{'active': true}]"通過(guò)對(duì)象來(lái)決定是否需要綁定
  • :class="對(duì)象名"（==這種方法不錯(cuò)==蒿赢，修改方便）——使用Model中的對(duì)象來(lái)替換數(shù)組
    • 綁定的類(lèi)名太多可以將類(lèi)名封裝到Model中例如：obj: {'color': true,'size': true,'active': false}

注意點(diǎn):
1.(:class="需要綁定類(lèi)名")直接賦值一個(gè)類(lèi)名(沒(méi)有放到數(shù)組中)默認(rèn)回去Model中查找润樱，但是Model中沒(méi)有對(duì)應(yīng)的類(lèi)名, 所以無(wú)效
2.(:class="[需要綁定類(lèi)名]")如果想讓v-bind去style中查找類(lèi)名,那么就必須把類(lèi)名放到數(shù)組中，但是放到數(shù)組中之后默認(rèn)還是回去Model中查找

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

綁定樣式

• 通過(guò)v-bind給style屬性綁定數(shù)據(jù)

  • 1.將數(shù)據(jù)放到對(duì)象中
    • :style="{color:'red','font-size':'50px'}"
  • 2.將數(shù)據(jù)放到Model對(duì)象中
    • :style="obj"
    • Model對(duì)象中:
      • obj: {color: 'red','font-size':'80px'}
  • 3.如果需要綁定Model中的多個(gè)對(duì)象,可以放到一個(gè)數(shù)組中賦值
    • :style="[obj1,obj2]"
    • Model對(duì)象中:
      • obj1: {color: 'red','font-size':'80px'}
      • obj2: {'background-color': 'blue'}

• 示例：

<div id="app">
    <p :style="{color: 'red', 'font-size': '100px'}">我是段落</p>
    <p :style="obj">我是段落</p>
    <p :style="[obj1, obj2]">我是段落</p>
</div>
<script>
    let vue = new Vue({
        el: '#app',
        data: {
            obj:{
                "color": "blue",   // color可以用引號(hào)括起來(lái)壹若，也可以不括
                "font-size": "100px"
            },
            obj1:{
                "color": "blue",
                "font-size": "100px"
            },
            obj2: {
                "background-color": "red"
            }
        }
    });
</script>

• ==重點(diǎn)==：
  • 屬性和取值都用引號(hào)括起來(lái)
    • 個(gè)別屬性不用，但是都括起來(lái)沒(méi)毛病

注意點(diǎn):
如果屬性名稱(chēng)包含-, 那么必須用引號(hào)括起來(lái)

常用指令-v-on

• 1.什么是v-on指令?

  • v-on指令專(zhuān)門(mén)用于給元素綁定監(jiān)聽(tīng)事件

• 2.v-on指令兩種格式

  • v-on:事件名稱(chēng)="回調(diào)函數(shù)名稱(chēng)"
  • @事件名稱(chēng)="回調(diào)函數(shù)名稱(chēng)"
  • 示例：

<div id="app">
<!--<button v-on:click="myFn">我是按鈕</button>-->
<button @click="myFn">我是按鈕</button>
</div>
<script>
    let vue = new Vue({
        el: '#app',
        data: {
        },
        methods: {
            myFn(){
                alert('lnj')
            }
        }
    });
</script>

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

v-on修飾符

• 1.v-on修飾符

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

• 2.常見(jiàn)修飾符

  • .once
    • 只觸發(fā)一次回調(diào)皂冰。
  • .prevent
    • 調(diào)用 event.preventDefault()店展。阻止事件默認(rèn)行為
  • .stop
    • 調(diào)用 event.stopPropagation()。
    • 默認(rèn)情況下載嵌套的元素中,如果都監(jiān)聽(tīng)了相同的事件,那么會(huì)觸發(fā)事件冒泡，這個(gè)stop就是阻止事件冒泡
  • .self
    • 當(dāng)前元素觸發(fā)事件的時(shí)候才觸發(fā)回調(diào)。
  • .capture
    • 添加事件偵聽(tīng)器時(shí)使用 capture 模式援雇。
    • 默認(rèn)情況下是事件冒泡,如果想變成事件捕獲, 那么就需要使用.capture修飾符

• 示例：

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .a{
        width: 300px;
        height: 300px;
        background: red;
    }
    .b{
        width: 200px;
        height: 200px;
        background: blue;
    }
    .c{
        width: 100px;
        height: 100px;
        background: green;
    }
</style>
<div id="app">
    <!--<button v-on:click.once ="myFn">我是按鈕</button>-->
    <!--<a  v-on:click.prevent="myFn">我是A標(biāo)簽</a>-->
    <!--<div class="a" @click="myFn1">
        <div class="b" @click.stop="myFn2">
            <div class="c" @click="myFn3"></div>
        </div>
    </div>-->
    <!--<div class="a" @click="myFn1">
        <div class="b" @click.self="myFn2">
            <div class="c" @click="myFn3"></div>
        </div>
    </div>-->
    <div class="a" @click.capture="myFn1">
        <div class="b" @click.capture="myFn2">
            <div class="c" @click.capture="myFn3"></div>
        </div>
    </div>
</div>
<script>
    let vue = new Vue({
        el: '#app',
        data: {
        },
        // 專(zhuān)門(mén)用于存儲(chǔ)監(jiān)聽(tīng)事件回調(diào)函數(shù)
        methods: {
            myFn1(){
                console.log("爺爺");
            },
            myFn2(){
                console.log("爸爸");
            },
            myFn3(){
                console.log("兒子");
            }
        }
    });
</script>

v-on注意點(diǎn)

• 1.綁定回調(diào)函數(shù)名稱(chēng)的時(shí)候,后面可以寫(xiě)()也可以不寫(xiě)

  • v-on:click="myFn"
  • v-on:click="myFn()"

• 2.可以給綁定的回調(diào)函數(shù)傳遞參數(shù)

  • v-on:click="myFn('lnj', 33)"
  • 示例：

<div id="app">
    <button @click="myFn('ws',29)">按鈕</button>
</div>
<script>
    let vue = new Vue({
        el: '#app',
        data: {
            
        },
        methods:{
            myFn(name,age){
                console.log(name,age);
            }
        }
    });
</script>

• 3.如果在綁定的函數(shù)中需要用到data中的數(shù)據(jù)必須加上this
  • 示例：

<div id="app">
    <button @click="myFn('ws',29,$event)">按鈕</button>
</div>
<script>
    let vue = new Vue({
        el: '#app',
        data: {
            gender: 'man'
        },
        methods:{
            myFn(name,age,e){
                console.log(name,age,this.gender);
            }
        }
    });
</script>

v-on按鍵修飾符

• 1.什么是按鍵修飾符

  • 我們可以通過(guò)按鍵修飾符監(jiān)聽(tīng)特定按鍵觸發(fā)的事件
  • 例如: 可以監(jiān)聽(tīng)當(dāng)前事件是否是回車(chē)觸發(fā)的, 可以監(jiān)聽(tīng)當(dāng)前事件是否是ESC觸發(fā)的等

• 2.按鍵修飾符分類(lèi)

  • 2.1系統(tǒng)預(yù)定義修飾符
    • .enter/.tab/.delete (捕獲“刪除”和“退格”鍵)/.esc/.space/.up/.down/.left/.right等
  • 2.2自定義修飾符
    • 可以使用 v-on:keyup.自定義按鍵名稱(chēng)
      • Vue.config.keyCodes.自定義按鍵名稱(chēng) = 查詢(xún)keycode列表里自定義按鍵對(duì)應(yīng)的值

<div id="app">
    <!--<input type="text" @keyup.enter="myFn">-->
    <input type="text" @keyup.f2="myFn">
</div>
<script>
    Vue.config.keyCodes.f2 = 113;
    let vue = new Vue({
        el: '#app',
        data: {
        },
        methods: {
            myFn(){
                alert("lnj");
            }
        }
    });
</script>

自定義指令

• 1.自定義全局指令

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

• 2.自定義全局指令語(yǔ)法

  • 格式如下：

<script>
Vue.directive('自定義指令名稱(chēng)', 
    {
    生命周期名稱(chēng): function (el) {
        指令業(yè)務(wù)邏輯代碼
    } 
});
</script>  

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

<div id="app">
<!--    <p v-color>我是段落</p>-->
    <input type="text" v-focus>
</div>
<script>
Vue.directive("color", {
    // 這里的el就是被綁定指令的那個(gè)元素
    bind: function (el) {  // bind是生命周期名稱(chēng)
        el.style.color = "red";
    }
});
Vue.directive("focus", {
    inserted: function (el) {
        el.focus();   // 聚焦
    }
});
</script>

自定義指令注意點(diǎn)：
使用時(shí)需要加上v-, 而在自定義時(shí)不需要加上v-

自定義指令參數(shù)

• 1.自定義指令參數(shù)

  • 在使用官方指令的時(shí)候我們可以給指令傳參
  • 例如: v-model="name"在我們自定義的指令中我們也可以傳遞傳遞

• 2.獲取自定義指令傳遞的參數(shù)

  • 在執(zhí)行自定義指令對(duì)應(yīng)的方法的時(shí)候,除了會(huì)傳遞el給我們,還會(huì)傳遞一個(gè)對(duì)象給我們，這個(gè)對(duì)象中就保存了指令傳遞過(guò)來(lái)的參數(shù)
  • 示例：

<div id="app">
    <!--<p v-color="'blue'">我是段落</p>-->
    <p v-color="curColor">我是段落</p>
</div>
<script>
    Vue.directive("color", {
        bind: function (el, obj) {
            // el.style.color = "red";
            el.style.color = obj.value;
        }
    });
    let vue = new Vue({
        el: '#app',
        data: {
            curColor: 'green'
        }
    });
</script>

自定義局部指令

• 1.自定義全局指令的特點(diǎn)

  • 在任何一個(gè)Vue實(shí)例控制的區(qū)域中都可以使用

• 2.自定義局部指令的特點(diǎn)

  • 只能在自定義的那個(gè)Vue實(shí)例中使用

• 3.如何自定義一個(gè)局部指令

  • 給創(chuàng)建Vue實(shí)例時(shí)傳遞的對(duì)象添加
  • 格式如下：

<script>
let vue = new Vue({
    el: '#app',
    data: {
    },
    directives: {
    // key: 指令名稱(chēng)
    // value: 對(duì)象
    '自定義生命周期名稱(chēng)': {
        bind: function (el, obj) {
            指令業(yè)務(wù)邏輯代碼
            }
        }
    }
});

</script>

• 示例：

<div id="app1">
    <p v-color="'blue'">我是段落</p>
</div>
<div id="app2">
    <p v-color="'red'">我是段落</p>
</div>
<script>
let vue1 = new Vue({
    el: '#app1',
    data: {},
    methods: {}
});
let vue2 = new Vue({
    el: '#app2',
    data: {},
    methods: {},
    // 專(zhuān)門(mén)用于定義局部指令的
    directives: {
        "color": {
            bind: function (el, obj) {
                el.style.color = obj.value;
            }
        }
    }
});
</script>

計(jì)算屬性

• 1.插值語(yǔ)法特點(diǎn)

  • 可以在{{}}中編寫(xiě)合法的JavaScript表達(dá)式

• 2.在插值語(yǔ)法中編寫(xiě)JavaScript表達(dá)式缺點(diǎn)

  • 2.1沒(méi)有代碼提示
  • 2.2語(yǔ)句過(guò)于復(fù)雜不利于我們維護(hù)

• 3.如何解決?

  • 對(duì)于任何復(fù)雜邏輯坠狡，你都應(yīng)當(dāng)使用計(jì)算屬性computed
  • 示例：

<div id="app">
    <!--<p>{{msg.split("").reverse().join("")}}</p>-->
    <p>{{msg2}}</p>
</div>
<script>
    let vue = new Vue({
        el: '#app',
        data: {
            // msg: "abcdef"
        },
        // 專(zhuān)門(mén)用于定義計(jì)算屬性的
        computed: {
            msg2: function () {
                let res = "abcdef".split("").reverse().join("");
                return res;
            }
        }
    });
</script>

注意點(diǎn):
雖然在定義計(jì)算屬性的時(shí)候是通過(guò)一個(gè)函數(shù)返回的數(shù)據(jù)唤锉，但是在使用計(jì)算屬性的時(shí)候不能在計(jì)算屬性名稱(chēng)后面加上()
因?yàn)樗且粋€(gè)屬性不是一個(gè)函數(shù)(方法)

計(jì)算屬性和函數(shù)的區(qū)別

• 1.計(jì)算屬性和函數(shù)的共同點(diǎn)

  • 通過(guò)計(jì)算屬性或者通過(guò)函數(shù)我們都能拿到處理后的數(shù)據(jù)

• 2.計(jì)算屬性和函數(shù)的區(qū)別

  • 2.1函數(shù)"不會(huì)"將計(jì)算的結(jié)果緩存起來(lái),每一次訪問(wèn)都會(huì)重新求值
  • 2.2計(jì)算屬性"會(huì)"將計(jì)算的結(jié)果緩存起來(lái), 只要數(shù)據(jù)沒(méi)有發(fā)生變化, 就不會(huì)重新求值

• 3.計(jì)算屬性應(yīng)用場(chǎng)景

  • 計(jì)算屬性:比較適合用于計(jì)算不會(huì)頻繁發(fā)生變化的的數(shù)據(jù)袁勺，這樣會(huì)比使用函數(shù)的性能高
  • 函數(shù)：經(jīng)常發(fā)生變化的數(shù)據(jù)

<div id="app">
    <p>{{msg1()}}</p>
    <p>{{msg1()}}</p>
    <p>{{msg1()}}</p>
    <p>{{msg2}}</p>
    <p>{{msg2}}</p>
    <p>{{msg2}}</p>
</div>
<script>
let vue = new Vue({
    el: '#app',
    data: {
    },
    // 專(zhuān)門(mén)用于存儲(chǔ)監(jiān)聽(tīng)事件回調(diào)函數(shù)
    methods: {
        // 函數(shù)的特點(diǎn): 每次調(diào)用都會(huì)執(zhí)行
        msg1(){
            console.log("msg1函數(shù)被執(zhí)行了");
            let res = "abcdef".split("").reverse().join("");
            return res;
        }
    },
    // 專(zhuān)門(mén)用于定義計(jì)算屬性的
    computed: {
        msg2: function () { 
            console.log("msg2計(jì)算屬性被執(zhí)行了");
            let res = "abcdef".split("").reverse().join("");
            return res;
        }
    }
});
</script>

自定義全局過(guò)濾器

• 1.什么是過(guò)濾器?

  • 過(guò)濾器和函數(shù)和計(jì)算屬性一樣都是用來(lái)處理數(shù)據(jù)的,但是過(guò)濾器一般用于格式化插入的文本數(shù)據(jù)

• 2.自定義全局過(guò)濾器的特點(diǎn)

  • 在任何一個(gè)Vue實(shí)例控制的區(qū)域中都可以使用

• 3.如何自定義全局過(guò)濾器Vue.filter

  • Vue.filter(參數(shù)1,參數(shù)2);
    • 第一個(gè)參數(shù): 過(guò)濾器名稱(chēng)
    • 第二個(gè)參數(shù): 處理數(shù)據(jù)的函數(shù)

注意點(diǎn):
默認(rèn)情況下處理數(shù)據(jù)的函數(shù)接收一個(gè)參數(shù),就是當(dāng)前要被處理的數(shù)據(jù)

• 4.如何使用全局過(guò)濾器

  • {{msg | 過(guò)濾器名稱(chēng)}}
  • :value="msg | 過(guò)濾器名稱(chēng)"

• 5.過(guò)濾器注意點(diǎn)

  • 5.1只能在插值語(yǔ)法和v-bind中使用
  • 5.2過(guò)濾器可以連續(xù)使用
  • 示例：

<div id="app">
    <!--Vue會(huì)把name交給指定的過(guò)濾器處理之后, 再把處理之后的結(jié)果插入到指定的元素中-->
    <p>{{name | formartStr1 | formartStr2}}</p>
</div>
<script>
    Vue.filter("formartStr1", function (value) {
        value = value.replace(/學(xué)院/g, "大學(xué)");
        return value;
    });
    Vue.filter("formartStr2", function (value) {
        value = value.replace(/大學(xué)/g, "幼兒園");
        return value;
    });
    let vue = new Vue({
        el: '#app',
        data: {
            name: "知播漁學(xué)院, 指趣學(xué)院, 前端學(xué)院, 區(qū)塊鏈學(xué)院"
        }
    });
</script>

自定義局部過(guò)濾器

• 1.自定義局部過(guò)濾器的特點(diǎn)

  • 只能在自定義的那個(gè)Vue實(shí)例中使用

• 2.如何自定義一個(gè)局部指令

  • 給創(chuàng)建Vue實(shí)例時(shí)傳遞的對(duì)象添加
  • 格式如下：

filters: {
    // key: 過(guò)濾器名稱(chēng)
    // value: 過(guò)濾器處理函數(shù)
    '過(guò)濾器名稱(chēng)': function (value) {
        過(guò)濾器處理函數(shù)
    }
}

• 示例：

<div id="app1">
    <p>{{name | formartStr}}</p>
</div>
<div id="app2">
    <p>{{name | formartStr}}</p>
</div>
<script>
let vue1 = new Vue({
    el: '#app1',
    data: {
        name: "知播漁學(xué)院, 指趣學(xué)院, 前端學(xué)院, 區(qū)塊鏈學(xué)院"
    }
});
let vue2 = new Vue({
    el: '#app2',
    data: {
        name: "知播漁學(xué)院, 指趣學(xué)院, 前端學(xué)院, 區(qū)塊鏈學(xué)院"
    },
    // 專(zhuān)門(mén)用于定義局部過(guò)濾器的
    filters: {
        "formartStr": function (value) {
            value = value.replace(/學(xué)院/g, "大學(xué)");
            return value;
        }
    }
});
</script>

• ==注意點(diǎn)==
  • 在使用過(guò)濾器的時(shí)候,可以在過(guò)濾器名稱(chēng)后面加上()
  • 如果給過(guò)濾器的名稱(chēng)后面加上了(),那么就可以給過(guò)濾器的函數(shù)傳遞參數(shù)
  • 示例：

<div id="app">
    <p>{{time | filter1('yyyy-MM-dd')}}</p>
</div>
<script>
    Vue.filter('filter1',function (value,frm) {
        let date = new Date(value);
        let year = date.getFullYear();
        let mouth = date.getMonth() + 1 + '';
        let day = date.getDate() + '';
        let hour = date.getHours() + '';
        let minute = date.getMinutes() + '';
        let second = date.getSeconds() + '';
        if(frm && frm === 'yyyy-MM-dd'){
            return `${year}-${mouth.padStart(2,'0')}-${day.padStart(2,'0')}`;
        }
        return `${year}-${mouth.padStart(2,'0')}-${day.padStart(2,'0')} ${hour.padStart(2,'0')}:${minute.padStart(2,'0')}:${second.padStart(2,'0')}`;
    });
    let vue = new Vue({
        el: '#app',
        data: {
            name:'知播漁學(xué)院, 指趣學(xué)院, 前端學(xué)院, 區(qū)塊鏈學(xué)院',
            time: Date.now()
        }
    });
</script>

過(guò)渡動(dòng)畫(huà)

1.默認(rèn)類(lèi)名(v-xxx)來(lái)指定過(guò)渡動(dòng)畫(huà)

• 如何給Vue控制的元素添加過(guò)渡動(dòng)畫(huà)
  • 1.將需要執(zhí)行動(dòng)畫(huà)的元素放到transition組件中
  • 2.transition組件中會(huì)自動(dòng)查找
    • 顯示時(shí)會(huì)自動(dòng)查找.v-enter/.v-enter-active/.v-enter-to類(lèi)名
    • 隱藏時(shí)會(huì)自動(dòng)查找.v-leave/ .v-leave-active/.v-leave-to類(lèi)名
  • 3.我們只需要在.v-enter和.v-leave-to中指定動(dòng)畫(huà)動(dòng)畫(huà)開(kāi)始的狀態(tài)
  • 4.在.v-enter-active和.v-leave-active中指定動(dòng)畫(huà)執(zhí)行的狀態(tài)
  • 5.即可完成過(guò)渡動(dòng)畫(huà)
  • 示例：

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 200px;
        height: 200px;
        background: red;
    }
    .v-enter{
        opacity: 0;
    }
    .v-enter-to{
        opacity: 1;
    }
    .v-enter-active{
        transition: all 3s;
    }
    .v-leave{
        opacity: 1;
    }
    .v-leave-to{
        opacity: 0;
    }
    .v-leave-active{
        transition: all 3s;
    }
</style>
<div id="app">
    <button @click="toggle">我是按鈕</button>
    <transition>
        <div class="box" v-show="isShow"></div>
    </transition>
</div>
<script>
let vue = new Vue({
    el: '#app',
    data: {
        isShow: false
    },
    methods: {
        toggle(){
            this.isShow = !this.isShow;
        }
    }
});
</script>

==注意點(diǎn)==

• 1.初始動(dòng)畫(huà)設(shè)置

  • 默認(rèn)情況下第一次進(jìn)入的時(shí)候沒(méi)有動(dòng)畫(huà)的
  • 如果想一進(jìn)來(lái)就有動(dòng)畫(huà),我們可以通過(guò)給transition添加appear屬性的方式,告訴Vue第一次進(jìn)入就需要顯示動(dòng)畫(huà)

• 2.如何給多個(gè)不同的元素指定不同的動(dòng)畫(huà)

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

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

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 200px;
        height: 200px;
        background: red;
    }
    .one-enter{
        opacity: 0;
    }
    .one-enter-to{
        opacity: 1;
        margin-left: 500px;
    }
    .one-enter-active{
        transition: all 3s;
    }
    .two-enter{
        opacity: 0;
    }
    .two-enter-to{
        opacity: 1;
        margin-top: 500px;
    }
    .two-enter-active{
        transition: all 3s;
    }
</style>
<div id="app">
    <button @click="toggle">我是按鈕</button>
    <transition appear name="one">
        <div class="box" v-show="isShow"></div>
    </transition>
    <transition appear name="two">
        <div class="box" v-show="isShow"></div>
    </transition>
</div>
<script>
    let vue = new Vue({
        el: '#app',
        data: {
            isShow: true
        },
        methods: {
            toggle(){
                this.isShow = !this.isShow;
            }
        }
    });
</script>

2.JS鉤子函數(shù)來(lái)指定過(guò)渡動(dòng)畫(huà)

• 1.當(dāng)前過(guò)渡存在的問(wèn)題

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

• 2.在Vue中如何保存過(guò)渡最終的效果

  • 通過(guò)Vue提供的JS鉤子來(lái)實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà)

    • v-on:before-enter="beforeEnter" 進(jìn)入動(dòng)畫(huà)之前

    • v-on:enter="enter" 進(jìn)入動(dòng)畫(huà)執(zhí)行過(guò)程中

    • v-on:after-enter="afterEnter" 進(jìn)入動(dòng)畫(huà)完成之后

    • v-on:enter-cancelled="enterCancelled" 進(jìn)入動(dòng)畫(huà)被取消

    • v-on:before-leave="beforeLeave" 離開(kāi)動(dòng)畫(huà)之前

    • v-on:leave="leave" 離開(kāi)動(dòng)畫(huà)執(zhí)行過(guò)程中

    • v-on:after-leave="afterLeave" 離開(kāi)動(dòng)畫(huà)完成之后

    • v-on:leave-cancelled="leaveCancelled" 離開(kāi)動(dòng)畫(huà)被取消

• 3.JS鉤子實(shí)現(xiàn)過(guò)渡注意點(diǎn)

  • 3.1在動(dòng)畫(huà)過(guò)程中必須寫(xiě)上el.offsetWidth或者el.offsetHeight
  • 3.2在enter和leave方法中必須調(diào)用done方法,否則after-enter和after-leave不會(huì)執(zhí)行
  • 3.3若需要添加初始動(dòng)畫(huà),那么需要把done方法包裹到setTimeout方法中調(diào)用
  • 示例：

<div id="app">
    <button @click="toggle">我是按鈕</button>
    <transition appear
                v-bind:css="false"
                v-on:before-enter="beforeEnter"
                v-on:enter="enter"
                v-on:after-enter="afterEnter">
        <div class="box" v-show="isShow"></div>
    </transition>
</div>
<script>
let vue = new Vue({
    el: '#app',
    data: {
        isShow: true
    },
    methods: {
        toggle(){
            this.isShow = !this.isShow;
        },
        beforeEnter(el){
            // 進(jìn)入動(dòng)畫(huà)開(kāi)始之前
            console.log("beforeEnter");
            el.style.opacity = "0";
        },
        enter(el, done){
            // 進(jìn)入動(dòng)畫(huà)執(zhí)行過(guò)程中
            console.log("enter");
            // el.offsetWidth;
            el.offsetHeight;
            el.style.transition = "all 3s";
            // done();
            /*
            注意點(diǎn): 如果想讓元素一進(jìn)來(lái)就有動(dòng)畫(huà), 那么最好延遲以下再調(diào)用done方法
            */
            setTimeout(function () {
                done();
            }, 0);
        },
        afterEnter(el){
            // 進(jìn)入動(dòng)畫(huà)執(zhí)行完畢之后
            console.log("afterEnter");
            el.style.opacity = "1";
            el.style.marginLeft = "500px";
        }
    }
});
</script>

配合使用第三方 JavaScript 動(dòng)畫(huà)庫(kù),實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà)

• 配合Velocity實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà)
  • 在Vue中我們除了可以自己實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà)以外,還可以結(jié)合第三方框架實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà)
    • 1.導(dǎo)入Velocity庫(kù)
    • 2.在動(dòng)畫(huà)執(zhí)行過(guò)程鉤子函數(shù)中編寫(xiě)Velocity動(dòng)畫(huà)
    • 示例：

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 200px;
        height: 200px;
        background: red;
    }
</style>
<div id="app">
    <button @click="toggle">我是按鈕</button>
    <transition appear
                v-bind:css="false"
                v-on:before-enter="beforeEnter"
                v-on:enter="enter"
                v-on:after-enter="afterEnter">
        <div class="box" v-show="isShow"></div>
    </transition>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<script>
    let vue = new Vue({
        el: '#app',
        data: {
            isShow: true
        },
        methods: {
            toggle(){
                this.isShow = !this.isShow;
            },
            beforeEnter(el){
            },
            enter(el, done){
                Velocity(el, {opacity: 1, marginLeft: "500px"}, 3000);
                done();
            },
            afterEnter(el){

            }
        }
    });
</script>

使用自定義類(lèi)名的方式來(lái)指定過(guò)渡動(dòng)畫(huà)

• 1.自定義類(lèi)名動(dòng)畫(huà)

  • 1.在Vue中除了可以使用默認(rèn)類(lèi)名(v-xxx)來(lái)指定過(guò)渡動(dòng)畫(huà)
  • 2.除了可以使用自定義類(lèi)名前綴(yyy-xx)來(lái)指定過(guò)渡動(dòng)畫(huà)(transition name="yyy")
  • 3.除了可以使用 JS鉤子函數(shù)來(lái)指定過(guò)渡動(dòng)畫(huà)以外
  • 4.還可以使用自定義類(lèi)名的方式來(lái)指定過(guò)渡動(dòng)畫(huà)
    • enter-class 進(jìn)入動(dòng)畫(huà)開(kāi)始之前
    • enter-active-class 進(jìn)入動(dòng)畫(huà)執(zhí)行過(guò)程中
    • enter-to-class 進(jìn)入動(dòng)畫(huà)執(zhí)行完畢之后
    • leave-class 離開(kāi)動(dòng)畫(huà)開(kāi)始之前
    • leave-active-class 離開(kāi)動(dòng)畫(huà)執(zhí)行過(guò)程中
    • leave-to-class 離開(kāi)動(dòng)畫(huà)執(zhí)行完畢之后

• 示例：

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 200px;
        height: 200px;
        background: red;
    }
    .a{
        opacity: 0;
    }
    .b{
        opacity: 1;
        margin-left: 500px;
    }
    .c{
        transition: all 3s;
    }
</style>
<div id="app">
    <button @click="toggle">我是按鈕</button>
    <transition appear
                enter-class="a"
                enter-active-class="c"
                enter-to-class="b">
        <div class="box" v-show="isShow"></div>
    </transition>
</div>
<script>
    let vue = new Vue({
        el: '#app',
        data: {
            isShow: true
        },
        methods: {
            toggle(){
                this.isShow = !this.isShow;
            }
        }
    });
</script>

配合使用第三方 CSS 動(dòng)畫(huà)庫(kù)Animate.css實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà)

• 配合Animate.css實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà)步驟
  • 1.導(dǎo)入Animate.css庫(kù)
  • 2.在執(zhí)行過(guò)程中的屬性上綁定需要的類(lèi)名
  • 示例：

<link  rel="stylesheet" type="text/css">
<div id="app">
    <button @click="toggle">我是按鈕</button>
    <transition appear
                enter-active-class="animated bounceInRight">
        <div class="box" v-show="isShow"></div>
    </transition>
</div>
<script>
    let vue = new Vue({
        el: '#app',
        data: {
            isShow: true
        },
        methods: {
            toggle(){
                this.isShow = !this.isShow;
            }
        }
    });
</script>

過(guò)渡動(dòng)畫(huà)（添加多個(gè)）

• 如何同時(shí)給多個(gè)元素添加過(guò)渡動(dòng)畫(huà)
  • 通過(guò)transition可以給單個(gè)元素添加過(guò)渡動(dòng)畫(huà)席怪，如果想給多個(gè)元素添加過(guò)渡動(dòng)畫(huà),那么就必須通過(guò)transition-group來(lái)添加
  • transition-group和transition的用法一致,只是一個(gè)是給單個(gè)元素添加動(dòng)畫(huà),一個(gè)是給多個(gè)元素添加動(dòng)畫(huà)而已
  • 示例(不是最終版，里面還有bug纤控，下面有講注意點(diǎn))：

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .v-enter{
        opacity: 0;
    }
    .v-enter-to{
        opacity: 1;
    }
    .v-enter-active{
        transition: all 3s;
    }
    .v-leave{
        opacity: 1;
    }
    .v-leave-to{
        opacity: 0;
    }
    .v-leave-active{
        transition: all 3s;
    }
</style>
<div id="app">
    <form>
        <input type="text" v-model="name">
        <input type="submit" value="添加" @click.prevent="add">
    </form>
    <ul>
        <transition-group appear>
            <li v-for="(person,index) in persons" :key="person.id" @click="del(index)">
                <input type="checkbox">
                <span>{{index}} --- {{person.name}}</span>
            </li>
        </transition-group>
    </ul>
</div>
<script>
let vue = new Vue({
    el: '#app',
    data: {
        persons: [
            {name: "zs", id: 1},
            {name: "ls", id: 2},
            {name: "ww", id: 3}
            ],
        name: ""
    },
    methods: {
        add(){
            let lastPerson = this.persons[this.persons.length - 1];
            let newPerson = {name: this.name, id: lastPerson.id + 1};
            // this.persons.push(newPerson);
            this.persons.unshift(newPerson);
            this.name = "";
        },
        del(index){
            this.persons.splice(index, 1);
        }
    }
});
</script>

注意點(diǎn):

• 1.標(biāo)簽問(wèn)題

  • 默認(rèn)情況下transition-group會(huì)將動(dòng)畫(huà)的元素放到span標(biāo)簽中
    • 解決方法：我們可以通過(guò)tag屬性來(lái)指定將動(dòng)畫(huà)元素放到什么標(biāo)簽中（把html里面對(duì)應(yīng)的標(biāo)簽刪除挂捻，tag屬性就會(huì)自動(dòng)添加標(biāo)簽）

• 2.transition-group動(dòng)畫(huà)混亂問(wèn)題

  • 一般情況下組動(dòng)畫(huà)出現(xiàn)動(dòng)畫(huà)混亂都是因?yàn)関-for就地復(fù)用導(dǎo)致的
    • 解決方案：我們只需要保證所有數(shù)據(jù)key永遠(yuǎn)是唯一的即可
  • 示例（上面示例就有這個(gè)bug），解決如下：
    • 1.data里面新增一個(gè)id船万，賦值為3（list的長(zhǎng)度）
    • 2.add方法中
      • 添加this.id++
      • let lastPerson = this.persons[this.persons.length - 1];刪除
      • let newPerson = {name: this.name, id: lastPerson.id + 1};改成let newPerson = {name: this.name, id: this.id};
      • 成品View Model如下：

<script>
    let vue = new Vue({
        el: '#app',
        data: {
            persons: [
                {name: "zs", id: 1},
                {name: "ls", id: 2},
                {name: "ww", id: 3}
                ],
            name: "",
            id: 3
        },
        methods: {
            add(){
                this.id++;
                // let lastPerson = this.persons[this.persons.length - 1];
                let newPerson = {name: this.name, id: this.id};
                // this.persons.push(newPerson);
                this.persons.unshift(newPerson);
                this.name = "";
            },
            del(index){
                this.persons.splice(index, 1);
            }
        }
    });
</script>