深入理解 Vue 中的指针操作(一)

☘️引言

Vue.js 是一款非常流行且功能强大的前端框架，它以其响应式的数据绑定和组件化的开发方式赢得了众多开发者的喜爱。而在 Vue.js 中，指针操作是一个非常重要的概念，它能够帮助我们更好地处理和操作数据。本篇博客将深入探讨 Vue 中的指针操作，分享一些实用的技巧和注意事项。

☘️什么是指针

在 Vue 中，指针操作是指对数据的引用进行操作的过程。它包括对数据的读取、修改和监听等操作。Vue 通过使用指针来追踪数据的改变，并在相关数据发生改变时，自动更新相关的视图。

☘️基本用法

v-if和v-show指令

在 Vue 中，v-if 和 v-show 是两个常用的指令，用于控制元素的显示和隐藏。下面我将详细介绍这两个指令的特点及应用场景。

v-if

v-if 是 Vue 中的一个条件指令，用于根据条件决定元素是否渲染到 DOM 中。当 v-if 的值为真时，元素会被渲染到 DOM 中，反之则不会。
v-if 具有以下特点：

• v-if 会根据条件动态创建或销毁元素，因此可以在渲染时减少 DOM 节点数量，从而提高性能；
• v-if 的判断语句可以是任意的 JavaScript 表达式；
• 当 v-if 的值发生改变时，元素会被重新渲染，已有的状态会被销毁并重新创建。
  以下是一个使用 v-if 的示例代码：

<template>
  <div>
    <p v-if="show">这是一个会显示的段落p>
  div>
template>
<script>
export default {
  data() {
    return {
      show: false
    }
  }
}
script>

v-show

v-show 也是一个条件指令，和 v-if 不同的是，v-show 仅仅是控制元素的显示和隐藏，而不会根据条件销毁或创建元素。
v-show 具有以下特点：

• v-show 不会重新渲染元素，而只是更改 CSS 的 display 属性控制元素的显示和隐藏；
• v-show 的判断语句仍然可以是任意的 JavaScript 表达式；
• 当 v-show 的值发生改变时，Vue 会自动更新元素的可见性。
  以下是一个使用 v-show 的示例代码：

<template>
  <div>
    <p v-show="show">这是一个会隐藏的段落p>
  div>
template>

<script>
export default {
  data() {
    return {
      show: false
    }
  }
}
script>

v-if VS v-show

官网中针对v-if和v-show的区别给出解释：

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

v-bind绑定指令

在 Vue 中，v-bind 是一条指令，用于动态地将数据绑定到 HTML 元素的属性上。通过 v-bind，可以在 HTML 元素上绑定 Vue 实例中的数据，使其可以动态地更新。

v-bind 的用法有两种形式：

1. 缩写形式 【:】
   可以使用冒号 : 来缩写 v-bind。例如，:src=“imageURL” 是 v-bind:src=“imageURL” 的缩写形式。
   示例代码：

<template>
  <img :src="imageURL" :alt="altText">
template>
<script>
export default {
  data() {
    return {
      imageURL: 'path/to/image.jpg',
      altText: 'An image'
    }
  }
}
script>

2. 完整写法 - v-bind
   在指令中使用 v-bind 前缀。例如，v-bind:src=“imageURL” 可以将 Vue 实例中的 imageURL 属性绑定到元素的 src 属性上。
   示例代码：

<template>
  <img v-bind:src="imageURL" v-bind:alt="altText">
template>
<script>
export default {
  data() {
    return {
      imageURL: 'path/to/image.jpg',
      altText: 'An image'
    }
  }
}
script>

v-bind 可以绑定到 HTML 元素的任何属性。常见的使用场景包括：

• ️绑定 src 属性：
• ️绑定 class 属性：
• ️绑定 style 属性：
• ️绑定表单元素的属性：

v-on指令

在 Vue.js 中，v-on 指令用于绑定事件处理函数。它可以监听 DOM 事件，如 click、keydown 等等，也可以监听自定义事件。

v-on 的使用方式有两种：

