1.模板插值语法
在script生命一个变量可以直接在template使用{{变量名称}}
<template>
<div>{{ message }}</div>
</template>
<script setup lang="ts">
const message = "I am a true man"
</script>
<style>
此外,还可以编写条件运算
<script setup lang="ts">
const message: number = 1;
</script>
<template>
<div>{{ message == 0 ? "我是zombieq" : "我不是zombieq" }}</div>
</template>
<style>
</style>
此外,也可以进行运算
<script setup lang="ts">
const message: number = 1;
</script>
<template>
<div>{{ message +1}}</div>
</template>
<style>
</style>
操作API也可以:
<script setup lang="ts">
const message: string = "I,AM,ZOMBIEQ";
</script>
<template>
<div>{{ message.split(",") }}</div>
</template>
<style>
</style>
2.指令
v- 开头都是vue 的指令
v-text 用来显示文本
<script setup lang="ts">
const message: string = "I,AM,ZOMBIEQ";
</script>
<template>
<div v-text="message"></div>
</template>
<style>
</style>
v-html 用来展示富文本
<script setup lang="ts">
const message: string = "<section>I,AM,ZOMBIEQ</section>";
</script>
<template>
<div v-html="message"></div>
</template>
<style>
</style>
v-if 用来控制元素的显示隐藏(切换真假DOM)
<script setup lang="ts">
const message: string = "<section>I,AM,ZOMBIEQ</section>";
const flag: boolean = false;
</script>
<template>
<div v-if="flag" v-html="message"></div>
</template>
<style>
</style>
v-else-if 表示 v-if 的“else if 块”。可以链式调用
v-else v-if条件收尾语句
v-show 用来控制元素的显示隐藏(display none block Css切换)
<script setup lang="ts">
const message: string = "<section>I,AM,ZOMBIEQ</section>";
const flag: boolean = false;
</script>
<template>
<div v-show="flag" v-html="message"></div>
</template>
<style>
</style>
相对v-if更节省性能
v-on 简写@ 用来给元素添加事件
<template>
<div @click="pareent">
<div @click.stop="child">child</div>
</div>
</template>
<script setup lang="ts">
const child = () => {
console.log('child');
}
const pareent = () => {
console.log('parent');
}
</script>
<template>
<form action="/">
<button @click.prevent="submit" type="submit">submit</button>
</form>
</template>
<script setup lang="ts">
const submit = () => {
console.log('child');
}
</script>
<style>
</style>
v-bind 简写: 用来绑定元素的属性Attr
<template>
<div :class="[flag ? 'active' : 'other', 'h']">12323</div>
</template>
<script setup lang="ts">
const flag: boolean = false;
</script>
<style>
.active {
color: red;
}
.other {
color: blue;
}
.h {
height: 300px;
border: 1px solid #ccc;
}
</style>
<template>
<div :class="flag">{{flag}}</div>
</template>
<script setup lang="ts">
type Cls = {
other: boolean,
h: boolean
}
const flag: Cls = {
other: false,
h: true
};
</script>
<style>
.active {
color: red;
}
.other {
color: blue;
}
.h {
height: 300px;
border: 1px solid #ccc;
}
</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 双向绑定
此处双向绑定需要使用ref
<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-for 用来遍历元素
<template>
<div :key="item" v-for="item in Arr">{{item}}</div>
</template>
<script setup lang="ts">
const Arr: Array<number> = [1, 2, 3, 4, 5];
</script>
<style>
</style>
原文:https://www.yuque.com/sangshiqiang/oh0zvr/hwhz1l