vue2 - day - 01

一巾遭、為什么要學(xué)習(xí)Vue

1.前端必備技能

2.崗位多，絕大互聯(lián)網(wǎng)公司都在使用Vue

3.提高開發(fā)效率

4.高薪必備技能（Vue2+Vue3）

二、什么是Vue

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

Vue2官網(wǎng)：https://v2.cn.vuejs.org/

1.什么是構(gòu)建用戶界面

基于數(shù)據(jù)渲染出用戶可以看到的界面

2.什么是漸進(jìn)式

所謂漸進(jìn)式就是循序漸進(jìn)剧浸，不一定非得把Vue中的所有API都學(xué)完才能開發(fā)Vue，可以學(xué)一點(diǎn)開發(fā)一點(diǎn)

Vue的兩種開發(fā)方式：

1. Vue核心包開發(fā)

   場(chǎng)景：局部模塊改造

2. Vue核心包&Vue插件&工程化

   場(chǎng)景：整站開發(fā)

3.什么是框架

所謂框架：就是一套完整的解決方案

舉個(gè)栗子

如果把一個(gè)完整的項(xiàng)目比喻為一個(gè)裝修好的房子冶伞，那么框架就是一個(gè)毛坯房。

我們只需要在“毛坯房”的基礎(chǔ)上步氏，增加功能代碼即可碰缔。

提到框架，不得不提一下庫戳护。

• 庫金抡，類似工具箱，是一堆方法的集合腌且，比如 axios梗肝、lodash、echarts等

• 框架铺董，是一套完整的解決方案巫击，實(shí)現(xiàn)了大部分功能，我們只需要按照一定的規(guī)則去編碼即可精续。

下圖是 庫 和 框架的對(duì)比坝锰。

image.png

咱們學(xué)框架就是學(xué)習(xí)的這些規(guī)則 官網(wǎng)

三、創(chuàng)建Vue實(shí)例

我們已經(jīng)知道了Vue框架可以 基于數(shù)據(jù)幫助我們渲染出用戶界面重付，那應(yīng)該怎么做呢顷级？

核心步驟（4步）：

1. 準(zhǔn)備容器

2. 引包（官網(wǎng)） — 開發(fā)版本/生產(chǎn)版本

3. 創(chuàng)建Vue實(shí)例 new Vue()

4. 指定配置項(xiàng)，渲染數(shù)據(jù)

   1. el:指定掛載點(diǎn)

   2. data提供數(shù)據(jù)
      

      image.png
      
      總結(jié)：創(chuàng)建Vue實(shí)例需要執(zhí)行哪4步

四确垫、插值表達(dá)式 {{}}

插值表達(dá)式是一種Vue的模板語法

我們可以用插值表達(dá)式渲染出Vue提供的數(shù)據(jù)

1.作用：利用表達(dá)式進(jìn)行插值弓颈，渲染到頁面中

表達(dá)式：是可以被求值的代碼帽芽，JS引擎會(huì)講其計(jì)算出一個(gè)結(jié)果

以下的情況都是表達(dá)式：

money + 100
money - 100
money * 10
money / 10 
price >= 100 ? '真貴':'還行'
obj.name
arr[0]
fn()
obj.fn()

2.語法

插值表達(dá)式語法：{{ 表達(dá)式 }}

<h3>{{title}}<h3>

<p>{{nickName.toUpperCase()}}</p>

<p>{{age >= 18 ? '成年':'未成年'}}</p>

<p>{{obj.name}}</p>

<p>{{fn()}}</p>

3.錯(cuò)誤用法

1.在插值表達(dá)式中使用的數(shù)據(jù) 必須在data中進(jìn)行了提供
<p>{{hobby}}</p>  //如果在data中不存在 則會(huì)報(bào)錯(cuò)

2.支持的是表達(dá)式，而非語句翔冀，比如：if   for ...
<p>{{if}}</p>

3.不能在標(biāo)簽屬性中使用 {{  }} 插值 (插值表達(dá)式只能標(biāo)簽中間使用)
<p title="{{username}}">我是P標(biāo)簽</p>

五导街、響應(yīng)式特性

1.什么是響應(yīng)式？

簡(jiǎn)單理解就是數(shù)據(jù)變纤子，視圖對(duì)應(yīng)變搬瑰。

2.如何訪問 和 修改 data中的數(shù)據(jù)（響應(yīng)式演示）

data中的數(shù)據(jù), 最終會(huì)被添加到實(shí)例上

① 訪問數(shù)據(jù)： "實(shí)例.屬性名"

② 修改數(shù)據(jù)： "實(shí)例.屬性名"= "值"

六、Vue開發(fā)者工具安裝

1. 通過谷歌應(yīng)用商店安裝（國外網(wǎng)站）

2. 極簡(jiǎn)插件下載（推薦） https://chrome.zzzmh.cn/index

安裝步驟：

image.png

安裝之后可以F12后看到多一個(gè)Vue的調(diào)試面板

七控硼、Vue中的常用指令

概念：指令（Directives）是 Vue 提供的帶有 v- 前綴 的 特殊 標(biāo)簽屬性泽论。

為啥要學(xué)：提高程序員操作 DOM 的效率。

