一冻璃、了解組件、庫、框架的區(qū)別?

前端框架搏明、組件與庫的區(qū)別（轉(zhuǎn)） ：https://blog.csdn.net/a519781181/article/details/78975689

二、Vue 是什么闪檬？

• Vue (讀音 /vju?/星著，類似于 view) 是一套用于構(gòu)建用戶界面的 漸進(jìn)式框架

• 聲明式渲染-組件系統(tǒng)-客戶端路由-集中式狀態(tài)管理。粗悯。虚循。

• vue 的核心庫只關(guān)注視圖層，不僅易于上手样傍，還便于與第三方庫或既有項(xiàng)目整合

三横缔、Vue基本使用

1、使用Vue將helloworld 渲染到頁面上

<div id="app">
    <div>{{msg}}</div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'Hello World'
        }
    })
</script>
// el: 標(biāo)簽選擇器(css選擇器)
// data: 模型數(shù)據(jù)

四衫哥、Vue模板語法

1茎刚、前端渲染三種方式

• 原生字符串拼接
• 模板引擎（art-template）
• vue模板

2、vue模板語法組成

• 插值表達(dá)式
• 指令
• 事件綁定
• 屬性綁定
• 樣式綁定
• 分支循環(huán)結(jié)構(gòu)

3撤逢、插值表達(dá)式

• 將數(shù)據(jù)填充到HTML標(biāo)簽中
• 插值表達(dá)式支持基本的計(jì)算操作
• 不能給屬性綁定值

 <div> {{ "Hello World" + 123 + "你好" }} 我是字符串 </div>

4膛锭、指令

• 本質(zhì)就是標(biāo)簽的自定義屬性
• Vue中指定都是以 v- 開頭（比如圖片的 v-src ）

4.1粮坞、v-cloak（解決插值表達(dá)式閃爍問題）

• 插值表達(dá)式渲染的標(biāo)簽會(huì)有閃動(dòng)的問題，vue先把表達(dá)式 {{xxx}} 顯示在頁面初狰，再替換成該顯示的內(nèi)容
• 防止頁面加載時(shí)出現(xiàn)閃爍問題

<style type="text/css">
  1莫杈、通過屬性選擇器選擇到帶有屬性 v-cloak 的標(biāo)簽，讓他隱藏
  [v-cloak] {
      display: none;
  }
</style>

<div id="app">
    2奢入、 讓帶有插值語法的標(biāo)簽添加 v-cloak 屬性筝闹，在數(shù)據(jù)渲染完之后，v-cloak 屬性會(huì)被自動(dòng)去除腥光， 
     v-cloak一旦移除也就是沒有這個(gè)屬性了关顷，屬性選擇器就選擇不到該標(biāo)簽，
     也就是對(duì)應(yīng)的標(biāo)簽會(huì)變?yōu)榭梢?<div v-cloak>{{msg}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        //  el   指定元素 id 是 app 的元素
        el: '#app',
        //  data  里面存儲(chǔ)的是數(shù)據(jù)
        data: {
            msg: 'Hello Vue'
        }
    });
</script>

4.2柴我、v-text （沒有閃爍問題）

• v-text 指令用于將數(shù)據(jù)填充到標(biāo)簽中解寝，作用于插值表達(dá)式類似，但是沒有閃動(dòng)問題

• 如果數(shù)據(jù)中有HTML標(biāo)簽會(huì)將html標(biāo)簽一并輸出（innerText）

• 注意：此處為單向綁定艘儒，數(shù)據(jù)對(duì)象上的值改變聋伦，插值會(huì)發(fā)生變化；但是當(dāng)插值發(fā)生變化并不會(huì)影響數(shù)據(jù)對(duì)象的值

