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

一、指令修饰符

Vue 的指令修饰符（Directive Modifiers）是 Vue 模板语法中的紧张特性，它们以半角句号 . 开头，用于对指令的绑定举动举行特殊处理惩罚
修饰符作用如下：

• 简化变乱处理惩罚（如克制默认举动、克制冒泡）
  
• 精准控制输入（如主动格式化表单值）
  
• 优化性能（如延长数据同步）
  
• 增强交互（如准确控制按键触发）
  

范例常用修饰符变乱.stop .prevent .capture .self .once .passive键盘.enter .tab .esc .space .up .down .left .right .ctrl .alt .shift .meta鼠标.left .right .middle表单.lazy .number .trim体系修饰键.exact1. 变乱修饰符（Event Modifiers）

用于 v-on 指令（简写为 @），处理惩罚 DOM 变乱：

• .stop：克制变乱冒泡
  
• .prevent：克制默认举动（好比：点击表单提交，表单不会革新页面）
  
• .capture：利用捕获模式（父级先触发）
  
• .self：仅当变乱源是当前元素时触发（子元素点击就不会触发）
  
• .once：变乱只触发一次
  
• .passive：提升滚动性能（常用于移动端）
  

注意：修饰符可串联：

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

复制代码

代码示比方下：

1. <script setup>
2. import { ref } from 'vue'
3. const onPClick = () => {
4.   console.log('onPClick')
5. }
6. const onDivClick = () => {
7.   console.log('onDivClick')
8. }
9. </script>
10. <template>
11.   <div @click="onDivClick">
12.     <a href="https://www.baidu.com/">百度一下</a>
13.     <p></p>
14.     <!-- .prevent: 阻止默认行为 -->
15.     <a href="https://www.baidu.com/" @click.prevent>百度一下</a>
16.     <!-- .stop: 阻止冒泡, 同名事件不会向上传递 -->
17.     <p @click.stop="onPClick">I miss You</p>
18.     <!-- 修饰符的链式调用: 表名两个同时阻止 -->
19.     <a href="https://www.baidu.com/" @click.stop.prevent>百度一下</a>
20.   </div>
21. </template>

复制代码

2. 按键修饰符（Key Modifiers）

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

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

复制代码

② 体系修饰键

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

复制代码

3. 鼠标修饰符（Mouse Modifiers）

控制鼠标按钮触发变乱：

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

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

复制代码

4. 表单修饰符（Key Modifiers）

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

• .lazy：失去核心时同步数据，而不是输入时同步数据。将 input 变乱改为 change 变乱后同步
  
• .number：主动将输入转为数字范例（parseFloat() 转数字）
  
• trim：主动去除首尾空格
  

1. <script setup>
2. import { reactive } from 'vue'
3. const goods = reactive({
4.   name: '', price: ''
5. })
6. </script>
7. <template>
8.   <!-- .lazy -->
9.   名称: <input type="text" v-model.lazy="goods.name" /> <br /> <br />
10.   <!-- .trim -->
11.   名称: <input type="text" v-model.trim="goods.name" /> <br /> <br />
12.   <!-- .number -->
13.   价格: <input type="text" v-model.number="goods.price" /> <br /> <br />
15. </template>

复制代码

5. 自界说修饰符

在自界说指令中界说本身的修饰符：

1. <script setup>
2. const vColor = {
3.   mounted(el, binding) {
4.     // 1. 处理参数（用于背景色）
5.     if (binding.arg) {
6.       el.style.backgroundColor = binding.arg
7.     }
9.     // 2. 处理修饰符（可扩展多个样式）
10.     if (binding.modifiers.bold) {
11.       el.style.fontWeight = 'bold'
12.     }
13.     if (binding.modifiers.italic) {
14.       el.style.fontStyle = 'italic'
15.     }
16.     if (binding.modifiers.underline) {
17.       el.style.textDecoration = 'underline'
18.     }
20.     // 3. 处理值（用于文字颜色）
21.     if (binding.value) {
22.       el.style.color = binding.value
23.     }
25.     // 4. 添加默认内边距提升显示效果
26.     el.style.padding = '0.5rem'
27.     el.style.borderRadius = '4px'
28.   }
29. }
31. // 注册局部指令
32. const directives = { vColor }
33. </script>
35. <template>
36.   <!-- 改进后的使用示例 -->
37.   <p v-color:skyblue.bold.italic="'#333'">天蓝背景、加粗斜体、深灰文字</p>
38.   <p v-color:#ffd700.underline="'#2c3e50'">金色背景、下划线、深蓝文字</p>
39. </template>

