day02

一、今日学习目标

1.指令补充

指令修饰符
v-bind对样式增强的操作
v-model应用于其他表单元素

2.computed计算属性

基础语法
计算属性vs方法
计算属性的完整写法
成绩案例

3.watch侦听器

基础写法
完整写法

4.综合案例（演示）

渲染 / 删除 / 修改数量 / 全选 / 反选 / 统计总价 / 持久化

二、指令修饰符

1.什么是指令修饰符？

所谓指令修饰符就是通过“.”指明一些指令后缀不同的后缀封装了不同的处理操作 —> 简化代码

2.按键修饰符

@keyup.enter —>当点击enter键的时候才触发

代码演示：

  <div id="app">
    <h3>@keyup.enter  →  监听键盘回车事件</h3>
    <input @keyup.enter="fn" 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: {
        fn(e) {
          console.log(e)
          console.log('键盘回车的时候触发', this.username)
        }
      }
    })
  </script>

3.v-model修饰符

v-model.trim —>去除首位空格
v-model.number —>转数字

4.事件修饰符

@事件名.stop —> 阻止冒泡
@事件名.prevent —>阻止默认行为
@事件名.stop.prevent —>可以连用即阻止事件冒泡也阻止默认行为

 <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>
    年纪：<input v-model="age" type="text"><br>

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

    <h3>@事件名.prevent  →  阻止默认行为</h3>
    <a @click.prevent href="http://www.baidu.com">阻止默认行为</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('老父亲被点击了')
        },
        sonFn (e) {
          // e.stopPropagation()
          alert('儿子被点击了')
        }
      }
    })
  </script>

三、v-bind对样式控制的增强-操作class

为了方便开发者进行样式控制， Vue 扩展了 v-bind 的语法，可以针对 class 类名 和 style 行内样式 进行控制。

1.语法：

<div> :class = "对象/数组">这是一个div</div>

2.对象语法

当class动态绑定的是对象时，键就是类名，值就是布尔值，如果值是true，就有这个类，否则没有这个类

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

适用场景：一个类名，来回切换

3.数组语法

当class动态绑定的是数组时 → 数组中所有的类，都会添加到盒子上，本质就是一个 class 列表

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

使用场景:批量添加或删除类

4.代码练习

 <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">
    <!--绑定对象-->
    <div class="box" :class="{ pink: true, big: true }">黑马程序员</div>
    <!--绑定数组-->
    <div class="box" :class="['pink', 'big']">黑马程序员</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栏切换导航高亮

1.需求：

当我们点击哪个tab页签时，哪个tab页签就高亮

2.准备代码:

 <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 v-for="(item, index) in list" :key="item.id" @click="activeIndex = index">
        <a :class="{ active: index === activeIndex }" href="#">{{ item.name }}</a>
      </li>
      <!-- <li><a href="#">每日特价</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: {
        activeIndex: 2, // 记录高亮
        list: [
          { id: 1, name: '京东秒杀' },
          { id: 2, name: '每日特价' },
          { id: 3, name: '品类秒杀' }
        ]
      }
    })
  </script>

3.思路：

1.基于数据，动态渲染tab（v-for）

2.准备一个下标记录高亮的是哪一个 tab

3.基于下标动态切换class的类名

五、v-bind对有样式控制的增强-操作style

1.语法

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

2.代码练习

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

      }
    })
  </script>

疑问：style和:style又有什么区别呢

在 Vue 中，style 和 :style 有着不同的用途。

style 是一个普通的 HTML 属性，用于直接在元素上应用内联样式。它的值应该是一个 CSS 样式字符串。例如：

<div style="color: red; background-color: blue;">Hello, world!</div>

而 :style 是 Vue 的数据绑定语法（也就是 v-bind:style 的简写），用于动态地将一个样式对象应用到元素上。这个样式对象的属性名是 CSS 属性名（可以是驼峰式或短横线分隔），属性值是要应用的样式值。例如：

<div :style="{ color: textColor, backgroundColor: bgColor }">Hello, world!</div>