<div id="app">
    注意:在指令中不要寫插值語法界睁，直接寫對(duì)應(yīng)的變量名稱觉增，在 v-text 中，賦值的時(shí)候不要在寫 插值語法 
    一般屬性中不加 {{}}  直接寫 對(duì)應(yīng) 的數(shù)據(jù)名 
    <p v-text="msg"></p>
    <p>
        <!-- Vue 中只有在標(biāo)簽的 內(nèi)容中 才用插值語法 -->
        {{msg}}
    </p>
</div>
?
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'Hello Vue.js'
        }
    });?
</script>

4.3翻斟、v-html

• 用法和v-text 相似 但是他可以將HTML片段填充到標(biāo)簽中

• 可能有安全問題, 一般只在可信任內(nèi)容上使用 v-html逾礁，永不用在用戶提交的內(nèi)容上

• 它與v-text區(qū)別在于v-text輸出的是純文本，瀏覽器不會(huì)對(duì)其再進(jìn)行html解析访惜，但v-html會(huì)將其當(dāng)html標(biāo)簽解析后輸出嘹履。

<div id="app">
    <p v-html="html"></p>
    輸出：html標(biāo)簽在渲染的時(shí)候被解析

    <p>{{message}}</p>
    輸出：<span>通過雙括號(hào)綁定</span>

    <p v-text="text"></p>
    輸出：<span>html標(biāo)簽在渲染的時(shí)候被源碼輸出</span>
</div>
<script>
    let app = new Vue({　　
        el: "#app",
        　　data: {　　　　
            message: "<span>通過雙括號(hào)綁定</span>",
            html: "<span>html標(biāo)簽在渲染的時(shí)候被解析</span>",
            text: "<span>html標(biāo)簽在渲染的時(shí)候被源碼輸出</span>",　
        } 
    });
</script>

4.4、v-pre

• 顯示原始信息债热，跳過編譯過程

• 跳過這個(gè)元素和它的子元素的編譯過程砾嫉。

• 一些靜態(tài)的內(nèi)容不需要編譯，加這個(gè)指令可以加快渲染

<span v-pre>{{ this will not be compiled }}</span>
顯示的是{{ this will not be compiled }} 

<span v-pre>{{msg}}</span>
即使data里面定義了msg這里仍然顯示 {{msg}}

<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'Hello Vue.js'
        }
    });?
</script>

總結(jié)：插值表達(dá)式窒篱、v-text焕刮、v-pre

4.5、數(shù)據(jù)響應(yīng)式

數(shù)據(jù)驅(qū)動(dòng)內(nèi)容變化,不需要顯示地操作DOM

4.6避消、v-once

• 執(zhí)行一次性的插值【當(dāng)數(shù)據(jù)改變時(shí)低滩，插值處的內(nèi)容不會(huì)繼續(xù)更新】
• 執(zhí)行一次性的插值召夹，數(shù)據(jù)響應(yīng)式不起作用

即使data里面定義了msg 后期我們修改了 仍然顯示的是第一次data里面存儲(chǔ)的數(shù)據(jù)即 Hello Vue.js 

<span v-once>{{ msg }}</span>
<script>
 new Vue({
    el: '#app',
     data: {
         msg: 'Hello Vue.js'
     }
 });
</script>

4.7岩喷、雙向數(shù)據(jù)綁定

• 當(dāng)數(shù)據(jù)發(fā)生變化的時(shí)候恕沫，視圖也就發(fā)生變化
• 當(dāng)視圖發(fā)生變化的時(shí)候，數(shù)據(jù)也會(huì)跟著同步變化

4.8纱意、v-model

• v-model 是一個(gè)指令婶溯，限制在 <input>、<select>偷霉、<textarea>迄委、components 中使用
• v-model 默認(rèn)是雙向數(shù)據(jù)綁定

<div id="app">
    <div>{{msg}}</div>
    <div>
        當(dāng)輸入框中內(nèi)容改變的時(shí)候，數(shù)據(jù)模型中的mgs值會(huì)自動(dòng)改變类少，
        而mgs值改變后叙身，頁面標(biāo)簽上的 msg 會(huì)自動(dòng)更新
        <input type="text" v-model='msg'>
    </div>
