常用指令

1. v-text 用来显示文本

<template>
<div v-text="str">
    <!-- div 里面显示 hello -->
</div>
</template>

<script setup lang="ts">
const str: string = "hello"
</script>

2. v-html 用来显示富文本

<template>
<div v-html="str">
    <!-- div 里面显示 红色的 content -->
</div>
</template>

<script setup lang="ts">
const str: string = "<section style='color:red'>content</section>"
</script>

3. v-if、v-else-if、v-else 控制元素的存在与消失

本质上是添加与删除 DOM 元素

<template>
<div v-if="num === 1">num 为 1 时显示的内容</div>
<div v-else-if="num === 2">num 为 2 时显示的内容</div>
<div v-else>num 既不为 1 也不为 2 时显示的内容</div>
</template>

<script setup lang="ts">
let num: number = 1
</script>

4. v-show 控制元素的显示与隐藏

本质上是设置 DOM 元素的 display 属性

<template>
<div v-show="flag">内容</div>
<!-- 根据 flag 决定 div 里面是否显示内容 -->
</template>

<script setup lang="ts">
let flag: boolean = false
</script>

5. v-for 循环渲染

单层渲染

<template>
<div v-for="(item, index) in arr" :key="index">{{ index }} - {{ item }}</div>
</template>

<script setup lang="ts">
let arr: string[] = ["张三", "李四", "王五"]
</script>

// 渲染内容
// 0 - 张三
// 1 - 李四
// 2 - 王五

嵌套渲染

<template>
<div v-for="(item1, index1) in arr" :key="index1">
    <span v-for="(item2, index2) in item1" :key="index2">
        {{ item2 }}
    </span>
</div>
</template>

<script setup lang="ts">
let arr: number[][] = [[1,2,3],[4,5,6],[7,8,9]]
</script>

// 渲染内容
// 123
// 456
// 789

6. v-on: / @

静态绑定

<template>
<!-- <div v-on:click="clickHandler">点我</div> -->
<div @click="clickHandler">点我</div>
</template>

<script setup lang="ts">
const clickHandler = () => {
    console.log("点击了")
}
</script>

动态绑定

<template>
<div @[event]="clickHandler">点我</div>
</template>

<script setup lang="ts">
let event: string = "click"
const clickHandler = () => {
    console.log("点击了")
}
</script>

一些事件修饰符

@[event].stop 阻止冒泡
@[event].capture 捕获阶段触发，冒泡阶段不触发（默认冒泡阶段触发）
@[event].once 只能点击一次
@[event].self 只有再 event.target 是当前元素自身时触发
@[event].prevent 阻止默认行为（阻止 a 链接的跳转、阻止表单的提交等）

7. v-bind: / : 单向绑定

动态绑定属性

<template>
<div :id="id"></div>
</template>

<script setup lang="ts">
const id: string = "abc"
</script>

动态绑定样式

<template>
<div :style="style"> 内容 </div>
</template>

<script setup lang="ts">
const style: string = "color: red"
</script>

// 渲染内容：字体是红色的 内容

动态绑定类

注意：可以同时绑定一个静态的和一个动态的

<template>

<!-- <div :class="className"> 内容 </div> -->
<div :class="['class1', 'class2']" class="class3"> 内容 </div>
</template>

<script setup lang="ts">
let className = ['class1', 'class2']
</script>

<style scoped>
.class1 {
    background-color: red;
}
.class2 {
    color: blue;
}
.class3 {
    border: 5px solid green;
}
</style>

也可以在动态绑定类里面写表达式

<template>

<div :class="[flag ? 'class1' : 'class2']"> 内容 </div>

</template>

<script setup lang="ts">
const flag: boolean = false
</script>

<style scoped>
.class1 {
    background-color: red;
}
.class2 {
    color: blue;
}
</style>

8. v-model:value= / v-model= 表单数据的双向绑定

注意：需要配合响应式使用

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

<script setup lang="ts">
import { ref } from 'vue'
let content: object = ref("输入的内容")
</script>

9. v-once 表示只渲染一次，后面不管状态是否改变，均不再渲染

10. v-memo 根据条件是否改变决定是否更新

(1) 可以接收的形式：v-memo="myVal === true" 或者 v-memo="[valOne, valTwo]"
(2) 当其依赖的数据发生变化，v-memo 所对应的 DOM 包括子集才会重新渲染