【Vue #3】指令补充&样式绑定

admin管理员组

文章数量:1440489

【Vue #3】指令补充&样式绑定

一、指令修饰符

Vue 的指令修饰符（Directive Modifiers）是 Vue 模板语法中的重要特性，它们以半角句号 . 开头，用于对指令的绑定行为进行特殊处理

修饰符作用如下：

1. 简化事件处理（如阻止默认行为、停止冒泡）
2. 精准控制输入（如自动格式化表单值）
3. 优化性能（如延迟数据同步）
4. 增强交互（如精确控制按键触发）

类型	常用修饰符
事件	.stop .prevent .capture .self .once .passive
键盘	.enter .tab .esc .space .up .down .left .right .ctrl .alt .shift .meta
鼠标	.left .right .middle
表单	.lazy .number .trim
系统修饰键	.exact

1. 事件修饰符（Event Modifiers）

用于 v-on 指令（简写为 @），处理 DOM 事件：

• .stop：阻止事件冒泡
• .prevent：阻止默认行为（比如：点击表单提交，表单不会刷新页面）
• .capture：使用捕获模式（父级先触发）
• .self：仅当事件源是当前元素时触发（子元素点击就不会触发）
• .once：事件只触发一次
• .passive：提升滚动性能（常用于移动端）

注意：修饰符可串联：

代码语言：javascript代码运行次数：0运行复制

<a @click.stop.prevent="doSomething">同时阻止冒泡和默认行为</a>

代码示例如下：

代码语言：javascript代码运行次数：0运行复制

<script setup>
import { ref } from 'vue'
const onPClick = () => {
  console.log('onPClick')
}
const onDivClick = () => {
  console.log('onDivClick')
}
</script>
<template>
  <div @click="onDivClick">
    <a href="/">百度一下</a>
    <p></p>
    <!-- .prevent: 阻止默认行为 -->
    <a href="/" @click.prevent>百度一下</a>
    <!-- .stop: 阻止冒泡, 同名事件不会向上传递 -->
    <p @click.stop="onPClick">I miss You</p>
    <!-- 修饰符的链式调用: 表名两个同时阻止 -->
    <a href="/" @click.stop.prevent>百度一下</a>
  </div>
</template>

2. 按键修饰符（Key Modifiers）

用于 v-on:keyup 或 v-on:keydown，监听特定按键：

① 按键别名

代码语言：javascript代码运行次数：0运行复制

<input @keyup.enter="submit"> 回车键触发
<input @keyup.esc="close"> ESC 键触发
<input @keyup.delete="deleteItem"> 删除键触发

② 系统修饰键

代码语言：javascript代码运行次数：0运行复制

<input @keyup.ctrl.enter="ctrlEnter"> Ctrl + Enter
<div @click.ctrl.exact="ctrlOnlyClick">仅按 Ctrl 时点击触发</div>

3. 鼠标修饰符（Mouse Modifiers）

控制鼠标按钮触发事件：

• .left：左键点击
• .right：右键点击
• .middle：中键点击

代码语言：javascript代码运行次数：0运行复制

<button @click.right="showContextMenu">右键触发菜单</button>

4. 表单修饰符（Key Modifiers）

用于 v-model 指令，优化表单处理：

• .lazy：失去焦点时同步数据，而不是输入时同步数据。将 input 事件改为 change 事件后同步
• .number：自动将输入转为数字类型（parseFloat() 转数字）
• trim：自动去除首尾空格

代码语言：javascript代码运行次数：0运行复制

<script setup>
import { reactive } from 'vue'
const goods = reactive({
  name: '', price: ''
})
</script>
<template>
  <!-- .lazy -->
  名称: <input type="text" v-model.lazy="goods.name" /> <br /> <br />
  <!-- .trim -->
  名称: <input type="text" v-model.trim="goods.name" /> <br /> <br />
  <!-- .number -->
  价格: <input type="text" v-model.number="goods.price" /> <br /> <br />

</template>

5. 自定义修饰符

在自定义指令中定义自己的修饰符：

代码语言：javascript代码运行次数：0运行复制