</div>
<script>
    let app = new Vue({　　
        el: "#app",
        　　data: {　　　　
            msg: "Hello World"
        } 
    });
</script>

4.9、MVC和MVVM

• MVC 是后端的分層開發(fā)概念硫狞； MVVM是前端視圖層的概念信轿，主要關(guān)注于 視圖層分離，也就是說：MVVM把前端的視圖層残吩，分為了 三部分 Model财忽、View 、ViewModel

• M（Model）數(shù)據(jù)

  • 數(shù)據(jù)層 泣侮，Vue 中 數(shù)據(jù)層 都放在 data 里面

• V（View）視圖

  • Vue 中 view 即 我們的HTML頁面

• VM （View-Model） 控制器 將數(shù)據(jù)和視圖層建立聯(lián)系

  • Vue 的實(shí)例 vm 就是 viewModel

4.10即彪、v-on

• 用來綁定事件的

• 語法如：v-on:click=“事件名(參數(shù)1，參數(shù)2)” 活尊，縮寫為 @click

  <button v-on:click='handle1'>點(diǎn)擊1</button>
  

  或者：

  <button @click='handle1'>點(diǎn)擊1</button>
  

• 事件傳參寫法：

  <button v-on:click='handle2(123, 456, $event)'>點(diǎn)擊2</button>
  

  或者：

  <button @click='handle2(123, 456, $event)'>點(diǎn)擊2</button>
  

v-on事件函數(shù)寫法

• 如果事件直接綁定函數(shù)名稱隶校，那么默認(rèn)會(huì)傳遞事件對(duì)象作為事件函數(shù)的第一個(gè)參數(shù)
• 如果事件綁定函數(shù)調(diào)用，那么事件對(duì)象必須作為最后一個(gè)參數(shù)顯示傳遞蛹锰，并且事件對(duì)象的名稱必須是$event

<div id="app">
    <div>{{num}}</div>
    <div>
        如果事件直接綁定函數(shù)名稱深胳，那么默認(rèn)會(huì)傳遞事件對(duì)象作為事件函數(shù)的第一個(gè)參數(shù)
        <button @click='handle1'>點(diǎn)擊1</button>

        如果事件綁定函數(shù)調(diào)用，那么事件對(duì)象必須作為最后一個(gè)參數(shù)顯示傳遞宁仔，并且事件對(duì)象的名稱必須是$event
        <button @click='handle2(123, 456, $event)'>點(diǎn)擊2</button>
    </div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            num: 0
        },
        methods: { 
            handle1: function(event) { // 默認(rèn)傳遞event
                console.log(event.target.innerHTML)
            },
            handle2: function(p, p1, event) {
                console.log(p, p1)
                console.log(event.target.innerHTML)
                this.num++;
            }
        }
    });
</script>

注意：

• vue中的event對(duì)象和原生的是相同的
• methods 是一個(gè)對(duì)象
• 在methods中使用data中的數(shù)據(jù)需要加this.訪問稠屠，this指向?qū)嵗龑?duì)象vm
• 箭頭函數(shù)會(huì)改變this指向

4.11、事件修飾符

• 在事件處理程序中調(diào)用 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求翎苫。

• Vue 不推薦我們操作DOM 為了解決這個(gè)問題权埠，Vue.js 為 v-on 提供了事件修飾符

• 修飾符是由點(diǎn)開頭的指令后綴來表示的

阻止單擊事件繼續(xù)傳播
<a @click.stop="doThis"></a>
?
提交事件不再重載頁面
<form @submit.prevent="onSubmit"></form>
?
修飾符可以串聯(lián)，即阻止冒泡也阻止默認(rèn)事件
<a @click.stop.prevent="doThat"></a>
?
只當(dāng)在 event.target 是當(dāng)前元素自身時(shí)觸發(fā)處理函數(shù)
即事件不是從內(nèi)部元素觸發(fā)的
<div @click.self="doThat">...</div>
?
使用修飾符時(shí)煎谍，順序很重要攘蔽；相應(yīng)的代碼會(huì)以同樣的順序產(chǎn)生。因此呐粘，用 @click.prevent.self 會(huì)阻止所有的點(diǎn)擊满俗，
而 @click.self.prevent 只會(huì)阻止對(duì)元素自身的點(diǎn)擊转捕。

