Vue指令

Vue指令

Vue会根据不同的【指令】，针对标签实现不同的【功能】。

指令：带有v-前缀的特殊标签属性

v-html：设置元素的 innerHTML 语法： v-html="表达式"

v-show vs v-if

• v-show
  • 作用：控制元素显示隐藏
  • 语法： v-show= "表达式"， 表达式结果为true显示，为false隐藏。
  • 原理：通过切换样式display: none 控制显示隐藏
  • 场景：需要频繁切换显示隐藏的模块
• v-if
  • 作用：控制元素显示隐藏（条件渲染）
  • 语法： v-if= "表达式"， 表达式结果为true显示，为false隐藏。
  • 原理：基于条件判断，是否创建或移除元素节点.
  • 场景：要么显示，要么隐藏，不频繁切换的场景

v-else 和 v-else-if

• 作用：辅助v-if进行判断渲染
• 语法：v-else = "表达式"; v-else-if="表达式"
• 注意：需要紧挨着v-if一起使用

v-on

• 作用：注册事件 = 添加监听 + 提供处理逻辑
• 语法：
  • v-on:事件名="内联语句"

  <button v-on:click="count++">v-on 内联语句 按钮 {{count}}</button>
  

  • v-on:事件名="methods中的函数名"

  <button v-on:click="addCount">v-on: methods中的函数名 按钮 {{count}}</button>
  <button v-on:click="delCount(1,2)">v-on: 传参 按钮 {{count}}</button>
  
  methods: {
    addCount () {
      this.count++
    },
    delCount(a, b) {
      console.log('传的参数',a,b)
      this.count--
    }
  }
  

• 简写：@事件名

v-bind

• 作用：动态的设置html的标签属性 → 例如：src url title 等
• 语法：v-bind:属性名="表达式"
• 简写：:属性名="表达式"
• 对样式的控制：

1、对 class 类的操作 语法： :class="对象/数组"

• 对象 → 键是类名，值是布尔值。值为true，有这个类，否则没有这个类

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

适用场景：一个类名来回切换

• 数组 → 数组中所有的类，都会添加到盒子上，本质是一个 class列表

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

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

2、对 style 的操作 语法：:style="样式对象"

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

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

v-for

• 作用：基于数据循环， 多次渲染整个元素 → 例如：数组、对象、数字等
• 语法：v-for = "(item, index) in 数组"
  • item为每一项，index为下标索引
  • key属性 = "唯一标识"

  key给列表项添加唯一标识，便于Vue进行列表项Diff比较复用

  原因：v-for的默认行为会尝试 原地修改元素（就地复用）

  注意点：

  1、key值只能是 字符串 或者 数字 类型

  2、key的值必须具有唯一性 3、不推荐使用index作为key的唯一值。因为如果在数组前面添加或删除项，index值会改变

v-model

• 作用：给表单元素使用，双向数据绑定 → 可以快速 获取 或 设置 表单元素内容，它会根据 控件类型 自动选取 正确的方法 来更新元素。
  • 数据变化 → 视图自动更新
  • 视图变化 → 数据自动更新
• 语法：v-model = "变量"

例如：

输入框 input:text → value

文本框 textarea → value

复选框 input:checkbox → checked

单选框 input:radio → checked

选择框 select → value

等等

指令修饰符.

通过 "." 指明一些指令 后缀，不同 后缀 封装了不同的处理操作 → 目的是为了 简化代码

例如：

• 事件修饰符

1、`.prevent` 修饰符告诉 `v-on` 指令对于触发的事件调用 `event.preventDefault()`

<form @submit.prevent="onSubmit">...</form>

2、@事件名.stop  →  阻止冒泡

• 按键修饰符

1、`@keyup.enter` → 键盘回车监听

• v-model修饰符

1、`v-model.trim` → 去除首尾空格

2、`v-model.number` → 转数字

自定义指令

自己定义的指令，可以 封装一些dom操作，扩展额外功能。

• 使用步骤：
  • 1、注册（全局注册 或 局部注册）

  在 inserted 钩子函数中，配置指令dom逻辑

  • 2、标签上 v-指令名 使用

问题：当页面加载时，该元素将获得焦点(注意：`autofocus` 在移动版 Safari 上不工作)
// 未定义指令实现方式：
<input ref="inp" />

mounted() {
    this.$refs.inp.focus()
}

// 自定义指令 实现方式
1、全局注册 - 语法
    //main.js
    // 注册一个全局自定义指令 `v-focus`  
   Vue.directive('focus', {  
       // 当被绑定的元素插入到 DOM 中时……  
       inserted: function (el) {  
           // 聚焦元素  
           el.focus()  
       }  
   })
2、局部注册 - 语法
    // 组件中
    directives: {  
       focus: {  
           // 指令的定义  
           inserted: function (el) {  
               el.focus()  
           }  
       }  
   }
   
3、模板中使用：
    <input v-focus>

自定义指令—— 指令的值

• 语法：在绑定指令时，可以通过 "=" 的形式 为 指令 绑定具体的参数值

v-指令名="指令值"

<div v-color="color">我是内容</div>

• 通过 binding.value 可以拿到指令值，指令值修改会 触发update函数，通过update函数，可以监听到指令值的变化，从而进行 dom 的更新操作

directives: {
    color: {
        inserted (el, binding) {
            el.style.color = binding.value
        },
        update (el, binding) {
            el.style.color = binding.value
        }
    }
}