Vue笔记——part（2）

帆高#

已于 2023-11-10 10:05:41 修改

阅读量263

点赞数

分类专栏： Vue基础学习文章标签： vue.js 笔记 javascript

于 2023-10-08 20:53:02 首次发布

本文链接：https://blog.csdn.net/qq_73958269/article/details/132679367

版权

Vue基础学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、指令补充

1.指令修饰符

1.1概念

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

1.2分类

1.2.1按键修饰符

@keyup.enter=> 键盘回车监听

@keyup默认情况下是按下键盘上的哪个键，都会触发事件的
@keyup.enter只会在回车的时候触发监听事件

1.2.2v-model修饰符

v-model.trim=> 去除首尾空格
v-model.number => 转数字

1.2.3事件修饰符

@事件名.stop=> 阻止冒泡
@事件名.prevent=> 阻止默认行为

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

2.1语法

:class="对象/数组"

对象
键就是类名，值是布尔值。如果值为true，有这个类，否则没有这个类
适用范围：一个类名，来回切换

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

数组
数组中的所有类，都会添加到一个盒子上，本质上就是一个class列表
适用范围：批量添加或者删除类

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

2.2案例：京东秒杀Tab导航高亮

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>04-tab栏的active效果</title>
    <style>
      #sparkle {
        width: 600px;
        height: 60px;
        display: flex;
        display: flex;
        justify-content: center;
        border-bottom: 5px solid red;
        background-color: gainsboro;
      }
      .box {
        width: 140px;
        height: 60px;
        line-height: 60px;
        text-align: center;
      }
      a {
        text-decoration: none;
        color: black;
        font-weight: 600;
        font-size: 20px;
      }
      .active {
        background-color: red;
        width: 150px;
        height: 60px;
      }
      .white {
        color: white;
      }
    </style>
  </head>
  <body>
    <div id="sparkle">
      <div
        class="box"
        :class="{active:index === activeIndex}"
        v-for="(item,index) in list"
        :key="item.id"
        @click="activeIndex = index"
      >
        <a href="#" class="white">{{ item.name}}</a>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
      const sparkle = new Vue({
        el: "#sparkle",
        data: {
          // 记录高亮的
          activeIndex: 0,
          list: [
            { id: 1, name: "京东秒杀" },
            { id: 2, name: "百亿补贴" },
            { id: 3, name: "每日特价" },
            { id: 4, name: "品类秒杀" },
          ],
        },
      });
    </script>
  </body>
</html>

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

3.1语法

:style="样式对象"

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

style强大的地方就在于，可以非常方便地控制一个类的某个属性的一个变化，而不是像类一样控制某一些属性，重在控制单个属性的变化

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

常见的表单元素都可以用v-model绑定关联 => 快速获取或设置表单元素的
会根据控件类型 自动选取 正确的方法 来更新元素

输入框input:text => value
输入框textarea => value
输入框input:checkbox => checked
输入框input:radio=> checked
输入框iselect => value

二、computed 计算属性

1.计算属性

1.1概念

基于现有的数据，计算出来的新属性
是个属性！！！（不需要加括号）
依赖的数据变化，自动重新计算
计算属性=>将一段求值的代码进行封装（要记得return对应的结果）

1.2语法

声明在 computed配置顶 中，一个计算属性对应一个函数(与之前的data类似)
使用起来和普通属性一样使用 {{ 计算属性名 }}

computed:{
计算属性名(){
基于现有数据，编写求值逻辑
return 结果
 },
}

2.computed 计算属性 VS methods 方法

2.1computed 计算属性

作用：
封装了一段对于数据的处理，求得一个结果
语法：
写在computed 配置顶中
作为属性，直接使用 => this.计算属性或者{{ 计算属性 }}

缓存特性：
计算属性会对计算出来的结果缓存，再次使用时直接读取缓存，依赖项变了，会自动重新计算 => 并且再次缓存

2.2methods 方法

作用：
给实例提供一个方法，调用以处理业务逻辑
语法：
写在 methods 配置顶中
作为方法，需要调用 => this.方法名()或者{{ 方法名()}}或者@事件名="方法名"

3.计算属性完整写法

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

computed:{
//配置获取的逻辑
get(){
   一段代码逻辑(计算逻辑)
   return 结果
    },
    //配置修改的逻辑
    set(修改的值){
    一段代码逻辑(修改逻辑)
    }
}

4.watch 侦听器（监视器）

4.1作用

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

4.2语法

简单写法 => 简单类型数据，直接监视

//简单写法
data:{
words:'苹果'，
obj:{
words:'苹果'
  }
},

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

完整写法 => 添加额外配置顶

添加额外配置顶

deep:true对复杂类型深度监视
immediate:true初始化立刻执行一次handler方法

//完整写法
data:{
words:'苹果'，
obj:{
words:'苹果'
  }
},
watch:{
// 该方法会在数据变化时，触发执行
数据属性名:{
deep:true,//深度监视（针对复杂类型）
//一次性将对象当中的所有属性都监听到
immediate:true,//是否立刻执行一次handler
handler(newValue){
console.log(newValue)
  }
}