4.11、按鍵修飾符

• 在做項(xiàng)目中有時(shí)會(huì)用到鍵盤事件唆垃，在監(jiān)聽鍵盤事件時(shí)五芝，我們經(jīng)常需要檢查詳細(xì)的按鍵。Vue 允許為 v-on 在監(jiān)聽鍵盤事件時(shí)添加按鍵修飾符

只有在 `keyCode` 是 13 時(shí)調(diào)用 `vm.submit()`
<input v-on:keyup.13="submit"> ?

當(dāng)點(diǎn)擊enter 時(shí)調(diào)用 `vm.submit()` 
<input v-on:keyup.enter="submit"> ?

當(dāng)點(diǎn)擊enter或者space時(shí)  時(shí)調(diào)用 `vm.alertMe()`   
<input type="text" v-on:keyup.enter.space="alertMe"> ? 
?
常用的按鍵修飾符
.enter => enter鍵
.tab => tab鍵
.delete (捕獲“刪除”和“退格”按鍵) => 刪除鍵
.esc => 取消鍵
.space => 空格鍵
.up => 上
.down => 下
.left => 左
.right =>  右
?
<script>
    var vm = new Vue({
        el: "#app",
        methods: {
            submit: function() {},
            alertMe: function() {},
        }
    })?
</script>

自定義按鍵修飾符別名

• 在Vue中可以通過config.keyCodes自定義按鍵修飾符別名

<div id="app">
    預(yù)先定義了keycode 116（即F5）的別名為f5辕万，因此在文字輸入框中按下F5枢步，會(huì)觸發(fā)prompt方法
    <input type="text" v-on:keydown.f5="prompt()">
</div>
?
<script>
    Vue.config.keyCodes.f5 = 116;?
    let app = new Vue({
        el: '#app',
        methods: {
            prompt: function() {
                alert('我是 F5！');
            }
        }
    });
</script>

4.12渐尿、v-bind

• v-bind 指令被用來響應(yīng)地更新 HTML 屬性

• v-bind:href 可以縮寫為 :href;

<!-- 綁定一個(gè)屬性 -->
<img v-bind:src="imageSrc">
?
<!-- 縮寫 -->
<img :src="imageSrc">

綁定對(duì)象

• 我們可以給v-bind:class 一個(gè)對(duì)象醉途，以動(dòng)態(tài)地切換class。

• 注意：v-bind:class指令可以與普通的class特性共存

• 對(duì)象的鍵就是類名砖茸，值為true則顯示隘擎，false則不顯示

1、 v-bind 中支持綁定一個(gè)對(duì)象 如果綁定的是一個(gè)對(duì)象 則 鍵為 對(duì)應(yīng)的類名 值 為對(duì)應(yīng)data中的數(shù)據(jù)
    <!-- 
    HTML最終渲染為 <ul class="box textColor textSize"></ul>
    注意：
    textColor凉夯，textSize  對(duì)應(yīng)的渲染到頁面上的CSS類名 
    isColor货葬，isSize  對(duì)應(yīng)vue data中的數(shù)據(jù)  如果為true 則對(duì)應(yīng)的類名 渲染到頁面上 
   ?
   ?
    當(dāng) isColor 和 isSize 變化時(shí)，class列表將相應(yīng)的更新恍涂，
    例如宝惰，將isSize改成false，
    class列表將變?yōu)?<ul class="box textColor"></ul>
   -->
?
    <style>
        ? .box {
            border: 1px dashed #f0f;
        }
        
        .textColor {
            color: #f00;
            background-color: #eef;
        }
        
        .textSize {
            font-size: 30px;
            font-weight: bold;
        }
    </style>