复制代码

代码分析：

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

修饰符机制阐明：

• Vue 会主动分析指令后的点号标识符为修饰符
  
• 比方 v-color.bold.italic 会天生：
  

1. binding.modifiers = {
2.   bold: true,
3.   italic: true
4. }

复制代码

6. 修饰符最佳实践

① 链式序次影响效果

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

复制代码

② 公道利用体系修饰键：
用 .exact 准确控制组合按键：

1. <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
    
  
  

1. <script setup>
2. import { ref } from 'vue'
3. const intro = ref('') // 介绍
4. const city = ref('SH') // 城市
5. const blood = ref('ab') // 血型
6. const isAgree = ref(false) // 同意协议
7. const hobby = ref(['ZQ', 'PB']) // 爱好
8. </script>
9. <template>
10.   <!-- 1. 文本域 -->
11.   <textarea v-model="intro" cols="30" rows="4" placeholder="请输入自我介绍"></textarea> <br /><br />
12.   <!-- 2. 下拉菜单 -->
13.   <select v-model="city">
14.     <option value="BJ">北京</option>
15.     <option value="CS">长沙</option>
16.     <option value="SH">上海</option>
17.   </select>
18.   <br /> <br />
19.   <!-- 3. 单选框: 多个当中只能选一个 -->
20.   <input type="radio" value="a" v-model="blood" />A
21.   <input type="radio" value="b" v-model="blood" />B
22.   <input type="radio" value="ab" v-model="blood" />AB
23.   <br /><br />
24.   <!-- 4. 复选框  -->
25.   <input type="checkbox" v-model="isAgree" />是否同意用户协议
27.   <br />
28.   <br />
29.   <input v-model="hobby" type="checkbox" value="LQ" />篮球
30.   <input v-model="hobby" type="checkbox" value="ZQ" />足球
31.   <input v-model="hobby" type="checkbox" value="PB" />跑步
32. </template>

复制代码

三、样式绑定

🐇 为了方便开辟者举行样式控制,Vue 扩展了 v-bind 的语法，可以针对 class 类名 和 style 行内样式两个属性举行控制,进而通过数据控制元素的样式
1. Class 类名绑定

用于动态添加或移除 CSS 类名，支持多种语法格式。

1. :class = "三元表达式/对象"

复制代码

1.1 对象语法

通过对象动态切换类名（键为类名，值为布尔值）
当class动态绑定的是对象时，键就是类名，值就是布尔值，假如值是true，就添加这个类，否则删除这个类

1. <p class="box":class="{ 类名1:布尔值1，类名2:布尔值2 }"></p>

复制代码

1.2 数组语法

应用多个类名（可肴杂静态和动态类）：

1. <div :class="[类名1, 类名2, {条件}]"></div>

复制代码

1.3 三元表达式

语法如下：

1. <p :class="条件 ? '类名1' : '类名2'"></p>

复制代码

1.4 与静态 class 共存

静态class与动态class共存可以共存，二者会归并

1. <p class="item" :class="条件 ?'类名1':'类名2'"></p〉

复制代码

代码示比方下：