在这个例子中，textColor 和 bgColor 是 Vue 组件的数据属性，它们的值会被动态地应用到 div 元素的颜色和背景颜色上。

总的来说，style 用于直接应用静态的 CSS 样式，而 :style 用于动态地应用基于数据的 CSS 样式。

3.进度条案例

思路：

data添加一个变量percent用于控制进度
给4个按钮添加@click绑定事件，修改data.percent的值
div通过:style属性动态变更div的宽度

 <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" :style="{width:percent+'%'}">
        <span>{{percent}}%</span>
      </div>
    </div>
    <button @click="percent = 25">设置25%</button>
    <button @click="percent = 50">设置50%</button>
    <button @click="percent = 75">设置75%</button>
    <button @click="percent = 100">设置100%</button>
  </div>

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

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

1.讲解内容：

常见的表单元素都可以用 v-model 绑定关联 → 快速获取或设置表单元素的值

它会根据 控件类型 自动选取 正确的方法 来更新元素

输入框  input:text   ——> value
文本域  textarea	 ——> value
复选框  input:checkbox  ——> checked
单选框  input:radio   ——> checked
下拉菜单 select    ——> value
...

2.代码准备

<div id="app">
    <h3>小黑学习网</h3>

    姓名：
      <input type="text" v-model="username"> 
      <br><br>

    是否单身：
      <input type="checkbox" v-model="isSingle"> 
      <br><br>

    <!-- 
      前置理解：
        1. name:  给单选框加上 name 属性 可以分组 → 同一组互相会互斥
        2. value: 给单选框加上 value 属性，用于提交给后台的数据
      结合 Vue 使用 → v-model
    -->
    性别: 
      <input v-model="gender" type="radio" name="gender" value="1">男
      <input v-model="gender" type="radio" name="gender" value="2">女
      <br><br>

    <!-- 
      前置理解：
        1. option 需要设置 value 值，提交给后台
        2. select 的 value 值，关联了选中的 option 的 value 值
      结合 Vue 使用 → v-model
    -->
    所在城市:
      <select v-model="cityId">
        <option value="101">北京</option>
        <option value="102">上海</option>
        <option value="103">成都</option>
        <option value="104">南京</option>
      </select>
      <br><br>

    自我描述：
      <textarea v-model="desc"></textarea> 

    <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: '',
        isSingle: false,
        gender: "2",
        cityId: '102',
        desc: ""
      },
      methods: {
        submit() {
          console.log(this._data);
        }
      }
    })
    })
  </script>

七、computed计算属性

1.概念

基于现有的数据，计算出来的新属性。依赖的数据变化，自动重新计算。

2.语法

声明在 computed 配置项中，一个计算属性对应一个函数
使用起来和普通属性一样使用

3.注意

computed配置项和data配置项是同级的
computed中的计算属性虽然是函数的写法，但他依然是个属性
computed中的计算属性不能和data中的属性同名
使用computed中的计算属性和使用data中的属性是一样的用法
computed中计算属性内部的this依然指向的是Vue实例

4.案例

比如我们可以使用计算属性实现下面这个业务场景

68203932785

5.代码准备

<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>数量</th>
      </tr>
      <tr v-for="(item, index) in list" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.num }}个</td>
      </tr>
    </table>

    <!-- 目标：统计求和，求得礼物总数 -->
    <p>礼物总数：{{ totalCount }} 个</p>
  </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: '篮球', num: 1 },
          { id: 2, name: '玩具', num: 2 },
          { id: 3, name: '铅笔', num: 5 },
        ]
      },
      computed: {
        totalCount () {
          // 基于现有的数据，编写求值逻辑
          // 计算属性函数内部，可以直接通过 this 访问到 app 实例
          // console.log(this.list)

          // 需求：对 this.list 数组里面的 num 进行求和 → reduce
          let total = this.list.reduce((sum, item) => sum + item.num, 0)
          return total
        }
      }
    })
  </script>

八、computed计算属性对比 methods方法

1.computed计算属性

作用：封装了一段对于数据的处理，求得一个结果

语法：

写在computed配置项中
作为属性，直接使用
- js中使用计算属性： this.计算属性
- 模板中使用计算属性：{{计算属性}}

