当前位置：首页 > article >正文

Vue 学习之旅：核心技术学习总结与实战案例分享(vue指令下+计算属性+侦听器)

article 2025/1/15 10:40:52

Vue 学习之旅：核心技术学习总结与实战案例分享

文章目录

Vue 学习之旅：核心技术学习总结与实战案例分享
- 一、指令补充
- - （一）指令修饰符
  - （二）v-bind 对样式操作的增强
  - （三）v-model 应用于其他表单元素
  - - Vue 的 `v-model` 指令在表单元素中的应用
    - - 一、输入框（`input:text`）
      - 二、复选框（`input:checkbox`）
      - 三、单选框（`input:radio`）
      - 四、下拉菜单（`select`）
      - 五、文本域（`textarea`）
- 二、计算属性
- - （一）基础概念与语法
  - （二）计算属性与方法的区别
  - （三）计算属性的完整写法
- 三、侦听器
- - （一）基础语法与作用
  - （二）完整写法与配置项
- 四、综合案例：水果购物车
- - 一、HTML结构搭建
  - - （一）顶部banner与面包屑
    - （二）购物车主体与空车提示
    - （三）购物车表格结构
    - - **`item.isChecked` 的作用与使用**
      - **全选功能的实现（`isAll` 计算属性）**

在 Vue 的学习过程中，今天我们深入探索了一些关键的技术点，包括指令补充、计算属性、侦听器以及综合案例的应用。这些技术点相互配合，为构建强大的 Vue 应用提供了坚实的基础。

一、指令补充

（一）指令修饰符

指令修饰符通过在指令后添加特定的后缀，简化了代码编写并实现了一些特定的功能。

按键修饰符：例如 @keyup.enter，用于监听键盘回车事件。在实际应用中，比如在一个搜索框组件中，当用户按下回车键时，可以触发 search 搜索操作。

<input @keyup.enter="search">

v-model 修饰符
- v-model.trim：能够去除输入内容的首尾空格。在用户注册表单中，当用户输入用户名时，使用该修饰符可以确保输入的用户名前后没有多余的空格，提高数据的准确性。而中间的空格会被看作是用户想输入的内容进行保留。
- v-model.number：可将输入内容转换为数字类型。在处理数字输入的场景，如商品数量输入框，能方便地获取正确的数据类型。正确转换后会显示蓝色。
事件修饰符
- @事件名.stop：阻止事件冒泡。在嵌套的元素事件处理中，如果内层元素的事件触发不希望影响到外层元素的相同事件，就可以使用该修饰符。例如，在一个列表项的点击事件中，防止点击事件冒泡到父元素的点击事件处理函数。所以一般 .stop 会放在子元素中。
- ```
<h3>@事件名.stop     →  阻止冒泡</h3>
    <div @click="fatherFn" class="father">
      <div @click.stop="sonFn" class="son">儿子</div>
    </div>
```
- @事件名.prevent：阻止默认行为。比如在表单提交按钮的点击事件中，如果需要在提交前进行一些自定义验证，且不希望表单自动提交，可以使用该修饰符阻止默认的提交行为。如当不想超链接跳转到另一个网页时，就可以使用其来阻止跳转。
- ```
<h3>@事件名.prevent  →  阻止默认行为</h3>
    <a @click.prevent href="http://www.baidu.com">阻止默认行为</a>
```

（二）v-bind 对样式操作的增强

操作 class
- 语法为 class="对象/数组"。当使用对象语法时，键是类名，值为布尔值，如果值为 true，则元素会添加对应的类名，否则不添加。例如：

<div class="box" :class="{ active: isActive, 'text-bold': isBold }"></div>

这里的 isActive 和 isBold 是 Vue 实例中的数据属性，根据它们的值动态切换类名。这种方式适用于单个类名需要根据条件来回切换的场景，比如一个按钮的激活态和非激活态的样式切换。