1. <script setup>
2. import { ref } from 'vue'
4. const isActive = ref(true)
5. const errorClass = ref('text-danger')  // 新增数组绑定用的类名
6. const fontSize = ref(20)              // 内联样式用字体大小
7. </script>
9. <template>
10.   <!-- 1. 对象绑定 -->
11.   <p :class="{ active: isActive }">Active1</p>
12.   
13.   <!-- 2. 数组绑定 -->
14.   <p :class="['base-class', errorClass, { active: isActive }]">Active3</p>
16.   <!-- 3. 三元绑定 -->
17.   <p :class="isActive ? 'active' : ''">Active2</p>
19.   <!-- 4. 动静态 class -->
20.   <p class="base-class" :class="{ active: isActive }">Active4</p>
22. <style>
23. .active {
24.   color: red;
25. }
26. .text-danger {
27.   text-decoration: line-through;
28. }
29. .base-class {
30.   font-size: 20px;
31. }
32. </style>

复制代码

2. 内联样式绑定

通过 :style 动态设置行内样式，支持对象或数组语法
根本语法如下：

1. :style="{属性名1: 表达式1, 属性名2: 表达式2, ...}"

复制代码

2.1 对象语法

直接绑定样式对象（保举驼峰式写法）：

1. <div style="color: red; font-size: 20px;"></div>

复制代码

2.2 数组语法

归并多个样式对象

1. <template>
2.   <div :style="[baseStyles, overridingStyles]">1234</div>
3. </template>
5. <script>
6. // 可选：在 script 中定义样式对象
7. export default {
8.   data() {
9.     return {
10.       baseStyles: { color: 'blue' },
11.       overridingStyles: { fontSize: '30px' }
12.     }
13.   }
14. }
15. </script>

复制代码

2.3 主动前缀

Vue 会主动为必要欣赏器前缀的 CSS 属性添加前缀（如 transform）
代码示比方下：

1. <script setup>
2. import { ref, reactive } from 'vue'
4. const isActive = ref(true)
5. const errorClass = ref('text-danger')  // 新增数组绑定用的类名
6. const fontSize = ref(20)              // 内联样式用字体大小
8. // 字体颜色
9. const colorStr = ref('red')
11. // 响应式样式对象
12. const styleObj = reactive({
13.   color: 'green',
14.   background: 'yellow'
15. })
16. </script>
18. <template>
19.   <!-- 1. 内联样式绑定 -->
20.   <div :style="{
21.     color: isActive ? 'red' : 'gray',
22.     fontSize: fontSize + 'px',
23.     'font-weight': 'bold'
24.   }">
25.     内联样式示例
26.   </div>
27.   <div>
28.     <p :style="{ color: colorStr }">Style1</p>
29.     <p :style="styleObj">Style2</p>
30.   </div>
31.   <!-- 3. 样式对象绑定（另一种写法） -->
32.   <div :style="styleObject">样式对象</div>
33. </template>
35. <script>
36. // 可选：在 script 中定义样式对象
37. export default {
38.   data() {
39.     return {
40.       styleObject: {
41.         backgroundColor: 'yellow',
42.         padding: '10px'
43.       }
44.     }
45.   }
46. }
47. </script>

复制代码

3. 最佳实践

1. 利用盘算属性优化
当样式逻辑复杂时，用盘算属性返回样式对象
2. 绑定组件子元素的样式
在组件上利用 :class 时，类名会添加到组件的根元素（需组件筹划支持）
3. CSS Modules 集成
在单文件组件中，通过 $style 利用模块化 CSS

1. <template>
2.   <div :class="$style.myClass">模块化样式</div>
3. </template>
5. <style module>
6. .myClass { color: red; }
7. </style>

复制代码

4. 常见应用场景

• 状态反馈：表单验证错误时高亮输入框
  
• 主题切换：动态切换暗黑模式/豁亮模式
  
• 动画控制：通过类名触发 CSS 动画
  
• 相应式布局：根据屏幕尺寸调解样式
  

5. 注意事项

• CSS 优先级：:style 的样式优先级高于外部 CSS
  
• 性能优化：克制频仍修改大量样式（发起用 CSS 类更换）
  
• 兼容性：某些 CSS 属性需注意欣赏器兼容性（如 position: sticky）