vue 中的指令按照不同的用途可以分為如下 6 大類：

• 內(nèi)容渲染指令（v-html象颖、v-text）
• 條件渲染指令（v-show佩厚、v-if姆钉、v-else说订、v-else-if）
• 事件綁定指令（v-on）
• 屬性綁定指令 （v-bind）
• 雙向綁定指令（v-model）
• 列表渲染指令（v-for）

指令是 vue 開發(fā)中最基礎(chǔ)、最常用潮瓶、最簡(jiǎn)單的知識(shí)點(diǎn)陶冷。

八、內(nèi)容渲染指令

內(nèi)容渲染指令用來輔助開發(fā)者渲染 DOM 元素的文本內(nèi)容毯辅。常用的內(nèi)容渲染指令有如下2 個(gè)：

• v-text（類似innerText）

• • 使用語法：<p v-text="uname">hello</p>埂伦，意思是將 uame 值渲染到 p 標(biāo)簽中
  • 類似 innerText，使用該語法思恐，會(huì)覆蓋 p 標(biāo)簽原有內(nèi)容

• v-html（類似 innerHTML）

• • 使用語法：<p v-html="intro">hello</p>沾谜，意思是將 intro 值渲染到 p 標(biāo)簽中
  • 類似 innerHTML，使用該語法胀莹，會(huì)覆蓋 p 標(biāo)簽原有內(nèi)容
  • 類似 innerHTML基跑，使用該語法，能夠?qū)TML標(biāo)簽的樣式呈現(xiàn)出來描焰。

代碼演示：

 
  <div id="app">
    <h2>個(gè)人信息</h2>
    // 既然指令是vue提供的特殊的html屬性媳否，所以咱們寫的時(shí)候就當(dāng)成屬性來用即可
    <p v-text="uname">姓名：</p> 
    <p v-html="intro">簡(jiǎn)介：</p>
  </div> 

<script>
        const app = new Vue({
            el:'#app',
            data:{
                uname:'張三',
                intro:'<h2>這是一個(gè)<strong>非常優(yōu)秀</strong>的boy<h2>'
            }
        })
</script>

九、條件渲染指令

條件判斷指令荆秦，用來輔助開發(fā)者按需控制 DOM 的顯示與隱藏篱竭。條件渲染指令有如下兩個(gè)，分別是：

1. v-show

   1. 作用： 控制元素顯示隱藏
   2. 語法： v-show = "表達(dá)式" 表達(dá)式值為 true 顯示步绸， false 隱藏
   3. 原理： 切換 display:none 控制顯示隱藏
   4. 場(chǎng)景：頻繁切換顯示隱藏的場(chǎng)景

2. v-if

   1. 作用： 控制元素顯示隱藏（條件渲染）
   2. 語法： v-if= "表達(dá)式" 表達(dá)式值 true顯示掺逼， false 隱藏
   3. 原理： 基于條件判斷，是否創(chuàng)建 或 移除元素節(jié)點(diǎn)
   4. 場(chǎng)景： 要么顯示瓤介，要么隱藏坪圾，不頻繁切換的場(chǎng)景

   示例代碼：

  <div id="app">
    <div class="box">我是v-show控制的盒子</div>
    <div class="box">我是v-if控制的盒子</div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        flag: false
      }
    })
  </script>

1. v-else 和 v-else-if

   1. 作用：輔助v-if進(jìn)行判斷渲染
   2. 語法：v-else v-else-if="表達(dá)式"
   3. 需要緊接著v-if使用

示例代碼：

  <div id="app">
    <p>性別：♂ 男</p>
    <p>性別：♀ 女</p>
    <hr>
    <p>成績(jī)?cè)u(píng)定A：獎(jiǎng)勵(lì)電腦一臺(tái)</p>
    <p>成績(jī)?cè)u(píng)定B：獎(jiǎng)勵(lì)周末郊游</p>
    <p>成績(jī)?cè)u(píng)定C：獎(jiǎng)勵(lì)零食禮包</p>
    <p>成績(jī)?cè)u(píng)定D：懲罰一周不能玩手機(jī)</p>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>

    const app = new Vue({
      el: '#app',
      data: {
        gender: 2,
        score: 95
      }
    })
  </script>

十晓折、事件綁定指令

使用Vue時(shí)，如需為DOM注冊(cè)事件兽泄，及其的簡(jiǎn)單漓概，語法如下：

• <button v-on:事件名="內(nèi)聯(lián)語句">按鈕</button>
• <button v-on:事件名="處理函數(shù)">按鈕</button>
• <button v-on:事件名="處理函數(shù)(實(shí)參)">按鈕</button>
• v-on: 簡(jiǎn)寫為 @

1. 內(nèi)聯(lián)語句

<div id="app">
    <button @click="count--">-</button>
    <span>{{ count }}</span>
    <button v-on:click="count++">+</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        count: 100
      }
    })
  </script>

2. 事件處理函數(shù)

注意：

• 事件處理函數(shù)應(yīng)該寫到一個(gè)跟data同級(jí)的配置項(xiàng)（methods）中
• methods中的函數(shù)內(nèi)部的this都指向Vue實(shí)例

