1. 插值表达式

1.1. 声明变量可直接在模板中使用,采用{{变量名称}}的方式

<template>
  <div>{{ message }}</div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const message = ref("hello");
</script>

<style scoped></style>

1.2. 模板语法支持三元表达式

<template>
  <div>{{ message ? 1 : 0 }}</div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const message = ref(false);
</script>

<style scoped></style>

1.3. 模板语法支持运算

template>
  <div>{{ message + 1 }}</div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const message = ref(1);
</script>

<style scoped></style>

1.4. 模板语法支持方法调用

<template>
  <div>{{ getName() }}</div>
</template>

<script setup lang="ts">
const getName = () => {
  console.log('张三');
}
</script>

<style scoped></style>

2. 指令

在 Vue中,指令(Directive)是一种带有前缀 v- 的特殊属性,可以被绑定到普通的 HTML 元素上,用于改变元素的行为或样式

  • 常用的内置指令如下:
    在这里插入图片描述

2.1. v-bind用于绑定属性或动态绑定对象的值到元素上

<!-- 绑定普通属性 -->
<div v-bind:class="{'active': isActive}"></div>

<!-- 绑定组件属性 -->
<my-component v-bind:prop-name="value"></my-component>

在 Vue 3 中,可以使用缩写形式:替代 v-bind:。

<!-- v-bind 缩写 -->
<div :class="{'active': isActive}"></div>

2.2. v-ifv-else-ifv-elsev-show用于控制元素是否显示或隐藏

<!-- v-if 指令 -->
<div v-if="isNum === 0">Hello v-if!</div>

<!-- v-else-if 指令 -->
<div v-else-if="isNum === 1">Hello v-else-if!</div>

<!-- v-else 指令 -->
<div v-else>Hello v-else!</div>

<!-- v-show 指令 -->
<div v-show="isShow">Hello v-show!</div>

在 Vue 3 中,v-ifv-show 的行为和使用方法与 Vue 2 相同

2.3. v-for用于循环渲染数组或对象

<!-- 渲染数组 -->
<ul>
  <li v-for="(item, index) in items" :key="index">{{ item }}</li>
</ul>

<!-- 渲染对象 -->
<ul>
  <li v-for="(value, key) in object" :key="key">{{ key }}: {{ value }}</li>
</ul>

在 Vue 3 中,可以使用新的语法糖 v-for 来循环渲染整数区间

<!-- 循环渲染整数区间 -->
<div v-for="i in 10" :key="i">{{ i }}</div>


2.4. v-model用于在表单元素和组件中双向绑定数据

<!-- 绑定普通表单元素 -->
<input type="text" v-model="message">

<!-- 绑定自定义组件 -->
<my-component v-model="value"></my-component>

在 Vue 3 中,可以通过传递 modelValueupdate:modelValue 属性来自定义 v-model 在组件中的行为。

<!-- 自定义组件的 v-model -->
<my-component v-model:value="value"></my-component>

2.5. v-on用于绑定事件监听器

<!-- 绑定普通事件 -->
<button v-on:click="handleClick">Click me!</button>

<!-- 绑定修饰符 -->
<button v-on:keyup.enter="handleEnter">Press Enter!</button>

在 Vue 3 中,可以使用缩写形式 @ 替代 v-on:。

<!-- v-on 缩写 -->
<button @click="handleClick">Click me!</button>

2.6. v-html用于渲染包含 HTML 代码的字符串

<!-- 渲染包含 HTML 代码的字符串 -->
<div v-html="htmlCode"></div>

注意:使用 v-html 指令可以直接将字符串中的 HTML 代码渲染到页面中。但需要注意的是,由于可以注入恶意脚本导致安全问题,因此应该尽量避免直接使用 v-html 指令渲染未经信任的 HTML 代码。

2.7. v-text用于渲染纯文本内容

<!-- 渲染纯文本内容 -->
<div v-text="text"></div>

使用 v-text 指令可以将指定的文本内容渲染到页面中,与 {{}} 插值表达式相比,v-text 可以避免潜在的 XSS(跨站脚本攻击)攻击。

2.8. v-slot用于在父组件中定义插槽,在子组件中使用插槽内容

<!-- 父组件中定义插槽 -->
<template>
  <child-component>
    <template v-slot:header>
      <h2>这是标题</h2>
    </template>
    <template v-slot:default>
      <p>这是正文</p>
    </template>
  </child-component>
</template>

<!-- 子组件中使用插槽内容 -->
<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
  </div>
</template>

使用 v-slot 指令可以在父组件中定义插槽,然后在子组件中使用插槽内容。v-slot 指令还可以简化为 # 符号的缩写形式。

<!-- 使用 # 符号的缩写形式 -->
<template v-slot:header>
  <h2>这是标题</h2>
</template>

<template #header>
  <h2>这是标题</h2>
</template>

2.9. v-pre用于跳过指定元素及其子元素的编译过程

<!-- 跳过编译过程, 此处并不会将messag当成一个变量渲染出来,最终页面展示的是{{ meaage }} -->
<template>
  <div v-pre>{{ message }}</div> 
</template>

<script setup lang="ts">
import { ref } from 'vue';
let message = ref('hello')
</script>

<style scoped></style>

使用 v-pre 指令可以跳过指定元素及其子元素的编译过程,直接将指定内容渲染到页面中。该指令可用于优化大量静态内容的渲染性能

2.10. v-cloak用于防止页面闪烁

当使用直接在 DOM 中书写的模板时,可能会出现一种叫做“未编译模板闪现”的情况:用户可能先看到的是还没编译完成的双大括号标签,直到挂载的组件将它们替换为实际渲染的内容。

<!-- 防止页面闪烁 -->
<style>
  [v-cloak] {
    display: none;
  }
</style>

<div v-cloak>{{ message }}</div>

使用 v-cloak 指令会在 Vue 实例编译完毕前保持元素隐藏,等到 Vue 实例准备就绪后再移除该指令。本质是通过display: none; 和display: block;实现

2.11. v-once让元素及其子元素只渲染一次。该指令的作用是将元素的内容渲染为静态内容,即使后续数据发生了变化,也不会重新渲染该元素。

<!-- 只渲染一次 -->
<div v-once>{{ message }}</div>

使用 v-once 指令可以将指定元素及其子元素渲染为静态内容,即使后续数据发生了变化,也不会重新渲染该元素。该指令可用于优化大量静态内容的渲染性能
注意:由于使用 v-once 指令会将元素及其子元素渲染为静态内容,因此如果后续数据发生了变化,就无法更新该元素。因此,需要在使用 v-once 指令时慎重考虑。

2.12. v-memo大数据量场景下优化小部分性能

vue3.2新增指令,在组件和元素都可以使用,主要是可以缓存 期望的类型是个数组any[],该指令需要传入一个固定长度的依赖值数组进行比较。如果数组里的每个值都与最后一次的渲染相同,那么他的更新将会被跳过,甚至虚拟 DOM 的 vnode 创建也将被跳过,提升了性能。

官方文档关于v-memo的介绍

注意:v-memo 传入空依赖数组 (v-memo=“[]”) 将与 v-once 效果相同

  • 与 v-for 一起使用
  • v-memo 仅用于性能至上场景中的微小优化,应该很少需要。最常见的情况可能是有助于渲染海量 v-for 列表 (长度超过 1000 的情况)

总结:本篇文章主要介绍了vue 3 中的模板语法及内置指令的常用场景。

Logo

前往低代码交流专区

更多推荐