<script setup>
const vColor = {
  mounted(el, binding) {
    // 1. 处理参数（用于背景色）
    if (binding.arg) {
      el.style.backgroundColor = binding.arg
    }

    // 2. 处理修饰符（可扩展多个样式）
    if (binding.modifiers.bold) {
      el.style.fontWeight = 'bold'
    }
    if (binding.modifiers.italic) {
      el.style.fontStyle = 'italic'
    }
    if (binding.modifiers.underline) {
      el.style.textDecoration = 'underline'
    }

    // 3. 处理值（用于文字颜色）
    if (binding.value) {
      el.style.color = binding.value
    }

    // 4. 添加默认内边距提升显示效果
    el.style.padding = '0.5rem'
    el.style.borderRadius = '4px'
  }
}

// 注册局部指令
const directives = { vColor }
</script>

<template>
  <!-- 改进后的使用示例 -->
  <p v-color:skyblue.bold.italic="'#333'">天蓝背景、加粗斜体、深灰文字</p>
  <p v-color:#ffd700.underline="'#2c3e50'">金色背景、下划线、深蓝文字</p>
</template>

代码解析：

1. 参数处理 (:skyblue)
   • 通过 binding.arg 获取指令参数
   • 直接作为背景颜色使用（支持颜色名称、十六进制、RGB等格式）
   • 示例中 :skyblue 会设置 background-color: skyblue
2. 修饰符处理 (.bold.italic)
   • 通过 binding.modifiers 对象检查修饰符
   • 支持多个修饰符组合使用：
     • .bold → font-weight: bold
     • .italic → font-style: italic
     • .underline → text-decoration: underline
3. 值处理 (="'#333'")
   • 通过 binding.value 获取指令值
   • 用于设置文字颜色
   • 注意在模板中需要使用引号包裹字符串值

修饰符机制说明：

• Vue 会自动解析指令后的点号标识符为修饰符
• 例如 v-color.bold.italic 会生成：

代码语言：javascript代码运行次数：0运行复制

binding.modifiers = { 
  bold: true,
  italic: true 
}

6. 修饰符最佳实践

① 链式顺序影响结果

代码语言：javascript代码运行次数：0运行复制

<!-- 先阻止冒泡，再阻止默认行为 -->
<a @click.stop.prevent></a>

<!-- 先阻止默认行为，再判断是否自身触发 -->
<a @click.prevent.self></a>

② 合理使用系统修饰键： 用 .exact 精确控制组合按键：

代码语言：javascript代码运行次数：0运行复制

<input @keyup.ctrl.exact="onlyCtrl"> 仅按 Ctrl 时触发

③ 版本兼容性

• Vue 3 默认启用 passive 提升滚动性能
• Vue 3 废弃了 Vue 2 的按键码（如 .13）

二、v-model 用在其他表单元素

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

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

• 输入框 input:text ——> value
• 文本域 textarea ——> value
• 下拉菜单 select ——> value
  • v-model 写在select上，关联是选中option的 value
• 单选框 input:radio ——> value
  • 给单选框添加value属性，v-model 收集选中单选框的value
• 复选框 input:checkbox ——> checked / value
  • 一个复选框：v-model 绑定 布尔值，关联 checked 属性
  • 一组复选框：v-model 绑定 数组，关联 value 属性，给复选框 手动添加 value

代码语言：javascript代码运行次数：0运行复制

<script setup>
import { ref } from 'vue'
const intro = ref('') // 介绍
const city = ref('SH') // 城市
const blood = ref('ab') // 血型
const isAgree = ref(false) // 同意协议
const hobby = ref(['ZQ', 'PB']) // 爱好
</script>
<template>
  <!-- 1. 文本域 -->
  <textarea v-model="intro" cols="30" rows="4" placeholder="请输入自我介绍"></textarea> <br /><br />
  <!-- 2. 下拉菜单 -->
  <select v-model="city">
    <option value="BJ">北京</option>
    <option value="CS">长沙</option>
    <option value="SH">上海</option>
  </select>
  <br /> <br />
  <!-- 3. 单选框: 多个当中只能选一个 -->
  <input type="radio" value="a" v-model="blood" />A
  <input type="radio" value="b" v-model="blood" />B
  <input type="radio" value="ab" v-model="blood" />AB
  <br /><br />
  <!-- 4. 复选框  -->
  <input type="checkbox" v-model="isAgree" />是否同意用户协议

  <br />
  <br />
  <input v-model="hobby" type="checkbox" value="LQ" />篮球
  <input v-model="hobby" type="checkbox" value="ZQ" />足球
  <input v-model="hobby" type="checkbox" value="PB" />跑步
</template>

三、样式绑定

本文标签： Vue 3指令补充amp样式绑定