Vue第三天学习

最新推荐文章于 2025-09-12 14:24:39 发布

原创最新推荐文章于 2025-09-12 14:24:39 发布 · 228 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #学习 #前端

前端学习专栏收录该内容

4 篇文章

订阅专栏

文章详细介绍了Vue中的v-for指令用于列表渲染，包括遍历数组语法、key的作用以及注意事项。同时，文章讨论了v-model的用途，如双向数据绑定，以及在小黑记事本案例中的应用。此外，提到了计算属性的概念、用途、缓存特性，并通过示例展示了如何使用。最后，文章还涵盖了v-model在不同表单元素上的应用以及v-bind在样式控制中的增强功能。

Vue 指令 v-for

1. 作用：

基于数据循环，多次渲染整个元素 → 数组、对象、数字...

2. 遍历数组语法：

v-for = "(item, index) in 数组"

Ø item 每一项， index 下标

Ø 省略 index: v-for = "item in 数组"

v-for 中的 key

语法：key属性 = "唯一标识"，key作用：给元素添加的唯一标识。

作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。

注意点：

1. key 的值只能是字符串或数字类型

2. key 的值必须具有唯一性

3. 推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）

<li v-for="(item, index) in xxx" :key="唯一值">

Vue 指令 v-model

1. 作用: 给表单元素使用, 双向数据绑定 → 可以快速获取或设置表单元素内容

① 数据变化 → 视图自动更新

② 视图变化 → 数据自动更新

2. 语法: v-model = '变量'

综合案例：小黑记事本

功能需求：

① 列表渲染

② 删除功能

③ 添加功能

④ 底部统计和清空

<!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" />
<link rel="stylesheet" href="./css/index.css" />
<title>记事本</title>
</head>
<body>

<!-- 主体区域 -->
<section id="app">
  <!-- 输入框 -->
  <header class="header">
    <h1>小黑记事本</h1>
    <input v-model="todoName"  placeholder="请输入任务" class="new-todo" />
    <button @click="add" class="add">添加任务</button>
  </header>
  <!-- 列表区域 -->
  <section class="main">
    <ul class="todo-list">
      <li class="todo" v-for="(item, index) in list" :key="item.id">
        <div class="view">
          <span class="index">{{ index + 1 }}.</span> <label>{{ item.name }}</label>
          <button @click="del(item.id)" class="destroy"></button>
        </div>
      </li>
    </ul>
  </section>
  <!-- 统计和清空 -->
  <footer class="footer" v-show="list.length > 0">
    <!-- 统计 -->
    <span class="todo-count">合 计:<strong> {{ list.length }} </strong></span>
    <!-- 清空 -->
    <button @click="clear" class="clear-completed">
      清空任务
    </button>
  </footer>
</section>

<!-- 底部 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  // 添加功能
  // 1. 通过 v-model 绑定 输入框 → 实时获取表单元素的内容
  // 2. 点击按钮，进行新增，往数组最前面加 unshift
  const app = new Vue({
    el: '#app',
    data: {
      todoName: '',
      list: [
        { id: 1, name: '跑步一公里' },
        { id: 3, name: '游泳100米' },
      ]
    },
    methods: {
      del (id) {
        // console.log(id) => filter 保留所有不等于该 id 的项
        this.list = this.list.filter(item => item.id !== id)
      },
      add () {
        if (this.todoName.trim() === '') {
          alert('请输入任务名称')
          return
        }
        this.list.unshift({
          id: +new Date(),
          name: this.todoName
        })
        this.todoName = ''
      },
      clear () {
        this.list = []
      }
    }
  })

</script>
</body>
</html>

功能总结：

① 列表渲染：

v-for key 的设置 {{ }} 插值表达式

② 删除功能

v-on 调用传参 filter 过滤覆盖修改原数组

③ 添加功能

v-model 绑定 unshift 修改原数组添加

④ 底部统计和清空

数组.length累计长度

覆盖数组清空列表

v-show 控制隐藏

指令修饰符

通过 "." 指明一些指令后缀，不同后缀封装了不同的处理操作 → 简化代码

① 按键修饰符

@keyup.enter

→ 键盘回车监听

② v-model修饰符

v-model.trim → 去除首尾空格

v-model.number → 转数字

③ 事件修饰符

@事件名.stop → 阻止冒泡

@事件名.prevent → 阻止默认行为

v-bind 对于样式控制的增强

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

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

语法 :class = "对象/数组"

① 对象 → 键就是类名，值是布尔值。如果值为 true，有这个类，否则没有这个类

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

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

② 数组 → 数组中所有的类，都会添加到盒子上，本质就是一个 class 列表

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

适用场景：批量添加或删除类

:class="['pink', 'big']"

v-bind 对于样式控制的增强 - 操作style

语法 :style = "样式对象"

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

适用场景：某个具体属性的动态设置

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

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

v-model 应用于其他表单元素它会根据控件类型自动选取正确的方法来更新元素

输入框 input:text

文本域 textarea

复选框 input:checkbox

单选框 input:radio

下拉菜单 select

...

→ value

→ checked

→ value

→ checked

计算属性

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

语法：

① 声明在 computed 配置项中，一个计算属性对应一个函数

② 使用起来和普通属性一样使用 {{ 计算属性名 }}

计算属性 → 可以将一段求值的代码进行封装

computed 计算属性 vs methods 方法

computed 计算属性：

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

语法：

① 写在 computed 配置项中

② 作为属性，直接使用 → this.计算属性 {{ 计算属性 }}

methods 方法：

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

语法：

① 写在 methods 配置项中

② 作为方法，需要调用 → this.方法名( ) {{ 方法名() }} @事件名="方法名"

缓存特性（提升性能）：

计算属性会对计算出来的结果缓存，再次使用直接读取缓存，

依赖项变化了，会自动重新计算 → 并再次缓存

计算属性完整写法

  <!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" />
    <link rel="stylesheet" href="./styles/index.css" />
    <title>Document</title>
  </head>
  <body>
    <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>
  </body>
</html>