<ul class="box" v-bind:class="{textColor:isColor, textSize:isSize}">
    <li>學(xué)習(xí)Vue</li>
    <li>學(xué)習(xí)Node</li>
    <li>學(xué)習(xí)React</li>
</ul>
<div v-bind:style="{color:activeColor,fontSize:activeSize}">對(duì)象語法</div>
?
<script src="./vue.js"></script>
<script>
    var vm = new Vue({ 
        el:'.box', 
        data:{ 
            isColor:true, isSize:true,
            activeColor:"red", 
            activeSize:"25px" 
        } 
    });
</script>

綁定class

2再沧、 v-bind 中支持綁定一個(gè)數(shù)組   數(shù)組中的 classA 對(duì)應(yīng)data 中的 classA , classB 對(duì)應(yīng)data 中的 classB
<ul class="box" :class="[classA, classB]">
    <li>學(xué)習(xí)Vue</li>
    <li>學(xué)習(xí)Node</li>
    <li>學(xué)習(xí)React</li>
</ul>
<script>
    var vm = new Vue({
        el: '.box',
        data: {
            classA: ‘textColor‘,
            classB: ‘textSize‘
        }
    })
</script>
<style>
    .box {
        border: 1px dashed #f0f;
    }
    
    .textColor {
        color: #f00;
        background-color: #eef;
    }
    
    .textSize {
        font-size: 30px;
        font-weight: bold;
    }
</style>

綁定對(duì)象和綁定數(shù)組 的區(qū)別

• 綁定對(duì)象的時(shí)候 對(duì)象的屬性 即要渲染的類名 對(duì)象的屬性值對(duì)應(yīng)的是 data 中的數(shù)據(jù)

• 綁定數(shù)組的時(shí)候數(shù)組里面存的是data 中的數(shù)據(jù)

樣式綁定相關(guān)語法細(xì)節(jié)：

• 對(duì)象綁定和數(shù)組綁定可以結(jié)合使用
• class綁定的值可以簡(jiǎn)化操作
• 默認(rèn)的class會(huì)保留

綁定style（行內(nèi)樣式）

<div v-bind:style="styleObject">綁定樣式對(duì)象</div>

CSS 屬性名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case尼夺，記得用單引號(hào)括起來)   
<div v-bind:style="{ color: activeColor, fontSize: fontSize, background:'red' }">內(nèi)聯(lián)樣式</div>
?
組語法可以將多個(gè)樣式對(duì)象應(yīng)用到同一個(gè)元素 
<div v-bind:style="[styleObj1, styleObj2]"></div>
? ?
<script>
    new Vue({
        el: '#app',
        data: {
            styleObject: {
                color: 'green',
                fontSize: '30px',
                background: 'red'
            },
            activeColor: 'green',
            fontSize: "30px"
        },
        styleObj1: {
            color: 'red'
        },
        styleObj2: {
            fontSize: '30px'
        }?
    })
</script>

4.13、分支結(jié)構(gòu)

v-if 使用場(chǎng)景

• 1- 多個(gè)元素 通過條件判斷展示或者隱藏某個(gè)元素炒瘸∮俣拢或者多個(gè)元素

• 2- 進(jìn)行兩個(gè)視圖之間的切換

<div id="app">
 <!--  判斷是否加載，如果為真顷扩，就加載拐邪，否則不加載-->
 <span v-if="flag">
 如果flag為true則顯示,false不顯示!
 </span>
</div>
?
<script>
 var vm = new Vue({
 el:"#app",
 data:{
 flag:true
 }
 })
</script>
?
----------------------------------------------------------
?
 <div v-if="type === 'A'">
 A
 </div>
 <!-- v-else-if緊跟在v-if或v-else-if之后   表示v-if條件不成立時(shí)執(zhí)行-->
 <div v-else-if="type === 'B'">
 B
 </div>
 <div v-else-if="type === 'C'">
 C
 </div>
 <!-- v-else緊跟在v-if或v-else-if之后-->
 <div v-else>
 Not A/B/C
 </div>
