前端Vue入门-day02-vue指令、computed计算属性与watch侦听器-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端Vue入门-day02-vue指令、computed计算属性与watch侦听器。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

(创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，请留下您的足迹）

前端Vue入门-day02-vue指令、computed计算属性与watch侦听器,# 前端vue入门,vue.js,前端,javascript,前端框架,html5

指令补充

指令修饰符

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

操作class

案例：京东秒杀 tab 导航高亮

操作style

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

computed 计算属性

基础语法

computed 计算属性 vs methods 方法

计算属性完整写法

综合案例 - 成绩案例

watch 侦听器

基础语法

完整写法

指令补充

指令修饰符

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

① 按键修饰符

@keyup.enter

→ 键盘回车监听

② v-model 修饰符

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

v-model.number → 转数字

③ 事件修饰符

@ 事件名 .stop → 阻止冒泡

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

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

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

操作class

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

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

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

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

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

案例：京东秒杀 tab 导航高亮

核心思路：

1. 基于数据动态渲染 tab → v-for

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

3. 基于下标，动态控制 class 类名

→ v-bind:class

所谓切换高亮，其实就是改下标

<!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:activeIndex===index}" href="#">{{item.name}}</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:0,//记录高亮
        list: [
          { id: 1, name: '京东秒杀' },
          { id: 2, name: '每日特价' },
          { id: 3, name: '品类秒杀' }
        ]

      }
    })
  </script>
</body>
</html>

网页显示为：

操作style

语法 :style = "样式对象"

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

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

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

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

输入框 input:text                                  → value

文本域 textarea → checked

复选框 input:checkbox                        → value

单选框 input:radio                               → value

下拉菜单 select → checked

...

<!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: 10px 0;
    }
  </style>
</head>
<body>

  <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: ""
      }
    })
  </script>
</body>
</html>

computed 计算属性

基础语法

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

语法：

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

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

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

computed 计算属性 vs methods 方法

computed 计算属性：

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

语法：

① 写在 computed 配置项中

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

缓存特性 （提升性能）：

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

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

methods 方法：

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

语法：

① 写在 methods 配置项中

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

计算属性完整写法

计算属性默认的简写，只能读取访问，不能 "修改" 。

如果要 "修改" → 需要写计算属性的完整写法。

综合案例 - 成绩案例

需求说明：

1. 渲染功能

2. 删除功能

3. 添加功能

4. 统计总分，求平均分

<!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>
              <!-- 需求：不及格的标红 -->
              <td :class="{red:item.score < 60}" >{{item.score}}</td>
              <td><a @click.prevent="del(item.id)" href="#">删除</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: 60 },
            { 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)
          }
        },
        methods:
        {
          del(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>