<template>
<div>{{ message }}</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const message = ref("hello");
</script>
<style scoped></style>
<template>
<div>{{ message ? 1 : 0 }}</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const message = ref(false);
</script>
<style scoped></style>
template>
<div>{{ message + 1 }}</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const message = ref(1);
</script>
<style scoped></style>
<template>
<div>{{ getName() }}</div>
</template>
<script setup lang="ts">
const getName = () => {
console.log('张三');
}
</script>
<style scoped></style>
在 Vue中，指令（Directive）是一种带有前缀
v-的特殊属性，可以被绑定到普通的 HTML 元素上，用于改变元素的行为或样式。
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>
v-if、v-else-if、v-else 和 v-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-if和v-show的行为和使用方法与 Vue 2 相同。
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>
v-model：用于在表单元素和组件中双向绑定数据。<!-- 绑定普通表单元素 -->
<input type="text" v-model="message">
<!-- 绑定自定义组件 -->
<my-component v-model="value"></my-component>
在 Vue 3 中，可以通过传递
modelValue和update:modelValue属性来自定义 v-model 在组件中的行为。
<!-- 自定义组件的 v-model -->
<my-component v-model:value="value"></my-component>
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>
v-html：用于渲染包含 HTML 代码的字符串。<!-- 渲染包含 HTML 代码的字符串 -->
<div v-html="htmlCode"></div>
注意：使用 v-html 指令可以直接将字符串中的 HTML 代码渲染到页面中。但需要注意的是，由于可以注入恶意脚本导致安全问题，因此应该尽量避免直接使用
v-html指令渲染未经信任的 HTML 代码。
v-text：用于渲染纯文本内容。<!-- 渲染纯文本内容 -->
<div v-text="text"></div>
使用 v-text 指令可以将指定的文本内容渲染到页面中，与 {{}} 插值表达式相比，
v-text可以避免潜在的XSS（跨站脚本攻击）攻击。
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>
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指令可以跳过指定元素及其子元素的编译过程，直接将指定内容渲染到页面中。该指令可用于优化大量静态内容的渲染性能。
v-cloak：用于防止页面闪烁。当使用直接在 DOM 中书写的模板时，可能会出现一种叫做“
未编译模板闪现”的情况：用户可能先看到的是还没编译完成的双大括号标签，直到挂载的组件将它们替换为实际渲染的内容。
<!-- 防止页面闪烁 -->
<style>
[v-cloak] {
display: none;
}
</style>
<div v-cloak>{{ message }}</div>
使用 v-cloak 指令会在 Vue 实例
编译完毕前保持元素隐藏，等到 Vue 实例准备就绪后再移除该指令。本质是通过display: none; 和display: block;实现的
v-once ：让元素及其子元素只渲染一次。该指令的作用是将元素的内容渲染为静态内容，即使后续数据发生了变化，也不会重新渲染该元素。<!-- 只渲染一次 -->
<div v-once>{{ message }}</div>
使用
v-once指令可以将指定元素及其子元素渲染为静态内容，即使后续数据发生了变化，也不会重新渲染该元素。该指令可用于优化大量静态内容的渲染性能。
注意：由于使用 v-once 指令会将元素及其子元素渲染为静态内容，因此如果后续数据发生了变化，就无法更新该元素。因此，需要在使用 v-once 指令时慎重考虑。
v-memo：大数据量场景下优化小部分性能
vue3.2新增指令，在组件和元素都可以使用，主要是可以缓存期望的类型是个数组any[]，该指令需要传入一个固定长度的依赖值数组进行比较。如果数组里的每个值都与最后一次的渲染相同，那么他的更新将会被跳过，甚至虚拟 DOM 的 vnode 创建也将被跳过，提升了性能。
注意：v-memo 传入空依赖数组 (v-memo=“[]”) 将与 v-once 效果相同。
总结：本篇文章主要介绍了vue 3 中的模板语法及内置指令的常用场景。