?
<script>
 new Vue({
 el: '#app',
 data: {
 type: 'C'
 }
 })
</script>

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

• v-show本質(zhì)就是標(biāo)簽display設(shè)置為none，控制隱藏

  • v-show 只編譯一次隘截，后面其實(shí)就是控制css扎阶，而 v-if 不停的銷毀和創(chuàng)建，故v-show性能更好一點(diǎn)婶芭。

• v-if 是動(dòng)態(tài)的向DOM樹內(nèi)添加或者刪除DOM元素

  • v-if 切換有一個(gè)局部編譯/卸載的過程东臀，切換過程中合適地銷毀和重建內(nèi)部的事件監(jiān)聽和子組件

4.14、循環(huán)結(jié)構(gòu)

v-for

• 用于循環(huán)的數(shù)組里面的值可以是對(duì)象犀农，也可以是普通元素

<ul id="example-1">
 <!-- 循環(huán)結(jié)構(gòu)-遍歷數(shù)組
 item 是我們自己定義的一個(gè)名字  代表數(shù)組里面的每一項(xiàng)
 items對(duì)應(yīng)的是 data中的數(shù)組-->
 <li v-for="item in items">
 {{ item.message }}
 </li> 
?
</ul>
<script>
 new Vue({
 el: '#example-1',
 data: {
 items: [
 { message: 'Foo' },
 { message: 'Bar' }
 ]惰赋，

 }
})
</script>

• 不推薦同時(shí)使用 v-if 和 v-for

• 當(dāng) v-if 與 v-for 一起使用時(shí)，v-for 具有比 v-if 更高的優(yōu)先級(jí)呵哨。

 <!--  循環(huán)結(jié)構(gòu)-遍歷對(duì)象
 v 代表   對(duì)象的value
 k  代表對(duì)象的 鍵 
 i  代表索引 
 ---> 
 <div v-if='v==13' v-for='(v,k,i) in obj'>{{v + '---' + k + '---' + i}}</div>
?
<script>
 new Vue({
 el: '#example-1',
 data: {
 items: [
 { message: 'Foo' },
 { message: 'Bar' }
 ]赁濒，
 obj: {
 uname: 'zhangsan',
 age: 13,
 gender: 'female'
 }
 }
})
</script>

• key 的作用

  • key來給每個(gè)節(jié)點(diǎn)做一個(gè)唯一標(biāo)識(shí)

  • key的作用主要是為了高效的更新虛擬DOM

<ul>
 <li v-for="item in items" :key="item.id">...</li>
</ul>

案例選項(xiàng)卡

1轨奄、 HTML 結(jié)構(gòu)

`
 <div id="app">
 <div class="tab">
 <!--  tab欄  -->
 <ul>
 <li class="active">apple</li>
 <li class="">orange</li>
 <li class="">lemon</li>
 </ul>
 <!--  對(duì)應(yīng)顯示的圖片 -->
 <div class="current"><img src="img/apple.png"></div>
 <div class=""><img src="img/orange.png"></div>
 <div class=""><img src="img/lemon.png"></div>
 </div>
 </div>
?
?
`

2、 提供的數(shù)據(jù)

 list: [{
 id: 1,
 title: 'apple',
 path: 'img/apple.png'
 }, {
 id: 2,
 title: 'orange',
 path: 'img/orange.png'
 }, {
 id: 3,
 title: 'lemon',
 path: 'img/lemon.png'
 }]

3拒炎、 把數(shù)據(jù)渲染到頁面

