Vue.js内置指令全解析：从基础到实践

2024-11-05 19:27:22

文章目录

  • 前言
    • Vue.js 内置指令详解
      • v-text
      • v-html
      • v-show
      • v-if
      • v-else
      • v-else-if
      • v-for
      • v-on
      • v-bind
      • v-module
      • v-slot
      • v-pre
      • v-once
      • v-memo
      • v-cloak
    • 结尾

前言

在Vue.js的世界里，指令是连接数据和视图的桥梁，它们为开发者提供了一种声明式的方法来处理常见的任务。本文将详细介绍Vue.js中的内置指令，包括它们的用法、示例以及浏览器执行的结果。通过这些指令，我们可以更高效地构建动态和响应式的用户界面。在开始之前，建议读者查阅Vue.js的官方文档，以便更深入地理解每个指令的内部机制和最佳实践。

Vue.js 内置指令详解

v-text

v-text指令用于更新元素的文本内容，如果渲染的内容包含HTML标签，它们不会被解析，类似于JavaScript中的innerText属性

示例

<template>
  <div>
    <h1>Vue的内置指令</h1>
    <p v-text="msg1"></p>
    <p v-text="msg2"></p>
  </div>
</template>

<script setup>
  const msg1 = '这是没有html语句的v-text'
  const msg2 = '<strong>这是有html语句的v-text</strong>'
</script>

<style scoped>

</style>

游览器执行的结果

在这里插入图片描述

v-html

v-html指令用于更新元素的innerHTML。与v-text不同，如果渲染的内容包含HTML标签，它们会被解析。

示例

<template>
  <div>
    <h1>Vue的内置指令</h1>
    <p v-html="msg3"></p>
    <p v-html="msg4"></p>
  </div>
</template>

<script setup>
  const msg3 = '这是没有html语句的v-html'
  const msg4 = '<strong>这是有html语句的v-html</strong>'
</script>

游览器执行的结果

在这里插入图片描述

v-show

基于表达式值的真假性，来改变元素的可见性。

传入一个布尔类型的值，控制dom元素的display显隐，元素会存在dom树中

示例

<template>
  <div>
    <h1>Vue的内置指令</h1>
    <p v-show="true">这是一条v-show控制显示dom元素</p>
    <p v-show="false">这是一条v-show控制隐藏dom元素</p>
  </div>
</template>

游览器运行结果

在这里插入图片描述

v-if

基于表达式值的真假性，来条件性地渲染元素或者模板片段。

如果初始条件是假，那么其内部的内容根本都不会被渲染。元素不会存在DOM树中

频繁使用v-if控制显隐，增加游览器渲染压力

示例

<template>
  <div>
    <h1>Vue的内置指令</h1>
    <p v-if="true">这是一条v-if控制显示dom元素</p>
    <p v-if="false">这是一条v-if控制隐藏dom元素</p>
  </div>
</template

游览器运行结果

在这里插入图片描述

v-else

表示 v-if 或 v-if / v-else-if 链式调用的“else 块”。

上一个兄弟元素必须有 v-if 或 v-else-if。

示例

<template>
  <div>
    <h1>Vue的内置指令</h1>
    <p v-if="age>18">成年人</p>
    <p v-else>未成年</p>
  </div>
</template>

<script setup>
  const age = 17
</script>

游览器运行结果

在这里插入图片描述

v-else-if

表示 v-if 的“else if 块”。可以进行链式调用。

上一个兄弟元素必须有 v-if 或 v-else-if。

示例

<template>
  <div>
    <h1>Vue的内置指令</h1>
    <p v-if="age>65">老年人</p>
    <p v-else-if="age>18">成年人</p>
    <p v-else>未成年</p>
  </div>
</template>

<script setup>
  const age = 25
</script>

游览器运行结果

在这里插入图片描述

v-for

基于原始数据多次渲染元素或模板块。

语法

<div v-for="(item, index) in items"></div>
<div v-for="(value, key) in object"></div>
<div v-for="(value, name, index) in object"></div>

v-for 的默认方式是尝试就地更新元素而不移动它们。要强制其重新排序元素，你需要用特殊 attribute key 来提供一个排序提示：

<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

示例

<template>
  <div>
    <h1>Vue的内置指令</h1>
    <p v-for="item in data">{{ item }}</p>
  </div>
</template>

<script setup>
const data = ['html','css','javascript']
</script>

游览器运行结果

在这里插入图片描述

v-on

给元素绑定事件监听器。

可以缩写成 @

  • 参数：event (使用对象语法则为可选项)

