【Vue3 知识第四讲】数据双向绑定、事件绑定、事件修饰符详解

一、数据双向绑定

什么是数据双向绑定？

• 当数据发生变化的时候，视图会相应的发生变化
• 当视图发生改变的时候，数据也会相应的同步变化

数字化管理平台
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
权限系统-商城
个人博客地址

双向绑定的指令

​ v-model 指令实现数据双向绑定

双向绑定使用场景

​ 利用 v-model 指令，限制在 input select textarea components (组件) 中使用

示例：

修饰符

• .lazy 默认情况下，v-model 会在每次 input 事件后更新数据 (IME 拼字阶段的状态例外)。你可以添加 lazy 修饰符来改为在每次 change 事件后更新数据
• .number 如果你想让用户输入自动转换为数字，你可以在 v-model 后添加 .number 修饰符来管理输入
• .trim 如果你想要默认自动去除用户输入内容中两端的空格，你可以在 v-model 后添加 .trim 修饰符

二、事件绑定详解

2.1 Vue中的事件绑定指令

• v-on 指令用法

  v-on
  

• 指令可以简写为 @ （语法糖）

  @语法糖
  

2.2 事件函数的调用方式

• 直接绑定函数名

  v-on
  

• 调用函数

  v-on
  

2.3 事件函数参数传递

• 普通参数：多个参数使用逗号隔开

  v-on
  

• 事件对象：

  tip1：如果事件直接绑定函数名称 或者 调用函数并未传递任何参数，那么事件函数会默认传递事件对象作为第一个参数；

  tip2：如果事件绑定函数调用时传递了参数，那么事件对象必须作为最后一个参数显式传递，并且事件对象的名称必须是 $event

  tip3：在不考虑兼容性问题，且允许 window 全局对象存在的情况下，可以在函数内直接通过全局对象获取事件对象 window.event 也可，建议使用传参的方式。

• 小案例：购物车简易计数器
  
  ​ 实现思路：

1. data 中定义初始的数量 num
2. 将 num 使用 “插值表达式” 或 “v-text指令” 设置给对应的标签
3. 使用 v-on 指令给加减按钮定义点击事件 add 和 reduce
4. 在 methods 中定义 add 和 reduce 方法的逻辑：数量最少为 1，最大为 20

三、事件修饰符

3.1 Vue中常用的事件修饰符

• .stop 阻止冒泡

• .prevent 取消默认事件

• .self 仅当 event.target 是元素本身时才会触发事件处理器

• .capture 添加事件监听器时，使用 capture 捕获模式

• .once 事件最多被触发一次

• .passive 修饰符一般用于触摸事件的监听器，可以用来改善移动端设备的滚屏性能。不能和 .prevent 一起使用。

  // 通过 .stop 修饰符阻止事件冒泡行为
  
      外部容器
      
  内部容器
  
  
  //通过 .prevent 修饰符阻止 a 标签默认跳转功能
  跳转百度
  
  //链式修改
  
  

3.2 按键修饰符

• .enter => enter键

• .tab => tab键

• .delete (捕获“删除”和“退格”按键) => 删除键

• .esc => 取消键

• .space => 空格键

• .up => 上

• .down => 下

• .left => 左

• .right => 右

  // .enter 回车键
  
        
  用户名：
        
        
  密码：
        登录
    
    
  // .delete 删除建
  
  

四、属性绑定

v-bind 指令被用来响应地更新 HTML 属性

语法 v-bind:prop = val

语法糖 :prop = val

//属性绑定
属性绑定演示
语法糖

注：语法糖是对某个操作的简化，来提高开发效率

五、类与样式的绑定

5.1 class 类的绑定

• 绑定对象语法

  v-bind:class = { 类名:类值，类名1:类值1，…，类名n:类值n }

  如果类名对应的值为true，则显示这个类名；否则不显示这个类名