数组语法则是将数组中的所有类名都添加到元素上，如 <div class="box" :class="[ 'pink', 'big' ]"></div>，适用于批量添加或删除类名的情况，比如在不同的页面主题切换时，一次性添加或移除一组相关的类名。
操作 style
- 语法为 style="样式对象"，例如 <div class="box" :style="{ color: textColor, fontSize: fontSize + 'px' }"></div>。这里的 textColor 和 fontSize 是 Vue 实例中的数据属性，通过这种方式可以实现对元素具体样式属性的动态设置。在一个可定制主题的页面中，可以根据用户的选择动态改变文字颜色和字体大小等样式。
- 如：同时要记住，看见特殊的属性如：background-color 需要加单引号处理 ’ ’
- ```
<div class="box" :style = "{width : '400px' , height : '400px' , 'background-color' : 'green'}"></div>
```

举个例子：

首先通过 v-for 指令循环渲染导航栏的每个选项，利用 :key 绑定每个选项的 id。
给每个选项添加 @click 事件，点击时更新 activeIndex 的值。
使用 :class 指令结合 activeIndex 动态为当前选中的选项添加 active 类，实现样式切换，从而完成 tab 导航栏的切换功能。
完整源码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <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>
</head>
<body>

  <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>
      
    </ul>
  </div>
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        activeIndex: 0,
        list: [
          { id: 1, name: '京东秒杀' },
          { id: 2, name: '每日特价' },
          { id: 3, name: '品类秒杀' }
        ]

      }
    })

    app.mount('#app')
  </script>
</body>
</html>

结果展示为：

通过点击“每日特价”后，会变成：

（三）v-model 应用于其他表单元素

Vue 的 `v-model` 指令在表单元素中的应用

在 Vue 中，v-model 是一个强大的指令，它为表单元素提供了双向数据绑定的功能，使表单数据的处理变得更加简洁和直观。以下是对其在不同表单元素中应用的详细说明。

一、输入框（`input:text`）

输入框通常用于接收用户输入的文本信息。使用 v-model 可以轻松实现输入框与 Vue 实例中的数据属性的双向绑定，让数据的更新变得自动且实时。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 简单的样式设置，用于输入框 */
    input {
      margin-bottom: 10px;
    }
  </style>
</head>
<body>

  <div id="app">
    <h3>输入框示例</h3>
    <!-- 使用 v-model 将输入框的值与 Vue 实例中的 username 属性进行双向绑定 -->
    <input type="text" v-model="username" placeholder="请输入用户名"> 
  </div>

  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        // 存储输入框中的用户名
        username: '' 
      }
    });

    app.mount('#app');
  </script>
</body>
</html>

代码解释

v-model="username"：将输入框与 Vue 实例中的 username 属性进行双向绑定。当用户在输入框中输入文本时，username 属性的值会实时更新；反之，当 username 属性的值发生改变时，输入框中的内容也会相应更新。

二、复选框（`input:checkbox`）

复选框通常用于表示二进制选择，例如用户是否同意某些条款或具有某种属性。使用 v-model 可以将复选框的选中状态与 Vue 实例中的布尔值属性关联起来。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 简单的样式设置，用于复选框 */
    input {
      margin-bottom: 10px;
    }
  </style>
</head>
<body>

  <div id="app">
    <h3>复选框示例</h3>
    <!-- 使用 v-model 将复选框的选中状态与 Vue 实例中的 isSingle 属性进行双向绑定 -->
    <input type="checkbox" v-model="isSingle"> 是否单身？
  </div>

  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        // 存储复选框的选中状态，默认为 false
        isSingle: false 
      }
    });

    app.mount('#app');
  </script>
</body>
</html>

代码解释

v-model="isSingle"：将复选框的 checked 属性与 Vue 实例中的 isSingle 属性进行双向绑定。当用户勾选或取消勾选复选框时，isSingle 属性的值会在 true 和 false 之间切换；反之，当 isSingle 的值被修改时，复选框的选中状态也会相应改变。