<div id="app">
    <button>切換顯示隱藏</button>
    <h1 v-show="isShow">黑馬程序員</h1>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        isShow: true
      }
    })
  </script>

3.給事件處理函數(shù)傳參

• 如果不傳遞任何參數(shù)，則方法無需加小括號(hào)病梢；methods方法中可以直接使用 e 當(dāng)做事件對(duì)象

• 如果傳遞了參數(shù)胃珍，則實(shí)參 $event 表示事件對(duì)象，固定用法蜓陌。

 <style>
    .box {
      border: 3px solid #000000;
      border-radius: 10px;
      padding: 20px;
      margin: 20px;
      width: 200px;
    }
    h3 {
      margin: 10px 0 20px 0;
    }
    p {
      margin: 20px;
    }
  </style>

 <div id="app">
    <div class="box">
      <h3>小黑自動(dòng)售貨機(jī)</h3>
      <button>可樂5元</button>
      <button>咖啡10元</button>
      <button>牛奶8元</button>
    </div>
    <p>銀行卡余額：{{ money }}元</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        money: 100
      }
    })
  </script>

十一觅彰、屬性綁定指令

1. 作用：動(dòng)態(tài)設(shè)置html的標(biāo)簽屬性 比如：src、url钮热、title
2. 語法：v-bind:屬性名=“表達(dá)式”
3. v-bind:可以簡(jiǎn)寫成 => :

比如填抬，有一個(gè)圖片，它的 src 屬性值隧期，是一個(gè)圖片地址飒责。這個(gè)地址在數(shù)據(jù) data 中存儲(chǔ)。

則可以這樣設(shè)置屬性值：

• <img v-bind:src="url" />
• <img :src="url" /> （v-bind可以省略）

  <div id="app">
    <img v-bind:src="imgUrl" v-bind:title="msg" alt="">
    <img :src="imgUrl" :title="msg" alt="">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        imgUrl: './imgs/10-02.png',
        msg: 'hello 波仔'
      }
    })
  </script>

十二仆潮、小案例-波仔的學(xué)習(xí)之旅

需求：默認(rèn)展示數(shù)組中的第一張圖片宏蛉，點(diǎn)擊上一頁下一頁來回切換數(shù)組中的圖片

實(shí)現(xiàn)思路：

1.數(shù)組存儲(chǔ)圖片路徑 ['url1','url2','url3'，...]

2.可以準(zhǔn)備個(gè)下標(biāo)index 去數(shù)組中取圖片地址性置。

3.通過v-bind給src綁定當(dāng)前的圖片地址

4.點(diǎn)擊上一頁下一頁只需要修改下標(biāo)的值即可

5.當(dāng)展示第一張的時(shí)候拾并，上一頁按鈕應(yīng)該隱藏。展示最后一張的時(shí)候鹏浅，下一頁按鈕應(yīng)該隱藏

 <div id="app">
    <button>上一頁</button>
    <div>
      <img src alt="">
    </div>
    <button>下一頁</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        list: [
          './imgs/11-00.gif',
          './imgs/11-01.gif',
          './imgs/11-02.gif',
          './imgs/11-03.gif',
          './imgs/11-04.png',
          './imgs/11-05.png',
        ]
      }
    })
  </script>

十三嗅义、列表渲染指令

Vue 提供了 v-for 列表渲染指令，用來輔助開發(fā)者基于一個(gè)數(shù)組來循環(huán)渲染一個(gè)列表結(jié)構(gòu)隐砸。

v-for 指令需要使用 (item, index) in arr 形式的特殊語法之碗，其中：

• item 是數(shù)組中的每一項(xiàng)
• index 是每一項(xiàng)的索引，不需要可以省略
• arr 是被遍歷的數(shù)組

此語法也可以遍歷對(duì)象和數(shù)字

//遍歷對(duì)象
<div v-for="(value, key, index) in object">{{value}}</div>
value:對(duì)象中的值
key:對(duì)象中的鍵
index:遍歷索引從0開始

//遍歷數(shù)字
<p v-for="item in 10">{{item}}</p>
item從1 開始

十四凰萨、小案例-小黑的書架

需求：

1.根據(jù)左側(cè)數(shù)據(jù)渲染出右側(cè)列表（v-for）

2.點(diǎn)擊刪除按鈕時(shí)继控，應(yīng)該把當(dāng)前行從列表中刪除（獲取當(dāng)前行的id，利用filter進(jìn)行過濾）

準(zhǔn)備代碼：

<div id="app">
    <h3>小黑的書架</h3>
    <ul>
      <li>
        <span>《紅樓夢(mèng)》</span>
        <span>曹雪芹</span>
        <button>刪除</button>
      </li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        booksList: [
          { id: 1, name: '《紅樓夢(mèng)》', author: '曹雪芹' },
          { id: 2, name: '《西游記》', author: '吳承恩' },
          { id: 3, name: '《水滸傳》', author: '施耐庵' },
          { id: 4, name: '《三國演義》', author: '羅貫中' }
        ]
      }
    })
  </script>

十五胖眷、v-for中的key

語法： key="唯一值"

