《Vue3de 学习模板语法和指令》

发表于 分类于 ， Valine：

Vue3 的模板语法和指令和 vue2 是一样的；

模板插值语法

在 script 声明一个变量可以直接在 template 使用用法为

1
2
3
4
5
6
7
8
<template>
  <div>{{ message }}</div>
</template>
<script setup lang="ts">
  const message = "nagisa"
</script>
<style>
</style>

可以进行一些条件运算和普通的数字运算

1
2
3
4
5
6
7
8
<template>
  <div>{{ message == 0 ? 'nagisa00' : 'nagisa01' }}</div>
</template>
<script setup lang="ts">
const message:number = 1
</script>
<style>
</style>
1
2
3
4
5
6
7
8
<template>
  <div>{{ message  + 1 }}</div>
</template>
<script setup lang="ts">
const message:number = 1
</script>
<style>
</style>

操作一些 api 也是支持的

1
2
3
4
5
6
7
<template>
  <div>{{ message.split("，") }}</div>
</template>
<script setup lang="ts">
const message: string = "n,a,g,i,s,a";
</script>
<style></style>

指令

指令 描述
v-text 用来显示文本
v-html 用来显示富文本
v-if 用来控制元素的显示隐藏(切换真假 DOM)
v-else-if 表示 v-if 的 else-if 块，可以链式调用
v-show 用来控制元素的显示和隐藏(dispaly none block css 切换)
v-on 用来给元素添加事件，语法糖@
v-bind 用来绑定元素的属性值，语法糖:
v-model 双向绑定
v-for 用来遍历元素

v-on修饰符，冒泡跑案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
  <div @click="parent">
    <div @click.stop="child">child</div>
  </div>
</template>
<script setup lang="ts">
const child = () => {
  console.log('child');

}
const parent = () => {
  console.log('parent');
}
</script>

组织表单提交

1
2
3
4
5
6
7
8
9
10
11
<template>
  <form action="/">
    <button @click.prevent="submit" type="submit">submit</button>
  </form>
</template>
<script setup lang="ts">
const submit = () => {
  console.log('child');

}
</script>

v-bind绑定 class 例子 01：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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>

v-bind绑定 class 例子 02：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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>

v-bind绑定 style 例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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>