三、单选框（`input:radio`）

单选框用于在多个选项中选择一个。为了确保单选框的互斥性，需要将它们分组，并使用 v-model 将组内单选框的选中值与 Vue 实例中的属性关联。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 简单的样式设置，用于单选框 */
    input {
      margin-bottom: 10px;
    }
  </style>
</head>
<body>

  <div id="app">
    <h3>单选框示例</h3>
    <!-- 为单选框分组并使用 v-model 将选中值与 Vue 实例中的 gender 属性进行双向绑定 -->
    性别: 
    <input type="radio" name="gender" v-model="gender" value="1"> 男
    <input type="radio" name="gender" v-model="gender" value="2"> 女
  </div>

  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        // 存储单选框的选中值，默认为 ''
        gender: '' 
      }
    });

    app.mount('#app');
  </script>
</body>
</html>

代码解释

name="gender"：为单选框分组，确保同一组内的单选框互斥。
v-model="gender"：将单选框组的选中值与 Vue 实例中的 gender 属性进行双向绑定。当用户选择一个单选框时，gender 属性的值会更新为该单选框的 value；反之，当 gender 属性的值被修改时，相应的单选框会被选中。

四、下拉菜单（`select`）

下拉菜单提供了多个选项供用户选择。使用 v-model 可以将用户的选择与 Vue 实例中的属性关联。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 简单的样式设置，用于下拉菜单 */
    select {
      margin-bottom: 10px;
    }
  </style>
</head>
<body>

  <div id="app">
    <h3>下拉菜单示例</h3>
    <!-- 使用 v-model 将下拉菜单的选中值与 Vue 实例中的 cityId 属性进行双向绑定 -->
    所在城市:
    <select v-model="cityId">
      <option value="101">北京</option>
      <option value="102">上海</option>
      <option value="103">成都</option>
      <option value="104">南京</option>
    </select>
  </div>

  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        // 存储下拉菜单的选中值，默认为 '101'
        cityId: '101' 
      }
    });

    app.mount('#app');
  </script>
</body>
</html>

代码解释

v-model="cityId"：将下拉菜单的选中值与 Vue 实例中的 cityId 属性进行双向绑定。当用户选择一个选项时，cityId 属性的值会更新为该选项的 value；反之，当 cityId 属性的值被修改时，相应的选项会被选中。

五、文本域（`textarea`）

文本域用于输入多行文本。使用 v-model 可以实现文本域内容与 Vue 实例中的属性的双向绑定。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 简单的样式设置，用于文本域 */
    textarea {
      display: block;
      width: 240px;
      height: 100px;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>

  <div id="app">
    <h3>文本域示例</h3>
    <!-- 使用 v-model 将文本域的内容与 Vue 实例中的 desc 属性进行双向绑定 -->
    自我描述：
    <textarea v-model="desc"></textarea> 
  </div>

  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        // 存储文本域中的内容，默认为 ''
        desc: '' 
      }
    });

    app.mount('#app');
  </script>
</body>
</html>

代码解释

v-model="desc"：将文本域的内容与 Vue 实例中的 desc 属性进行双向绑定。当用户在文本域中输入文本时，desc 属性的值会实时更新；反之，当 desc 属性的值发生改变时，文本域中的内容也会相应更新。

二、计算属性

（一）基础概念与语法

计算属性是基于现有的数据计算出来的新属性，当依赖的数据发生变化时，会自动重新计算。其语法是在 computed 配置项中声明，一个计算属性对应一个函数，使用时就像普通属性一样通过 {{ 计算属性名 }} 在模板中使用。例如：

