Vue 核心技术与实战day02-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_63889623/article/details/140401656

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 列表

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


    <div class="box " :class="{pink :true,big:true}">黑马程序员</div>
    <div class="box " :class="['pink','big']">黑马程序员</div>

操作style

语法 :style = "样式对象"

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

 <div class="box" :style="{width:'300px',height:'400px', backgroundColor:'red'}"></div>

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

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

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

输入框 input:text → value

文本域 textarea → value

复选框 input:checkbox → checked

单选框 input:radio → checked

下拉菜单 select → value

...


    <!-- 
      前置理解：
        1. name:  给单选框加上 name 属性 可以分组 → 同一组互相会互斥
        2. value: 给单选框加上 value 属性，用于提交给后台的数据
        3. 男和女只是展示给用户看的，没有实际意义
      


    -->
    性别:

    <input v-model="gender" type="radio" name="sex" value="1">男
    <input v-model="gender" type="radio" name="sex" value="2">女

  <!-- 
      前置理解：
        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>

计算属性

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

本质：还是一个属性

语法：

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

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

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

computed 计算属性 vs methods 方法

computed 计算属性：

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

语法：

① 写在 computed 配置项中

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

methods 方法：

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

语法：

① 写在 methods 配置项中

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

缓存特性 （提升性能）：

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

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

计算属性完整写法

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

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

只能读取访问相当于get方法

下面是计算属性的完整写法

watch 侦听器（监视器）

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

语法：

① 简单写法 → 简单类型数据，直接监视

② 完整写法 → 添加额外配置项

   watch: {
        'obj.words'(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
          }, 1000);
        }
      }
    })