Vue 3第三章：模板语法及指令介绍

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:。

<div :class="{'active': isActive}">div>

2.2. v-if、v-else-if、v-else 和 v-show：用于控制元素是否显示或隐藏。

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


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


<div v-else>Hello v-else!div>


<div v-show="isShow">Hello v-show!div>

在 Vue 3 中，v-if 和 v-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 中，可以通过传递 modelValue 和 update:modelValue 属性来自定义 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:。

<button @click="handleClick">Click me!button>

2.6. v-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：用于跳过指定元素及其子元素的编译过程。

<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 中的模板语法及内置指令的常用场景。