作用：給列表項(xiàng)添加的唯一標(biāo)識(shí)武通。便于Vue進(jìn)行列表項(xiàng)的正確排序復(fù)用。

為什么加key：Vue 的默認(rèn)行為會(huì)嘗試原地修改元素（就地復(fù)用）

實(shí)例代碼：

<ul>
  <li v-for="(item, index) in booksList" :key="item.id">
    <span>{{ item.name }}</span>
    <span>{{ item.author }}</span>
    <button @click="del(item.id)">刪除</button>
  </li>
</ul>

注意：

1. key 的值只能是字符串 或 數(shù)字類型
2. key 的值必須具有唯一性
3. 推薦使用 id 作為 key（唯一）珊搀，不推薦使用 index 作為 key（會(huì)變化冶忱，不對(duì)應(yīng)）

十六、雙向綁定指令

所謂雙向綁定就是：

1. 數(shù)據(jù)改變后境析，呈現(xiàn)的頁面結(jié)果會(huì)更新
2. 頁面結(jié)果更新后囚枪，數(shù)據(jù)也會(huì)隨之而變

作用： 給表單元素（input派诬、radio、select）使用链沼，雙向綁定數(shù)據(jù)默赂，可以快速 獲取 或 設(shè)置 表單元素內(nèi)容

語法：v-model="變量"

需求：使用雙向綁定實(shí)現(xiàn)以下需求

1. 點(diǎn)擊登錄按鈕獲取表單中的內(nèi)容
2. 點(diǎn)擊重置按鈕清空表單中的內(nèi)容

<div id="app">
    賬戶：<input type="text"> <br><br>
    密碼：<input type="password"> <br><br>
    <button>登錄</button>
    <button>重置</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username: '',
        password: ''
      },
    })
  </script>

十七、綜合案例-小黑記事本

功能需求：

1. 列表渲染
2. 刪除功能
3. 添加功能
4. 底部統(tǒng)計(jì) 和 清空

vue2 - day - 02

一括勺、今日學(xué)習(xí)目標(biāo)

1.指令補(bǔ)充

1. 指令修飾符
2. v-bind對(duì)樣式增強(qiáng)的操作
3. v-model應(yīng)用于其他表單元素

2.computed計(jì)算屬性

1. 基礎(chǔ)語法
2. 計(jì)算屬性vs方法
3. 計(jì)算屬性的完整寫法
4. 成績(jī)案例

3.watch偵聽器

1. 基礎(chǔ)寫法
2. 完整寫法

4.綜合案例 （演示）

1. 渲染 / 刪除 / 修改數(shù)量 / 全選 / 反選 / 統(tǒng)計(jì)總價(jià) / 持久化

二缆八、指令修飾符

1.什么是指令修飾符？

所謂指令修飾符就是通過“.”指明一些指令**后綴** 不同的**后綴**封裝了不同的處理操作  —> 簡(jiǎn)化代碼

2.按鍵修飾符

• @keyup.enter —>當(dāng)點(diǎn)擊enter鍵的時(shí)候才觸發(fā)

代碼演示：

  <div id="app">
    <h3>@keyup.enter  →  監(jiān)聽鍵盤回車事件</h3>
    <input v-model="username" type="text">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username: ''
      },
      methods: {
        
      }
    })
  </script>

3.v-model修飾符

• v-model.trim —>去除首位空格
• v-model.number —>轉(zhuǎn)數(shù)字

4.事件修飾符

• @事件名.stop —> 阻止冒泡
• @事件名.prevent —>阻止默認(rèn)行為
• @事件名.stop.prevent —>可以連用 即阻止事件冒泡也阻止默認(rèn)行為

 <style>
    .father {
      width: 200px;
      height: 200px;
      background-color: pink;
      margin-top: 20px;
    }
    .son {
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }
  </style>

 <div id="app">
    <h3>v-model修飾符 .trim .number</h3>
    姓名：<input v-model="username" type="text"><br>
    年紀(jì)：<input v-model="age" type="text"><br>

    
    <h3>@事件名.stop     →  阻止冒泡</h3>
    <div @click="fatherFn" class="father">
      <div @click="sonFn" class="son">兒子</div>
    </div>

    <h3>@事件名.prevent  →  阻止默認(rèn)行為</h3>
    <a @click >阻止默認(rèn)行為</a>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username: '',
        age: '',
      },
      methods: {
        fatherFn () {
          alert('老父親被點(diǎn)擊了')
        },
        sonFn (e) {
          // e.stopPropagation()
          alert('兒子被點(diǎn)擊了')
        }
      }
    })
  </script>

三疾捍、v-bind對(duì)樣式控制的增強(qiáng)-操作class

為了方便開發(fā)者進(jìn)行樣式控制奈辰， Vue 擴(kuò)展了 v-bind 的語法，可以針對(duì) class 類名 和 style 行內(nèi)樣式 進(jìn)行控制 乱豆。

1.語法：

<div> :class = "對(duì)象/數(shù)組">這是一個(gè)div</div>

2.對(duì)象語法

當(dāng)class動(dòng)態(tài)綁定的是對(duì)象時(shí)奖恰，鍵就是類名，值就是布爾值宛裕，如果值是true瑟啃，就有這個(gè)類，否則沒有這個(gè)類

