Vue内置指令

1151字约4分钟

2024-11-29

`v-show` 根据条件切换元素的可见性

isShow值为布尔值

详解

v-show 通过设置内联样式的 display CSS 属性来工作，当元素可见时将使用初始 display 值。当条件改变时，也会触发过渡效果。

<div v-show="isShow"></div>

`v-if`/`v-else`/`v-else-if` 根据条件渲染元素

isShow值可以为任意值

详解

v-if 是一个指令，用于根据条件渲染元素。根据条件值，创建/销毁元素。
在vue3中优先级比v-for更高，不推荐在同一元素上使用这两个指令。
频繁修改条件会有一定性能消耗，此场景就更推荐v-show.

此处的v-else和v-else-if必须紧跟在v-if或v-else-if后面，否则会报错。类似js的条件判断渲染

<!-- 案例展示 -->
<!-- isShow 为1  dom创建，反之不创建 -->
<div v-if="isShow === 1 "></div>
<!-- isShow 为2  dom创建，反之不创建 -->
<div v-else-if="isShow===2"></div>
<!-- isShow 既不是1也不是2  dom创建，反之不创建 -->
<div v-else></div>

`v-for` 循环渲染元素

items为数组或对象
key值必须唯一

详解

v-for 会根据 items 的长度创建多个元素，并使用 index 作为 key 值。
key 值用于 Vue 在更新 DOM 时识别元素，以提高性能。
key值相同且不变动，会进行节点复用。

<div v-for="(item,index) in items" :key="item.id">
  {{ item.text }}
</div>
<script lang="ts">
const items = [
  { id: 1, text: 'Item 1' },
  { id: 2, text: 'Item 2' },
  { id: 3, text: 'Item 3' },
]
</script>

`v-on`（缩写:`@`）监听事件

事件修饰符

stop: 阻止事件冒泡
prevent: 阻止默认事件
capture: 事件捕获
self: 只当事件是从侦听器绑定的元素本身触发时才触发回调
once: 事件只触发一次
passive: 表示侦听器永远不会调用 preventDefault
native: 监听原生事件
left/right/middle: 监听鼠标左键/右键/中键
click/dblclick/mousedown/mouseup/mousemove/mouseover/mouseout/mouseenter/mouseleave: 监听鼠标事件
keyup/keydown/keypress: 监听键盘事件

使用案例

<!-- 绑定点击事件 -->
<button @click="doThis"></button>
<!-- 停止点击事件冒泡传播 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认事件 -->
<button @click.prevent="doThis"></button>
<!-- 监听按键事件,并在为enter时触发-->
<input @keyup.enter="onEnter" />
<!-- 点击事件将最多触发一次 -->
<button @click.once="doThis"></button>

`v-model` 双向绑定

在表单输入元素或组件上创建双向绑定。

事件修饰符

lazy: 在“change”事件而不是“input”事件后更新数据
number: 自动将用户的输入值转为数值类型
trim: 自动过滤用户输入的首尾空白字符

使用案例

<!-- 绑定input输入框 -->
<input v-model="message" />
<!-- 绑定textarea 会过滤前后空格内容 -->
<textarea v-model.trim="message"></textarea>
<!-- 绑定input 且会将输入内容转为数字 -->
<input  v-model.number="checked" />

`v-solt`缩写（`#`）插槽

插槽是 Vue 中用于分发内容的机制，可以用于组件之间的内容传递。
子组件会根据父组件传递的插槽名称，将内容插入到对应的插槽位置。

<!-- 父组件 -->
<template>
  <div>
    <child>
      <template #header>
        <h1>Header</h1>
      </template>
      <template #default>
        <p>Default content</p>
      </template>
      <template #footer>
        <p>Footer</p>
      </template>
    </child>
  </div>
</template>

<!-- 子组件 -->
<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

`v-bind`（缩写:`:`）动态绑定属性

属性值可以是字符串、对象、数组、布尔值、函数等

详解

v-bind 用于动态绑定属性，可以绑定任何属性，包括 class 和 style。
v-bind 可以绑定多个属性，多个属性之间用空格分隔。
v-bind 可以绑定对象，对象中的属性名和属性值可以动态改变。
v-bind 可以绑定数组，数组中的元素可以是字符串、对象、数组等。

使用案例

<!-- 绑定class -->
<div :class="{'active': isActive}"></div>
<!-- 绑定style -->
<div :style="{color: color}"></div>
<!-- 绑定多个属性 -->
<div :class="{'active': isActive}" :style="{color: color}"></div>
<!-- 绑定对象 -->
<div :class="{active: isActive, 'text-danger': hasError}"></div>
<!-- 绑定数组 -->
<div :class="[isActive ? 'active' : '', errorClass]"></div>

`v-text` 更新元素的文本内容

msg值必须为字符串

<span v-text="msg"></span>
<!-- 等同于 -->
<span>{{msg}}</span>

`v-html` 更新元素的html内容

html值为字符串，会被当做普通HTML解析、vue语法不会被解析。

<div v-html="html"></div>

`v-once` 只渲染一次

v-once 指令用于标记元素或组件只渲染一次，即使数据发生变化，也不会重新渲染。
v-once 指令可以用于优化性能，避免不必要的渲染。

<template>
  <div v-once>
    <p>{{ message }}</p>
  </div>
</template>