2.methods计算属性

作用：给Vue实例提供一个方法，调用以处理业务逻辑。

语法：

写在methods配置项中
作为方法调用
- js中调用：this.方法名()
- 模板中调用 {{方法名()}} 或者 @事件名=“方法名”

3.计算属性的优势

缓存特性（提升性能）
计算属性会对计算出来的结果缓存，再次使用直接读取缓存，
依赖项变化了，会自动重新计算 → 并再次缓存
methods没有缓存特性
通过代码比较

<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>数量</th>
      </tr>
      <tr v-for="(item, index) in list" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.num }}个</td>
      </tr>
    </table>

    <p>礼物总数：{{ totalCount }} 个</p>
    <p>礼物总数：{{ totalCount }} 个</p>
    <p>礼物总数：{{ totalCountFn() }} 个</p>
    <p>礼物总数：{{ totalCountFn() }} 个</p>
  </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: '篮球', num: 3 },
        { id: 2, name: '玩具', num: 2 },
        { id: 3, name: '铅笔', num: 5 },
      ]
    },
    computed: {
    totalCount() {
      console.log('totalCount计算属性执行了')
      let total = this.list.reduce((sum, item) => sum + item.num, 0)
      return total
    }
  },
    methods: {
    totalCountFn() {
      console.log('methods方法执行了')
      let total = this.list.reduce((sum, item) => sum + item.num, 0)
      return total
    }
  }
  },)
</script>

4.总结

totalCount计算属性执行一次，totalCountFn调用几次，执行几次。

1.computed有缓存特性，methods没有缓存

2.当一个结果依赖其他多个值时，推荐使用计算属性

3.当处理业务逻辑时，推荐使用methods方法，比如事件的处理函数

九、计算属性的完整写法

既然计算属性也是属性，能访问，应该也能修改了？

计算属性默认的简写，只能读取访问，不能 "修改"
如果要 "修改" → 需要写计算属性的完整写法

68204182296

完整写法代码演示

 <div id="app">
   姓：<input type="text" v-model="firstName"> +
    名：<input type="text" v-model="lastName"> =
    <span>{{ fullName }}</span><br><br>
    
    <button @click="changeName">改名卡</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: '备',
      },
      methods: {
        changeName () {
          this.fullName = '黄忠'
        }
      },
      computed: {
        // 简写 → 获取，没有配置设置的逻辑
        // fullName () {
        //   return this.firstName + this.lastName
        // }

        // 完整写法 → 获取 + 设置
        fullName: {
          // (1) 当fullName计算属性，被获取求值时，执行get（有缓存，优先读缓存）
          //     会将返回值作为，求值的结果
          get () {
            return this.firstName + this.lastName
          },
          // (2) 当fullName计算属性，被修改赋值时，执行set
          //     修改的值，传递给set方法的形参
          set (value) {
            // console.log(value.slice(0, 1))          
            // console.log(value.slice(1))         
            this.firstName = value.slice(0, 1)
            this.lastName = value.slice(1)
          }
        }
      }
    })
  </script>

十、综合案例-成绩案例

68204248931

功能描述：

1.渲染功能

v-if v-else判断是否显示无数据

v-for 遍历数据

<tbody v-if="list.length>0">
          <tr v-for="(item,index) in list" :key="item.id">
            <td>1</td>
            <td>{{item.subject}}</td>
            <td :class="{ red:item.score<60 }">{{item.score}}</td>
            <td><a href="#">删除</a></td>
          </tr>
          <!-- <tr>
            <td>2</td>
            <td>英语</td>
            <td>80</td>
            <td><a href="#">删除</a></td>
          </tr>
          <tr>
            <td>3</td>
            <td>数学</td>
            <td>100</td>
            <td><a href="#">删除</a></td> -->
          </tr>
        </tbody>
        <tbody v-else>
          <tr>
            <td colspan="5">
              <span class="none">暂无数据</span>
            </td>
          </tr>
        </tbody>

2.删除功能

阻止a的默认行为