<div class="box" :class="{ 類名1: 布爾值, 類名2: 布爾值 }"></div>

適用場(chǎng)景：一個(gè)類名续滋，來回切換

3.數(shù)組語法

當(dāng)class動(dòng)態(tài)綁定的是數(shù)組時(shí) → 數(shù)組中所有的類翰守，都會(huì)添加到盒子上孵奶，本質(zhì)就是一個(gè) class 列表

<div class="box" :class="[ 類名1, 類名2, 類名3 ]"></div>

使用場(chǎng)景:批量添加或刪除類

4.代碼練習(xí)

 <style>
    .box {
      width: 200px;
      height: 200px;
      border: 3px solid #000;
      font-size: 30px;
      margin-top: 10px;
    }
    .pink {
      background-color: pink;
    }
    .big {
      width: 300px;
      height: 300px;
    }
  </style>


<div id="app">
    <!--綁定對(duì)象-->
    <div class="box">黑馬程序員</div>
    <!--綁定數(shù)組-->
    <div class="box">黑馬程序員</div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {

      }
    })
  </script>

四疲酌、京東秒殺-tab欄切換導(dǎo)航高亮

1.需求：

當(dāng)我們點(diǎn)擊哪個(gè)tab頁簽時(shí)，哪個(gè)tab頁簽就高亮

2.準(zhǔn)備代碼:

 <style>
    * {
      margin: 0;
      padding: 0;
    }
    ul {
      display: flex;
      border-bottom: 2px solid #e01222;
      padding: 0 10px;
    }
    li {
      width: 100px;
      height: 50px;
      line-height: 50px;
      list-style: none;
      text-align: center;
    }
    li a {
      display: block;
      text-decoration: none;
      font-weight: bold;
      color: #333333;
    }
    li a.active {
      background-color: #e01222;
      color: #fff;
    }

  </style>

<div id="app">
    <ul>
      <li><a class="active" href="#">京東秒殺</a></li>
      <li><a href="#">每日特價(jià)</a></li>
      <li><a href="#">品類秒殺</a></li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        list: [
          { id: 1, name: '京東秒殺' },
          { id: 2, name: '每日特價(jià)' },
          { id: 3, name: '品類秒殺' }
        ]
      }
    })
  </script>

3.思路：

1.基于數(shù)據(jù)了袁，動(dòng)態(tài)渲染tab（v-for）

2.準(zhǔn)備一個(gè)下標(biāo) 記錄高亮的是哪一個(gè) tab

3.基于下標(biāo)動(dòng)態(tài)切換class的類名

五朗恳、v-bind對(duì)有樣式控制的增強(qiáng)-操作style

1.語法

<div class="box" :style="{ CSS屬性名1: CSS屬性值, CSS屬性名2: CSS屬性值 }"></div>

2.代碼練習(xí)

<style>
    .box {
      width: 200px;
      height: 200px;
      background-color: rgb(187, 150, 156);
    }
 </style>
 <div id="app">
    <div class="box"></div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {

      }
    })
  </script>

3.進(jìn)度條案例

 <style>
    .progress {
      height: 25px;
      width: 400px;
      border-radius: 15px;
      background-color: #272425;
      border: 3px solid #272425;
      box-sizing: border-box;
      margin-bottom: 30px;
    }
    .inner {
      width: 50%;
      height: 20px;
      border-radius: 10px;
      text-align: right;
      position: relative;
      background-color: #409eff;
      background-size: 20px 20px;
      box-sizing: border-box;
      transition: all 1s;
    }
    .inner span {
      position: absolute;
      right: -20px;
      bottom: -25px;
    }
  </style>

<div id="app">
    <div class="progress">
      <div class="inner">
        <span>50%</span>
      </div>
    </div>
    <button>設(shè)置25%</button>
    <button>設(shè)置50%</button>
    <button>設(shè)置75%</button>
    <button>設(shè)置100%</button>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {

      }
    })
  </script>

六、v-model在其他表單元素的使用

1.講解內(nèi)容：

常見的表單元素都可以用 v-model 綁定關(guān)聯(lián) → 快速 獲取 或 設(shè)置 表單元素的值

它會(huì)根據(jù) 控件類型 自動(dòng)選取 正確的方法 來更新元素

輸入框  input:text   ——> value
文本域  textarea    ——> value
復(fù)選框  input:checkbox  ——> checked
單選框  input:radio   ——> checked
下拉菜單 select    ——> value
...

2.代碼準(zhǔn)備

 <style>
    textarea {
      display: block;
      width: 240px;
      height: 100px;
      margin: 10px 0;
    }
  </style>
 <div id="app">
    <h3>小黑學(xué)習(xí)網(wǎng)</h3>
    姓名：
      <input type="text"> 
      <br><br>
    是否單身：
      <input type="checkbox"> 
      <br><br>
    <!-- 
      前置理解：
        1. name:  給單選框加上 name 屬性 可以分組 → 同一組互相會(huì)互斥
        2. value: 給單選框加上 value 屬性载绿，用于提交給后臺(tái)的數(shù)據(jù)
      結(jié)合 Vue 使用 → v-model
    -->
    性別: 
      <input type="radio">男
      <input type="radio">女
      <br><br>
    <!-- 
      前置理解：
        1. option 需要設(shè)置 value 值粥诫，提交給后臺(tái)
        2. select 的 value 值，關(guān)聯(lián)了選中的 option 的 value 值
      結(jié)合 Vue 使用 → v-model
    -->
    所在城市:
      <select>
        <option>北京</option>
        <option>上海</option>
        <option>成都</option>
        <option>南京</option>
      </select>
      <br><br>
    自我描述：
      <textarea></textarea> 
    <button>立即注冊(cè)</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {

      }
    })
  </script>