data: { ！！！！！！！！
  list: [
    { id: 3, name: '铅笔', num: 5 },
    { id: 1, name: '篮球', num: 1 },
    { id: 2, name: '玩具', num: 2 }
  ]
},
computed: {
  totalCount() {
    return this.list.reduce
      data: {
  list: [
    { id: 3, name: '铅笔', num: 5 },
    { id: 1, name: '篮球', num: 1 },
    { id: 2, name: '玩具', num: 2 }
  ]
},
computed: {
  totalCount() {
    return this.list.reduce((sum, item) => sum + item.num, 0); // 0是求和的起始值
  }
}

在上述代码中，totalCount 计算属性会根据 list 数组中每个元素的 num 属性计算出总数。每当 list 数组发生变化时，totalCount 会自动重新计算，保证数据的实时性和准确性。

（二）计算属性与方法的区别

计算属性主要用于封装对数据的处理并求得一个结果，它作为属性直接使用，如 {{ totalCount }}。而方法是定义在 methods 配置项中，需要通过 this.方法名() 进行调用，如 @click="doSomething"。计算属性具有缓存特性，会对计算结果进行缓存，再次使用时直接读取缓存，只有当依赖项变化时才会重新计算并更新缓存，这在性能上有很大的优势。相比之下，方法每次调用都会执行一遍函数内的代码。

（三）计算属性的完整写法

计算属性默认的简写形式只能读取访问，不能直接修改。若要实现修改功能，则需要使用完整写法。例如：

computed: {
  fullName: {
    get() {
      return this.firstName +'' + this.lastName;
    },
    set(newValue) {
      const names = newValue.split(' ');
      this.firstName = names[0];
      this.lastName = names[names.length - 1];
    }
  }
}

在这个例子中，fullName 计算属性有 get 和 set 方法，get 方法用于获取计算后的全名，set 方法用于根据设置的新值分解并更新 firstName 和 lastName。

三、侦听器

（一）基础语法与作用

侦听器（watch）用于监视数据变化，并在数据变化时执行一些业务逻辑或异步操作。简单写法是直接监视简单类型数据，例如：

watch: {
  dataPropertyName(newValue, oldValue) {
    // 一些业务逻辑或异步操作
  }
}

这里的 dataPropertyName 是 Vue 实例中的数据属性，当它的值发生变化时，会触发对应的函数执行。

（二）完整写法与配置项

完整写法可以添加额外的配置项，如 deep: true 用于对复杂类型进行深度监视，immediate: true 则在初始化时立刻执行一次 handler 方法。例如：

data: {
  obj: {
    words: '苹果',
    lang: 'italy'
  }
},
watch: {
  'obj.words': {
    deep: true,
    immediate: true,
    handler(newValue) {
      console.log(newValue);
    }
  }
}

在这个例子中，当 obj 中的 words 属性发生变化时，会触发 handler 函数执行，并且由于 deep: true，即使 words 是 obj 的嵌套属性也能被正确监视，immediate: true 使得页面加载时就会执行一次 handler 函数进行初始处理。

四、综合案例：水果购物车

一、HTML结构搭建

整体页面结构围绕 id 为 app 的 div 元素构建，这个元素是Vue应用的挂载点。

（一）顶部banner与面包屑

<!-- 顶部banner -->
<div class="banner-box"><img src="./img/fruit.jpg" alt="" /></div>
<!-- 面包屑 -->
<div class="breadcrumb">
  <span>🏠</span>
  /
  <span>购物车</span>
</div>

顶部的 banner-box 用于展示一张购物车相关的图片，面包屑导航则方便用户了解自己所处的页面位置，以 / 分隔展示层级关系，增强用户体验。

（二）购物车主体与空车提示

<!-- 购物车主体 -->
<div class="main" v-if="fruitList.length > 0">
  <!-- 购物车表格内容，包含头部、身体和底部 -->
</div>
<!-- 空车 -->
<div class="empty" v-else>🛒空空如也</div>

这里使用 v-if 和 v-else 指令，根据 fruitList 数组的长度判断显示购物车主体还是空车提示信息。若 fruitList 有数据，显示购物车主体，否则展示空车的提示。

（三）购物车表格结构

购物车表格结构分为头部、身体和底部三部分。

<!-- 头部 -->
<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" checked /></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="sum(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.price * item.num}}</div>
    <div class="td"><button @click="del(item.id)">删除</button></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>

头部定义了表格各列的标题。身体部分通过 v-for 指令循环渲染每一行商品信息，:key 绑定每个商品的唯一 id，方便Vue高效地更新和渲染列表。同时，通过 :class 指令根据商品的 isChecked 状态动态添加 active 类，用于设置选中商品的样式。每个商品行包含复选框、商品图片、单价、数量输入框、小计和删除按钮。底部则有全选复选框以及显示总价和结算按钮的区域，其中总价和结算数量通过插值表达式。接下来为更细分的讲解：

这段购物车表格结构代码实现了购物车中商品信息的展示、交互以及相关数据的计算与呈现，以下是对 item.isChecked 等关键内容以及商品总价计算方法的总结：

item.isChecked 的作用与使用
- 作用：item.isChecked 是购物车中每个商品对象的一个布尔属性，用于表示该商品是否被选中。通过这个属性，实现了商品的选中状态管理，进而支持全选、反选以及计算选中商品的总价和总数量等功能。
- 在代码中的使用：在表格的商品行中，<input type="checkbox" v-model="item.isChecked" checked /> 这一行代码将复选框的选中状态与商品对象的 isChecked 属性进行双向绑定。当用户勾选或取消勾选复选框时，item.isChecked 的值会相应地改变；反之，当 item.isChecked 的值通过代码逻辑改变时，复选框的选中状态也会同步更新。同时，在表格行的样式绑定中，:class="{active : item.isChecked}" 根据 item.isChecked 的值来动态添加或移除 active 类，从而改变选中商品行的样式，增强用户交互体验。
全选功能的实现（isAll 计算属性）
- 实现方式：全选功能通过计算属性 isAll 来实现，它具有 get 和 set 方法。
  - get 方法：

get () {
  return this.fruitList.every(item => item.isChecked);
}

get 方法通过 every 方法遍历 fruitList 数组，检查数组中的每个商品的 isChecked 属性是否都为 true。只有当所有商品的 isChecked 都为 true 时，isAll 计算属性才返回 true，此时全选复选框会被勾选；否则，全选复选框不勾选。

set 方法：

set (value) {
  this.fruitList.forEach(item => item.isChecked = value);
}

当全选复选框的状态发生改变时，set 方法会被调用。它通过 forEach 方法遍历 fruitList 数组，将每个商品的 isChecked 属性设置为与全选复选框相同的值，实现全选和反选的功能。
3. ##### 商品总价计算（totalPrice 计算属性）

- **计算方法**：通过 `totalPrice` 计算属性来计算选中商品的总价。

totalPrice() {
  return this.fruitList.reduce((sum, item) => {
    if(item.isChecked){
      return sum + item.num * item.price;
    } else {
      return sum;
    }
  }, 0);
}

在 totalPrice 计算属性中，使用 reduce 方法遍历 fruitList 数组。对于数组中的每个商品，如果该商品被选中（item.isChecked 为 true），则将其单价（item.price）乘以数量（item.num）并累加到 sum 中；如果未被选中，则直接返回 sum。最后返回累加的结果，即选中商品的总价。在表格底部的总价展示区域，通过插值表达式 {{ totalPrice }} 将计算出的总价实时显示在页面上。
4. ##### 商品总数量计算（totalCount 计算属性）

- **计算方法**：`totalCount` 计算属性用于计算选中商品的总数量。

totalCount() {
  return this.fruitList.reduce((sum, item) => {
    if(item.isChecked){
      return sum + item.num;
    } else {
      return sum;
    }
  }, 0);
}

与计算总价类似，totalCount 也使用 reduce 方法遍历 fruitList 数组。当商品被选中时，将其数量（item.num）累加到 sum 中，未选中则直接返回 sum。最终返回的 sum 就是选中商品的总数量，同样在结算按钮旁边通过插值表达式 {{totalCount}} 展示在页面上。