<td><a @click.prevent="del(item.id)" href="#">删除</a></td>

3.添加功能

把分数转为数字类型
添加时候，不为空判断

使用unshift向list前插入数据

<div class="form">
      <div class="form-item">
        <div class="label">科目：</div>
        <div class="input">
          <input type="text" placeholder="请输入科目" v-model="subject" />
        </div>
      </div>
      <div class="form-item">
        <div class="label">分数：</div>
        <div class="input">
          <input type="text" placeholder="请输入分数" v-model.number="score" />
        </div>
      </div>
      <div class="form-item">
        <div class="label"></div>
        <div class="input">
          <button class="submit" @click="add">添加</button>
        </div>
      </div>
    </div>

<script>
     methods: {
        add() {
          // console.log(this.score + this.subject);
          if (!this.subject) {
            alert('请输入科目')
            return
          }
          if (typeof this.score !== 'number') {
            alert('请输入正确的成绩')
            return
          }
          //插入数据
          this.list.unshift({
            id: +new Date(),
            subject: this.subject,
            score: this.score
          })
          this.subject = ''
          this.score = ''
        }
      }
</script>

4.统计总分，求平均分，使用计算属性computed

<tfoot v-show="list.length>0">
          <tr>
            <td colspan="5">
              <span>总分：{{totalScore}}</span>
              <span style="margin-left: 50px">平均分：{{averageScore}}</span>
            </td>
          </tr>
        </tfoot>
<script>
    const app = new Vue({
      el: '#app',
      data: {
        list: [
          { id: 1, subject: '语文', score: 20 },
          { id: 7, subject: '数学', score: 99 },
          { id: 12, subject: '英语', score: 70 },
        ],
        subject: '',
        score: ''
      },
      computed: {
        totalScore() {
          return this.list.reduce((sum, item) => sum + item.score, 0)
        },
        averageScore() {
          if (this.list.length === 0) {
            return 0
          }
          return (this.totalScore / this.list.length).toFixed(2)
        }
      }
    })
  </script>

思路分析：

1.渲染功能 v-for :key v-bind:动态绑定class的样式

2.删除功能 v-on绑定事件，阻止a标签的默认行为

3.v-model的修饰符 .trim、 .number、判断数据是否为空后再添加、添加后清空文本框的数据

4.使用计算属性computed 计算总分和平均分的值

完整代码

<div id="app" class="score-case">
      <div class="table">
        <table>
          <thead>
            <tr>
              <th>编号</th>
              <th>科目</th>
              <th>成绩</th>
              <th>操作</th>
            </tr>
          </thead>

          <tbody v-if="list.length > 0">
            <tr v-for="(item, index) in list" :key="item.id">
              <td>{{ index + 1 }}</td>
              <td>{{ item.subject }}</td>
              <!-- 需求：不及格的标红, < 60 分, 加上 red 类 -->
              <td :class="{ red: item.score < 60 }">{{ item.score }}</td>
              <td><a @click.prevent="del(item.id)" href="http://www.baidu.com">删除</a></td>
            </tr>
          </tbody>

          <tbody v-else>
            <tr>
              <td colspan="5">
                <span class="none">暂无数据</span>
              </td>
            </tr>
          </tbody>

          <tfoot>
            <tr>
              <td colspan="5">
                <span>总分：{{ totalScore }}</span>
                <span style="margin-left: 50px">平均分：{{ averageScore }}</span>
              </td>
            </tr>
          </tfoot>
        </table>
      </div>
      <div class="form">
        <div class="form-item">
          <div class="label">科目：</div>
          <div class="input">
            <input
              type="text"
              placeholder="请输入科目"
              v-model.trim="subject"
            />
          </div>
        </div>
        <div class="form-item">
          <div class="label">分数：</div>
          <div class="input">
            <input
              type="text"
              placeholder="请输入分数"
              v-model.number="score"
            />
          </div>
        </div>
        <div class="form-item">
          <div class="label"></div>
          <div class="input">
            <button @click="add" class="submit" >添加</button>
          </div>
        </div>
      </div>
    </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, subject: '语文', score: 62 },
            { id: 7, subject: '数学', score: 89 },
            { id: 12, subject: '英语', score: 70 },
          ],
          subject: '',
          score: ''
        },
        computed: {
          totalScore() {
            return this.list.reduce((sum, item) => sum + item.score, 0)
          },
          averageScore () {
            if (this.list.length === 0) {
              return 0
            }
            return (this.totalScore / this.list.length).toFixed(2)
          }
        },
        methods: {
          del (id) {
            // console.log(id)
            this.list = this.list.filter(item => item.id !== id)
          },
          add () {
            if (!this.subject) {
              alert('请输入科目')
              return
            }
            if (typeof this.score !== 'number') {
              alert('请输入正确的成绩')
              return
            }
            this.list.unshift({
              id: +new Date(),
              subject: this.subject,
              score: this.score
            })

            this.subject = ''
            this.score = ''
          }
        }
      })
    </script>