七崭庸、computed計(jì)算屬性

1.概念

基于現(xiàn)有的數(shù)據(jù)怀浆，計(jì)算出來的新屬性。 依賴的數(shù)據(jù)變化怕享，自動(dòng)重新計(jì)算执赡。

2.語法

1. 聲明在 computed 配置項(xiàng)中，一個(gè)計(jì)算屬性對(duì)應(yīng)一個(gè)函數(shù)
2. 使用起來和普通屬性一樣使用 {{ 計(jì)算屬性名}}

3.注意

1. computed配置項(xiàng)和data配置項(xiàng)是同級(jí)的
2. computed中的計(jì)算屬性雖然是函數(shù)的寫法函筋，但他依然是個(gè)屬性
3. computed中的計(jì)算屬性不能和data中的屬性同名
4. 使用computed中的計(jì)算屬性和使用data中的屬性是一樣的用法
5. computed中計(jì)算屬性內(nèi)部的this依然指向的是Vue實(shí)例

5.代碼準(zhǔn)備

<style>
    table {
      border: 1px solid #000;
      text-align: center;
      width: 240px;
    }
    th,td {
      border: 1px solid #000;
    }
    h3 {
      position: relative;
    }
  </style>

<div id="app">
    <h3>小黑的禮物清單</h3>
    <table>
      <tr>
        <th>名字</th>
        <th>數(shù)量</th>
      </tr>
      <tr v-for="(item, index) in list" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.num }}個(gè)</td>
      </tr>
    </table>

    <!-- 目標(biāo)：統(tǒng)計(jì)求和沙合，求得禮物總數(shù) -->
    <p>禮物總數(shù)：? 個(gè)</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        // 現(xiàn)有的數(shù)據(jù)
        list: [
          { id: 1, name: '籃球', num: 1 },
          { id: 2, name: '玩具', num: 2 },
          { id: 3, name: '鉛筆', num: 5 },
        ]
      }
    })
  </script>

八、computed計(jì)算屬性 VS methods方法

1.computed計(jì)算屬性

作用：封裝了一段對(duì)于數(shù)據(jù)的處理跌帐，求得一個(gè)結(jié)果

語法：

1. 寫在computed配置項(xiàng)中
2. 作為屬性首懈，直接使用
   • js中使用計(jì)算屬性： this.計(jì)算屬性
   • 模板中使用計(jì)算屬性：{{計(jì)算屬性}}

2.methods計(jì)算屬性

作用：給Vue實(shí)例提供一個(gè)方法绊率，調(diào)用以處理業(yè)務(wù)邏輯。

語法：

1. 寫在methods配置項(xiàng)中
2. 作為方法調(diào)用
   • js中調(diào)用：this.方法名()
   • 模板中調(diào)用 {{方法名()}} 或者 @事件名=“方法名”

3.計(jì)算屬性的優(yōu)勢(shì)

1. 緩存特性（提升性能）

   計(jì)算屬性會(huì)對(duì)計(jì)算出來的結(jié)果緩存究履，再次使用直接讀取緩存滤否，

   依賴項(xiàng)變化了，會(huì)自動(dòng)重新計(jì)算 → 并再次緩存

2. methods沒有緩存特性

3. 通過代碼比較

<style>
    table {
      border: 1px solid #000;
      text-align: center;
      width: 300px;
    }
    th,td {
      border: 1px solid #000;
    }
    h3 {
      position: relative;
    }
    span {
      position: absolute;
      left: 145px;
      top: -4px;
      width: 16px;
      height: 16px;
      color: white;
      font-size: 12px;
      text-align: center;
      border-radius: 50%;
      background-color: #e63f32;
    }
  </style>

<div id="app">
    <h3>小黑的禮物清單??<span>?</span></h3>
    <table>
      <tr>
        <th>名字</th>
        <th>數(shù)量</th>
      </tr>
      <tr v-for="(item, index) in list" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.num }}個(gè)</td>
      </tr>
    </table>

    <p>禮物總數(shù)：{{ totalCount }} 個(gè)</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        // 現(xiàn)有的數(shù)據(jù)
        list: [
          { id: 1, name: '籃球', num: 3 },
          { id: 2, name: '玩具', num: 2 },
          { id: 3, name: '鉛筆', num: 5 },
        ]
      },
      computed: {
        totalCount () {
          let total = this.list.reduce((sum, item) => sum + item.num, 0)
          return total
        }
      }
    })
  </script>

4.總結(jié)

1.computed有緩存特性最仑，methods沒有緩存