1. 缩写形式 - @
   在指令中使用 @ 缩写前缀。例如，@click=“handler” 可以使用 v-on:click=“handler” 作为缩写形式。
   示例代码：

<template>
  <button @click="handleClick">Click mebutton>
template>
<script>
export default {
  methods: {
    handleClick() {
      console.log('Button clicked')
    }
  }
}
script>

2. 完整写法 - v-on
   在指令中使用 v-on 前缀。例如，v-on:click=“handler” 可以使用 @click=“handler” 作为缩写形式。
   示例代码：

<template>
  <button v-on:click="handleClick">Click mebutton>
template>
<script>
export default {
  methods: {
    handleClick() {
      console.log('Button clicked')
    }
  }
}
script>

事件修饰符

在 Vue.js 中，事件修饰符可以用于修改事件的行为。Vue.js 提供了一些事件修饰符，用于处理常见的事件情况。以下是一些常用的事件修饰符：

.stop

➡阻止事件冒泡，相当于调用 event.stopPropagation() 方法。

<button @click.stop="handleClick">点击button>

.prevent

➡阻止事件的默认行为，相当于调用 event.preventDefault() 方法。

<form @submit.prevent="handleSubmit">
  <button type="submit">提交button>
form>

.capture

➡使用捕获模式监听事件，即在父组件触发事件之前先触发子组件的事件。

<div @click.capture="handleClick">父组件div>

.self：

➡只在目标元素自身触发事件时才调用事件处理程序，不包括子元素触发的事件。

<div @click.self="handleClick">父元素div>

.once

➡事件只触发一次，即只调用一次事件处理程序。

<button @click.once="handleClick">点击一次button>

按键修饰符

在 Vue.js 中，你可以使用按键修饰符来处理键盘事件（如按下键盘按键）时的行为。按键修饰符使用特定的键别名来指定所需的按键。以下是一些常用的按键修饰符：

.enter

➡处理回车键 (keyCode 为 13)。

<input v-on:keyup.enter="submitForm">

.tab

➡处理 Tab 键 (keyCode 为 9)。

<input v-on:keyup.tab="focusNextInput">

.delete

➡处理删除键 (keyCode 为 46)。

<input v-on:keyup.delete="deleteItem">

.esc

➡处理 Esc 键 (keyCode 为 27)。

<input v-on:keyup.esc="cancelAction">

.space

➡处理空格键 (keyCode 为 32)。

<button v-on:keyup.space="playSound">播放声音button>

.up、.down、.left、.right

➡处理上、下、左、右箭头键 (keyCode 分别为 38、40、37、39)。

<input v-on:keyup.up="selectPreviousOption">
<input v-on:keyup.down="selectNextOption">

请注意，按键修饰符只能应用于键盘事件（如 v-on:keyup、v-on:keydown、v-on:keypress 等），而不是鼠标事件或其他事件。

绑定自定义事件

v-on 除了绑定原生 DOM 事件之外，还可以监听子组件触发的自定义事件。

示例代码：

在子组件内部，使用 $emit 方法来触发自定义事件，并传递需要的数据作为参数：

<template>
  <button @click="handleClick">Click mebutton>
template>
<script>
export default {
  methods: {
    handleClick() {
      // 触发自定义事件，并传递数据
      this.$emit('custom-event', 'Custom event payload')
    }
  }
}
script>

在父组件中，可以使用 v-on 或 @ 来监听子组件触发的自定义事件，并执行相应的处理逻辑：

<template>
  <child-component @custom-event="handleCustomEvent">child-component>
template>
<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleCustomEvent(payload) {
      console.log('Custom event triggered:', payload)
      // 执行自定义事件的处理逻辑
    }
  }
}
script>

在上述示例中，当子组件内的按钮被点击时，会触发自定义事件 custom-event，并将 ‘Custom event payload’ 作为数据传递给父组件的 handleCustomEvent 方法。父组件中的方法会接收到传递的数据并处理。

未完。。。。。。。。。

---

博客主页：魔王-T

大鹏一日同风起 扶摇直上九万里

❤️感谢大家点赞收藏⭐评论✍️

---