十一、watch侦听器（监视器）

1.作用：

监视数据变化，执行一些业务逻辑或异步操作

2.语法：

watch同样声明在跟data同级的配置项中
简单写法：简单类型数据直接监视

完整写法：添加额外配置项

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

watch: {
  // 该方法会在数据变化时，触发执行
  数据属性名 (newValue, oldValue) {
    一些业务逻辑 或 异步操作。 
  },
  '对象.属性名' (newValue, oldValue) {
    一些业务逻辑 或 异步操作。 
  }
}

十二、翻译案例-代码实现

  <script>
      // 接口地址：https://applet-base-api-t.itheima.net/api/translate
      // 请求方式：get
      // 请求参数：
      // （1）words：需要被翻译的文本（必传）
      // （2）lang： 需要被翻译成的语言（可选）默认值-意大利
      // -----------------------------------------------
      
      const app = new Vue({
        el: '#app',
        data: {
           //words: ''
           obj: {
            words: ''
          },
          result: '', // 翻译结果
          // timer: null // 延时器id
        },
        // 具体讲解：(1) watch语法 (2) 具体业务实现
        watch: {
          // 该方法会在数据变化时调用执行
          // newValue新值, oldValue老值（一般不用）
          // words (newValue) {
          //   console.log('变化了', newValue)
          // }

          'obj.words' (newValue) {
            // console.log('变化了', newValue)
            // 防抖: 延迟执行 → 干啥事先等一等，延迟一会，一段时间内没有再次触发，才执行
            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.语法

完整写法 —>添加额外的配置项

deep:true 对复杂类型进行深度监听
immdiate:true 初始化立刻执行一次

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

watch: {// watch 完整写法
  对象: {
    deep: true, // 深度监视
    immdiate:true,//立即执行handler函数
    handler (newValue) {
      console.log(newValue)
    }
  }
}

2.需求

68205051572

当文本框输入的时候右侧翻译内容要时时变化
当下拉框中的语言发生变化的时候右侧翻译的内容依然要时时变化
如果文本框中有默认值的话要立即翻译

3.代码实现

 <script> 
      const app = new Vue({
        el: '#app',
        data: {
          obj: {
            words: '小黑',
            lang: 'italy'
          },
          result: '', // 翻译结果
        },
        watch: {
          obj: {
            deep: true, // 深度监视
            immediate: true, // 立刻执行，一进入页面handler就立刻执行一次
            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.总结

watch侦听器的写法有几种？

1.简单写法

watch: {
  数据属性名 (newValue, oldValue) {
    一些业务逻辑 或 异步操作。 
  },
  '对象.属性名' (newValue, oldValue) {
    一些业务逻辑 或 异步操作。 
  }
}

2.完整写法

watch: {// watch 完整写法
  数据属性名: {
    deep: true, // 深度监视(针对复杂类型)
    immediate: true, // 是否立刻执行一次handler
    handler (newValue) {
      console.log(newValue)
    }
  }
}

十四、综合案例

购物车案例

68205100897

需求说明：

渲染功能
删除功能
修改个数
全选反选
统计选中的总价和总数量
持久化到本地

实现思路：

1.基本渲染： v-for遍历、:class动态绑定样式

2.删除功能： v-on 绑定事件，获取当前行的id，可以使用 v-on 的简写语法 @，例如@click

3.修改个数： v-on绑定事件，获取当前行的id，进行筛选出对应的项然后增加或减少

4.全选反选

必须所有的小选框都选中，全选按钮才选中 → every
如果全选按钮选中，则所有小选框都选中
如果全选取消，则所有小选框都取消选中

声明计算属性，判断数组中的每一个checked属性的值，看是否需要全部选

5.统计选中的总价和总数量：通过计算属性来计算选中的总价和总数量

6.持久化到本地：在数据变化时都要更新下本地存储 watch

完整代码

<div class="app-container" id="app">
    <!-- 顶部banner -->
    <div class="banner-box"><img src="http://autumnfish.cn/static/fruit.jpg" alt="" /></div>
    <!-- 面包屑 -->
    <div class="breadcrumb">
      <span>🏠</span>
      /
      <span>购物车</span>
    </div>
    <!-- 购物车主体 -->
    <div class="main" v-if="fruitList.length > 0">
      <div class="table">
        <!-- 头部 -->
        <div class="thead">
          <div class="tr">
            <div class="th">选中</div>
            <div class="th th-pic">图片</div>
            <div class="th">单价</div>
            <div class="th num-th">个数</div>
            <div class="th">小计</div>
            <div class="th">操作</div>
          </div>
        </div>
        <!-- 身体 -->
        <div class="tbody">
          <div v-for="(item, index) in fruitList" :key="item.id" class="tr" :class="{ active: item.isChecked }">
            <div class="td"><input type="checkbox" v-model="item.isChecked" /></div>
            <div class="td"><img :src="item.icon" alt="" /></div>
            <div class="td">{{ item.price }}</div>
            <div class="td">
              <div class="my-input-number">
                <button :disabled="item.num <= 1" class="decrease" @click="sub(item.id)"> - </button>
                <span class="my-input__inner">{{ item.num }}</span>
                <button class="increase" @click="add(item.id)"> + </button>
              </div>
            </div>
            <div class="td">{{ item.num * item.price }}</div>
            <div class="td"><button @click="del(item.id)">删除</button></div>
          </div>
        </div>
      </div>
      <!-- 底部 -->
      <div class="bottom">
        <!-- 全选 -->
        <label class="check-all">
          <input type="checkbox" v-model="isAll" />
          全选
        </label>
        <div class="right-box">
          <!-- 所有商品总价 -->
          <span class="price-box">总价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;<span class="price">{{ totalPrice }}</span></span>
          <!-- 结算按钮 -->
          <button class="pay">结算( {{ totalCount }} )</button>
        </div>
      </div>
    </div>
    <!-- 空车 -->
    <div class="empty" v-else>🛒空空如也</div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const defaultArr = [
      {
        id: 1,
        icon: 'img/火龙果.png',
        isChecked: true,
        num: 2,
        price: 6,
      },
      {
        id: 2,
        icon: 'img/荔枝.png',
        isChecked: false,
        num: 7,
        price: 20,
      },
      {
        id: 3,
        icon: 'img/榴莲.png',
        isChecked: false,
        num: 3,
        price: 40,
      },
      {
        id: 4,
        icon: 'img/鸭梨.png',
        isChecked: true,
        num: 10,
        price: 3,
      },
      {
        id: 5,
        icon: 'img/樱桃.png',
        isChecked: false,
        num: 20,
        price: 34,
      },
    ]
    const app = new Vue({
      el: '#app',
      data: {
        // 水果列表
        fruitList: JSON.parse(localStorage.getItem('list')) || defaultArr,
      },
      computed: {
        // 默认计算属性：只能获取不能设置，要设置需要写完整写法
        // isAll () {
        //   // 必须所有的小选框都选中，全选按钮才选中 → every
        //   return this.fruitList.every(item => item.isChecked)
        // }

        // 完整写法 = get + set
        isAll: {
          get() {
            return this.fruitList.every(item => item.isChecked)
          },
          set(value) {
            // 基于拿到的布尔值，要让所有的小选框 同步状态
            this.fruitList.forEach(item => item.isChecked = value)
          }
        },
        // 统计选中的总数 reduce
        totalCount() {
          return this.fruitList.reduce((sum, item) => {
            if (item.isChecked) {
              // 选中 → 需要累加
              return sum + item.num
            } else {
              // 没选中 → 不需要累加
              return sum
            }
          }, 0)
        },
        // 总计选中的总价 num * price
        totalPrice() {
          return this.fruitList.reduce((sum, item) => {
            if (item.isChecked) {
              return sum + item.num * item.price
            } else {
              return sum
            }
          }, 0)
        }
      },
      methods: {
        del(id) {
          this.fruitList = this.fruitList.filter(item => item.id !== id)
        },
        add(id) {
          // 1. 根据 id 找到数组中的对应项 → find
          const fruit = this.fruitList.find(item => item.id === id)
          // 2. 操作 num 数量
          fruit.num++
        },
        sub(id) {
          // 1. 根据 id 找到数组中的对应项 → find
          const fruit = this.fruitList.find(item => item.id === id)
          // 2. 操作 num 数量
          fruit.num--
        }
      },
      watch: {
        fruitList: {
          deep: true,
          handler(newValue) {
            // 需要将变化后的 newValue 存入本地 （转JSON）
            localStorage.setItem('list', JSON.stringify(newValue))
            // 如果没有了数据，移除缓存
            if (newValue.length == 0) {
              localStorage.removeItem('list1')
            }
          }
        }
      }
    })
  </script>

# day02

# 一、今日学习目标

# 1.指令补充

# 2.computed计算属性

# 3.watch侦听器

# 4.综合案例 （演示）

# 二、指令修饰符

# 1.什么是指令修饰符？

# 2.按键修饰符

# 3.v-model修饰符

# 4.事件修饰符

# 三、v-bind对样式控制的增强-操作class

# 1.语法：

# 2.对象语法

# 3.数组语法

# 4.代码练习

# 四、京东秒杀-tab栏切换导航高亮

# 1.需求：

# 2.准备代码:

# 3.思路：

# 五、v-bind对有样式控制的增强-操作style

# 1.语法

# 2.代码练习

# 疑问：style和:style又有什么区别呢

# 3.进度条案例

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

# 1.讲解内容：

# 2.代码准备

# 七、computed计算属性

# 1.概念

# 2.语法

# 3.注意

# 4.案例

# 5.代码准备

# 八、computed计算属性 对比 methods方法

# 1.computed计算属性

# 2.methods计算属性

# 3.计算属性的优势

# 4.总结

# 九、计算属性的完整写法

# 十、综合案例-成绩案例

# 十一、watch侦听器（监视器）

# 1.作用：

# 2.语法：

# 十二、翻译案例-代码实现

# 十三、watch侦听器

# 1.语法

# 2.需求

# 3.代码实现

# 4.总结

# 十四、综合案例

day02

一、今日学习目标

1.指令补充

2.computed计算属性

3.watch侦听器

4.综合案例（演示）

二、指令修饰符

1.什么是指令修饰符？

2.按键修饰符

3.v-model修饰符

4.事件修饰符

三、v-bind对样式控制的增强-操作class

1.语法：

2.对象语法

3.数组语法

4.代码练习

四、京东秒杀-tab栏切换导航高亮

1.需求：

2.准备代码:

3.思路：

五、v-bind对有样式控制的增强-操作style

1.语法

2.代码练习

疑问：style和:style又有什么区别呢

3.进度条案例

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

1.讲解内容：

2.代码准备

七、computed计算属性

1.概念

2.语法

3.注意

4.案例

5.代码准备

八、computed计算属性对比 methods方法

1.computed计算属性

2.methods计算属性

3.计算属性的优势

4.总结

九、计算属性的完整写法

十、综合案例-成绩案例

十一、watch侦听器（监视器）

1.作用：

2.语法：

十二、翻译案例-代码实现

十三、watch侦听器

1.语法

2.需求

3.代码实现

4.总结

十四、综合案例