vue3 模板语法 & vue指令

指令

v- 开头都是vue 的指令

v-text 用来显示文本

v-html 用来展示富文本

v-if 用来控制元素的显示隐藏（切换真假DOM）

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

v-else v-if条件收尾语句

v-show 用来控制元素的显示隐藏（display none block Css切换）

v-on 简写@ 用来给元素添加事件

v-bind 简写: 用来绑定元素的属性Attr

v-model 双向绑定

v-for 用来遍历元素

v-on修饰符 冒泡案例

v-once 性能优化只渲染一次

v-memo 性能优化会有缓存

修饰符	作用
.stop	阻止事件冒泡
.prevent	阻止默认行为（如 <a> 跳转）
.capture	使用事件捕获模式
.self	只当事件在该元素本身触发时才处理
.once	事件只触发一次
.passive	提升滚动性能（常用于 touch/wheel）

动态事件

<template>
  <button @[event]="xxx">点击</button>
</template>
 
<script setup lang="ts">

const event = "click"
const xxx = ()=>{
    console.log('点击')
}

</script>

<style>

</style>

v-bind 绑定class

<template>
  <div :class="[flag ? 'active' : 'other', 'h']">12323</div>
  
  <div :class="flag1">{{flag1}}</div>
</template>
 
 
<script setup lang="ts">
//第一种
const flag: boolean = false;

//第二种
type Cls = {
    other: boolean,
    h: boolean
}
const flag1: Cls = {
    other: false,
    h: true
};
 

</script>
 
 
 
<style>
.active {
  color: red;
}
.other {
  color: blue;
}
.h {
  height: 300px;
  border: 1px solid #ccc;
}
</style>

v-bind 绑定style

<template>
  <div :style="style">2222</div>
</template>

<script setup lang="ts">

type Style = {
  height: string,
  color: string
}
 
const style: Style = {
  height: "300px",
  color: "blue"
}
 
</script>

<style>

</style>

v-model

<template>
  <input v-model="message" type="text" />
  <div>{{ message }}</div>
</template>
 
 
<script setup lang="ts">
import { ref } from 'vue'
const message = ref("v-model")
</script>

<style>
.active {
  color: red;
}
.other {
  color: blue;
}
.h {
  height: 300px;
  border: 1px solid #ccc;
}
</style>

v-memo 地址