2.當(dāng)一個(gè)結(jié)果依賴其他多個(gè)值時(shí)顽聂，推薦使用計(jì)算屬性

3.當(dāng)處理業(yè)務(wù)邏輯時(shí)，推薦使用methods方法盯仪，比如事件的處理函數(shù)

九紊搪、計(jì)算屬性的完整寫法

既然計(jì)算屬性也是屬性，能訪問全景，應(yīng)該也能修改了耀石？

1. 計(jì)算屬性默認(rèn)的簡(jiǎn)寫，只能讀取訪問爸黄，不能 "修改"
2. 如果要 "修改" → 需要寫計(jì)算屬性的完整寫法

完整寫法代碼演示

 <div id="app">
    姓：<input type="text" v-model="firstName"> +
    名：<input type="text" v-model="lastName"> =
    <span></span><br><br> 
    <button>改名卡</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        firstName: '劉',
        lastName: '備'
      },
      computed: {

      },
      methods: {

      }
    })
  </script>

十滞伟、綜合案例-成績(jī)案例

功能描述：

1.渲染功能

2.刪除功能

3.添加功能

4.統(tǒng)計(jì)總分，求平均分

思路分析：

1.渲染功能 v-for :key v-bind:動(dòng)態(tài)綁定class的樣式

2.刪除功能 v-on綁定事件炕贵， 阻止a標(biāo)簽的默認(rèn)行為

3.v-model的修飾符 .trim梆奈、 .number、 判斷數(shù)據(jù)是否為空后 再添加称开、添加后清空文本框的數(shù)據(jù)

4.使用計(jì)算屬性computed 計(jì)算總分和平均分的值

十一亩钟、watch偵聽器（監(jiān)視器）

1.作用：

**監(jiān)視數(shù)據(jù)變化**，執(zhí)行一些業(yè)務(wù)邏輯或異步操作

2.語法：

1. watch同樣聲明在跟data同級(jí)的配置項(xiàng)中

2. 簡(jiǎn)單寫法： 簡(jiǎn)單類型數(shù)據(jù)直接監(jiān)視

3. 完整寫法：添加額外配置項(xiàng)

data: { 
  words: '蘋果',
  obj: {
    words: '蘋果'
  }
},

watch: {
  // 該方法會(huì)在數(shù)據(jù)變化時(shí)鳖轰，觸發(fā)執(zhí)行
  數(shù)據(jù)屬性名 (newValue, oldValue) {
    一些業(yè)務(wù)邏輯 或 異步操作清酥。 
  },
  '對(duì)象.屬性名' (newValue, oldValue) {
    一些業(yè)務(wù)邏輯 或 異步操作。 
  }
}

3.偵聽器代碼準(zhǔn)備

 <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-size: 18px;
      }
      #app {
        padding: 10px 20px;
      }
      .query {
        margin: 10px 0;
      }
      .box {
        display: flex;
      }
      textarea {
        width: 300px;
        height: 160px;
        font-size: 18px;
        border: 1px solid #dedede;
        outline: none;
        resize: none;
        padding: 10px;
      }
      textarea:hover {
        border: 1px solid #1589f5;
      }
      .transbox {
        width: 300px;
        height: 160px;
        background-color: #f0f0f0;
        padding: 10px;
        border: none;
      }
      .tip-box {
        width: 300px;
        height: 25px;
        line-height: 25px;
        display: flex;
      }
      .tip-box span {
        flex: 1;
        text-align: center;
      }
      .query span {
        font-size: 18px;
      }

      .input-wrap {
        position: relative;
      }
      .input-wrap span {
        position: absolute;
        right: 15px;
        bottom: 15px;
        font-size: 12px;
      }
      .input-wrap i {
        font-size: 20px;
        font-style: normal;
      }
    </style>

 <div id="app">
      <!-- 條件選擇框 -->
      <div class="query">
        <span>翻譯成的語言：</span>
        <select>
          <option value="italy">意大利</option>
          <option value="english">英語</option>
          <option value="german">德語</option>
        </select>
      </div>

      <!-- 翻譯框 -->
      <div class="box">
        <div class="input-wrap">
          <textarea v-model="words"></textarea>
          <span><i>??</i>文檔翻譯</span>
        </div>
        <div class="output-wrap">
          <div class="transbox">mela</div>
        </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
      // 接口地址：https://applet-base-api-t.itheima.net/api/translate
      // 請(qǐng)求方式：get
      // 請(qǐng)求參數(shù)：
      // （1）words：需要被翻譯的文本（必傳）
      // （2）lang： 需要被翻譯成的語言（可選）默認(rèn)值-意大利
      // -----------------------------------------------
      
      const app = new Vue({
        el: '#app',
        data: {
          words: ''
        },
        // 具體講解：(1) watch語法 (2) 具體業(yè)務(wù)實(shí)現(xiàn)
      })
    </script>