• 绑定数组语法

  v-bind:class = [ 值1，值2，…，值n ]

  值1、值2对应data中的数据

  <script setup>
  import { ref, reactive, computed } from 'vue'
  
  const clsName = "active-link"
  // 通过 ref 声明的数据，在 script 中，需要通过 .value 获取和修改值；在 template 模板中使用时，则不需要通过 .value 获取值，模板会自动解析数据
  const count = ref(0)
  
  // 注意：这里如果想要在count值修改后，实时响应数据变化，需要采用计算属性
  const clsObj = computed(() => ({
      link: true,
      activeLink: count.value % 2 == 0
  }))
  
  let fm = ref(true)
  </script>
  <template>
      <div>
          <!-- 基于 v-bind 指令，增强绑定 class类 与 style样式，这两个属性值除了可以使用字符串外，还可以使用对象和数组的绑定 -->
          <a href="javascript:;" :class="clsName" class="link" style="text-decoration:none;"
              :style="'font-style:italic;'">超链接标签演示字符串类型的class和style绑定</a>
          <hr>
          <a href="javascript:;" :class="clsObj"
              :style="{ 'text-decoration': 'none', fontStyle: count % 2 == 0 ? 'italic' : '' }">采用绑定对象的方式实现class和style的赋值</a>
          <hr>
          <a href="javascript:;" :class="['link', 'active-link', { fm }]"
              :style="['letter-spacing:6px;', { 'text-decoration': 'none', fontStyle: count % 2 == 0 ? 'italic' : '' }]">采用数组绑定的方式实现class和style</a>
      </div>
      <button @click="count++">count++</button>
  </template>
  
  <style scoped>
  hr {
      margin: 2vh 0;
  }
  
  .link {
      color: gray;
  }
  
  .active-link,
  .activeLink {
      font-weight: bold;
  }
  
  .fm {
      font-family: "楷体";
  }
  </style>
  

5.2 style 样式绑定

• 绑定对象语法

  v-bind:style = { 样式名:样式值，样式名1:样式值1，…，样式名n:样式值n }

• 绑定数组语法

  v-bind:style = [值1，值2，…，值n]

  值1，值2，…，值n 需要在 data 中使用对象定义样式和样式值

  <script setup>
  import { ref, reactive, computed } from 'vue'
  
  const clsName = "active-link"
  // 通过 ref 声明的数据，在 script 中，需要通过 .value 获取和修改值；在 template 模板中使用时，则不需要通过 .value 获取值，模板会自动解析数据
  const count = ref(0)
  
  // 注意：这里如果想要在count值修改后，实时响应数据变化，需要采用计算属性
  const clsObj = computed(() => ({
      link: true,
      activeLink: count.value % 2 == 0
  }))
  
  let fm = ref(true)
  </script>
  <template>
      <div>
          <!-- 基于 v-bind 指令，增强绑定 class类 与 style样式，这两个属性值除了可以使用字符串外，还可以使用对象和数组的绑定 -->
          <a href="javascript:;" :class="clsName" class="link" style="text-decoration:none;"
              :style="'font-style:italic;'">超链接标签演示字符串类型的class和style绑定</a>
          <hr>
          <a href="javascript:;" :class="clsObj"
              :style="{ 'text-decoration': 'none', fontStyle: count % 2 == 0 ? 'italic' : '' }">采用绑定对象的方式实现class和style的赋值</a>
          <hr>
          <a href="javascript:;" :class="['link', 'active-link', { fm }]"
              :style="['letter-spacing:6px;', { 'text-decoration': 'none', fontStyle: count % 2 == 0 ? 'italic' : '' }]">采用数组绑定的方式实现class和style</a>
      </div>
      <button @click="count++">count++</button>
  </template>
  
  <style scoped>
  hr {
      margin: 2vh 0;
  }
  
  .link {
      color: gray;
  }
  
  .active-link,
  .activeLink {
      font-weight: bold;
  }
  
  .fm {
      font-family: "楷体";
  }
  </style>