• 把tab欄 中的數(shù)替換到頁面上

  • 把 data 中 title 利用 v-for 循環(huán)渲染到頁面上

  • 把 data 中 path利用 v-for 循環(huán)渲染到頁面上

     <div id="app">
     <div class="tab">
     <ul>
     <!--
     1挪拟、綁定key的作用 提高Vue的性能 
     2、 key 需要是唯一的標(biāo)識(shí) 所以需要使用id枝冀， 也可以使用index 舞丛，
     index 也是唯一的 
     3耘子、 item 是 數(shù)組中對(duì)應(yīng)的每一項(xiàng)
     4果漾、 index 是 每一項(xiàng)的 索引
     -->
     <li :key='item.id' v-for='(item,index) in list'>{{item.title}}</li>
     </ul>
     <div  :key='item.id' v-for='(item, index) in list'>
     <!-- :  是 v-bind 的簡(jiǎn)寫   綁定屬性使用 v-bind -->
     <img :src="item.path">
     </div>
     </div>
     </div>
    <script>
     new  Vue({
     //  指定 操作元素 是 id 為app 的 
     el: '#app',
     data: {
     list: [{
     id: 1,
     title: 'apple',
     path: 'img/apple.png'
     }, {
     id: 2,
     title: 'orange',
     path: 'img/orange.png'
     }, {
     id: 3,
     title: 'lemon',
     path: 'img/lemon.png'
     }]
     }
     })
    ?
    </script>

4、 給每一個(gè)tab欄添加事件,并讓選中的高亮

• 4.1 谷誓、讓默認(rèn)的第一項(xiàng)tab欄高亮

  • tab欄高亮 通過添加類名active 來實(shí)現(xiàn) （CSS active 的樣式已經(jīng)提前寫好）

    • 在data 中定義一個(gè) 默認(rèn)的 索引 currentIndex 為 0

    • 給第一個(gè)li 添加 active 的類名

      • 通過動(dòng)態(tài)綁定class 來實(shí)現(xiàn) 第一個(gè)li 的索引為 0 和 currentIndex 的值剛好相等

      • currentIndex === index 如果相等 則添加類名 active 否則 添加 空類名

• 4.2 绒障、讓默認(rèn)的第一項(xiàng)tab欄對(duì)應(yīng)的div 顯示

  • 實(shí)現(xiàn)思路 和 第一個(gè) tab 實(shí)現(xiàn)思路一樣 只不過 這里控制第一個(gè)div 顯示的類名是 current

    <ul>
    <!-- 動(dòng)態(tài)綁定class   有 active   類名高亮  無 active   不高亮-->
    <li  :class='currentIndex==index?"active":""'
    :key='item.id' v-for='(item,index) in list'
    >{{item.title}}</li>
    </ul>
    <!-- 動(dòng)態(tài)綁定class   有 current  類名顯示  無 current  隱藏-->
    <div :class='currentIndex==index?"current":""' 

    :key='item.id' v-for='(item, index) in list'>
    <!-- :  是 v-bind 的簡(jiǎn)寫   綁定屬性使用 v-bind -->
    <img :src="item.path">
    </div>
   ?
   <script>
    new  Vue({
    el: '#app',
    data: {
    currentIndex: 0, // 選項(xiàng)卡當(dāng)前的索引  默認(rèn)為 0
    list: [{
    id: 1,
    title: 'apple',
    path: 'img/apple.png'
    }, {
    id: 2,
    title: 'orange',
    path: 'img/orange.png'
    }, {
    id: 3,
    title: 'lemon',
    path: 'img/lemon.png'
    }]
    }
    })
   ?
   </script>

• 4.3 、點(diǎn)擊每一個(gè)tab欄 當(dāng)前的高亮 其他的取消高亮

  • 給每一個(gè)li添加點(diǎn)擊事件

  • 讓當(dāng)前的索引 index 和 當(dāng)前 currentIndex 的 值 進(jìn)項(xiàng)比較

  • 如果相等 則當(dāng)前l(fā)i 添加active 類名 當(dāng)前的 li 高亮 當(dāng)前對(duì)應(yīng)索引的 div 添加 current 當(dāng)前div 顯示 其他隱藏