十二蕴侣、翻譯案例-代碼實(shí)現(xiàn)

  <script>
      // 接口地址：https://applet-base-api-t.itheima.net/api/translate
      // 請(qǐng)求方式：get
      // 請(qǐng)求參數(shù)：
      // （1）words：需要被翻譯的文本（必傳）
      // （2）lang： 需要被翻譯成的語言（可選）默認(rèn)值-意大利
      // -----------------------------------------------
      
      const app = new Vue({
        el: '#app',
        data: {
           //words: ''
           obj: {
            words: ''
          },
          result: '', // 翻譯結(jié)果
          // timer: null // 延時(shí)器id
        },
        // 具體講解：(1) watch語法 (2) 具體業(yè)務(wù)實(shí)現(xiàn)
        watch: {
          // 該方法會(huì)在數(shù)據(jù)變化時(shí)調(diào)用執(zhí)行
          // newValue新值, oldValue老值（一般不用）
          // words (newValue) {
          //   console.log('變化了', newValue)
          // }

          'obj.words' (newValue) {
            // console.log('變化了', newValue)
            // 防抖: 延遲執(zhí)行 → 干啥事先等一等焰轻，延遲一會(huì)，一段時(shí)間內(nèi)沒有再次觸發(fā)昆雀，才執(zhí)行
            clearTimeout(this.timer)
            this.timer = setTimeout(async () => {
              const res = await axios({
                url: 'https://applet-base-api-t.itheima.net/api/translate',
                params: {
                  words: newValue
                }
              })
              this.result = res.data.data
              console.log(res.data.data)
            }, 300)
          }
        }
      })
    </script>

十三辱志、watch偵聽器

1.語法

完整寫法 —>添加額外的配置項(xiàng)

1. deep:true 對(duì)復(fù)雜類型進(jìn)行深度監(jiān)聽
2. immdiate:true 初始化 立刻執(zhí)行一次

data: {
  obj: {
    words: '蘋果',
    lang: 'italy'
  },
},

watch: {// watch 完整寫法
  對(duì)象: {
    deep: true, // 深度監(jiān)視
    immdiate:true,//立即執(zhí)行handler函數(shù)
    handler (newValue) {
      console.log(newValue)
    }
  }
}

2.需求

• 當(dāng)文本框輸入的時(shí)候 右側(cè)翻譯內(nèi)容要時(shí)時(shí)變化
• 當(dāng)下拉框中的語言發(fā)生變化的時(shí)候 右側(cè)翻譯的內(nèi)容依然要時(shí)時(shí)變化
• 如果文本框中有默認(rèn)值的話要立即翻譯

3.代碼實(shí)現(xiàn)

 <script> 
      const app = new Vue({
        el: '#app',
        data: {
          obj: {
            words: '小黑',
            lang: 'italy'
          },
          result: '', // 翻譯結(jié)果
        },
        watch: {
          obj: {
            deep: true, // 深度監(jiān)視
            immediate: true, // 立刻執(zhí)行，一進(jìn)入頁面handler就立刻執(zhí)行一次
            handler (newValue) {
              clearTimeout(this.timer)
              this.timer = setTimeout(async () => {
                const res = await axios({
                  url: 'https://applet-base-api-t.itheima.net/api/translate',
                  params: newValue
                })
                this.result = res.data.data
                console.log(res.data.data)
              }, 300)
            }
          } 
        }
      })
    </script>

4.總結(jié)

watch偵聽器的寫法有幾種狞膘？

1.簡(jiǎn)單寫法

watch: {
  數(shù)據(jù)屬性名 (newValue, oldValue) {
    一些業(yè)務(wù)邏輯 或 異步操作揩懒。 
  },
  '對(duì)象.屬性名' (newValue, oldValue) {
    一些業(yè)務(wù)邏輯 或 異步操作。 
  }
}

2.完整寫法

watch: {// watch 完整寫法
  數(shù)據(jù)屬性名: {
    deep: true, // 深度監(jiān)視(針對(duì)復(fù)雜類型)
    immediate: true, // 是否立刻執(zhí)行一次handler
    handler (newValue) {
      console.log(newValue)
    }
  }
}

十四客冈、綜合案例

購物車案例

需求說明：

1. 渲染功能
2. 刪除功能
3. 修改個(gè)數(shù)
4. 全選反選
5. 統(tǒng)計(jì) 選中的 總價(jià) 和 總數(shù)量
6. 持久化到本地

實(shí)現(xiàn)思路：

1.基本渲染： v-for遍歷旭从、:class動(dòng)態(tài)綁定樣式

2.刪除功能 ： v-on 綁定事件，獲取當(dāng)前行的id

3.修改個(gè)數(shù) ： v-on綁定事件，獲取當(dāng)前行的id和悦，進(jìn)行篩選出對(duì)應(yīng)的項(xiàng)然后增加或減少

4.全選反選

1. 必須所有的小選框都選中退疫，全選按鈕才選中 → every
2. 如果全選按鈕選中，則所有小選框都選中
3. 如果全選取消鸽素，則所有小選框都取消選中

聲明計(jì)算屬性褒繁，判斷數(shù)組中的每一個(gè)checked屬性的值，看是否需要全部選

5.統(tǒng)計(jì) 選中的 總價(jià) 和 總數(shù)量 ：通過計(jì)算屬性來計(jì)算選中的總價(jià)和總數(shù)量

6.持久化到本地： 在數(shù)據(jù)變化時(shí)都要更新下本地存儲(chǔ) watch