当监听原生 DOM 事件时，方法接收原生事件作为唯一参数。如果使用内联声明，声明可以访问一个特殊的 $event 变量：v-on:click="handle('ok', $event)"。

示例

<!-- 方法处理函数 -->
<button v-on:click="doThis"></button>

<!-- 动态事件 -->
<button v-on:[event]="doThis"></button>

<!-- 内联声明 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 使用缩写的动态事件 -->
<button @[event]="doThis"></button>

<!-- 停止传播 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认事件 -->
<button @click.prevent="doThis"></button>

<!-- 不带表达式地阻止默认事件 -->
<form @submit.prevent></form>

<!-- 链式调用修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 按键用于 keyAlias 修饰符-->
<input @keyup.enter="onEnter" />

<!-- 点击事件将最多触发一次 -->
<button v-on:click.once="doThis"></button>

<!-- 对象语法 -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

v-bind

动态的绑定一个或多个 attribute，也可以是组件的 prop。

可以缩写成L: 或 .

示例

<template>
  <div>
    <h1>Vue的内置指令</h1>
    <p :class="p1">这是一个p标签</p>
    <img :src="img" alt="">
  </div>
</template>

<script setup>
  const p1 = 'my-custom-color'
  const img = 'https://img2.baidu.com/it/u=1359472001,3978182478&fm=253&fmt=auto&app=120&f=JPEG?w=885&h=500'
</script>

<style scoped>
.my-custom-color{
  color: red;
}
</style>

游览器运行结果

在这里插入图片描述

v-module

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

根据表单输入元素或组件输出的值而变化

  • 仅限：
    • <input>
    • <select>
    • <textarea>
    • components

示例

<template>
  <div>
    <input v-model="msg" type="text">
    <p>{{ msg }}</p>
  </div>
</template>

<script setup>
import {ref} from 'vue'
const msg = ref('这是一条双向绑定的数据')
</script>

游览器运行结果

在这里插入图片描述

v-slot

用于定义插槽的内容，是组件插槽系统的一个部分。

示例

vue

<template>
  <div>
    <h1>Vue的内置指令</h1>
    <child-component>
      <template v-slot:default="slotProps">
        <p>{{ slotProps.message }}</p>
      </template>
    </child-component>
  </div>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue'
</script>

游览器运行结果

ChildComponent 组件的默认插槽会被填充，显示传递给插槽的 message。

v-pre

跳过这个元素和它的子元素的编译过程。

示例

vue

<template>
  <div>
    <h1>Vue的内置指令</h1>
    <span v-pre>{{ { message: 'Hello Vue!' } }}</span>
  </div>
</template>

游览器运行结果

span 标签会直接显示 { message: 'Hello Vue!' } 而不是解析为对象。

v-once

只渲染元素或子元素一次，随后的 DOM 更新不会影响它们。

示例

vue

<template>
  <div>
    <h1>Vue的内置指令</h1>
    <p v-once>这个内容只会渲染一次</p>
  </div>
</template>

游览器运行结果

由于 v-once 指令使得内容只渲染一次，所以任何后续的数据变化都不会更新这个 p 标签的内容。

v-memo

这个指令用于缓存模板的一部分，以便在数据变化时避免不必要的重新渲染。

示例

vue

<template>
  <div>
    <h1>Vue的内置指令</h1>
    <div v-memo="memoKey">
      <!-- 这里是一些复杂的模板 -->
    </div>
  </div>
</template>

<script setup>
  const memoKey = 'unique-key'
</script>

游览器运行结果

只有当 memoKey 对应的数据发生变化时，这个 div 及其子元素才会重新渲染。

v-cloak

这个指令用于在 Vue.js 应用完全编译完成之前保持原始内容可见。

示例

vue

<template>
  <div>
    <h1>Vue的内置指令</h1>
    <p v-cloak>{{ message }}</p>
  </div>
</template>

<script setup>
  const message = 'Hello Vue!'
</script>

游览器运行结果

在 Vue.js 编译完成之前，p 标签会显示原始内容，编译完成后，会显示 Hello Vue!。

结尾

通过本文的介绍，我们可以看到Vue.js的内置指令是如何简化前端开发的。它们不仅提高了开发效率，还增强了代码的可读性和可维护性。掌握这些指令，你将能够更加灵活地构建响应式和动态的Web应用。希望这篇文章能够帮助你更好地理解和使用Vue.js的指令系统。如果你对某个指令有更深入的问题或想要了解更多细节，请访问Vue.js的官方文档。

上一篇：前段（vue）


下一篇：C#-类：声明类、声明类对象