1 Template Interpolation Syntax
- Declaring a variable in script can be used directly in template usage as {{variable name}}
- Template syntax can be used to write conditional operations
- Operations are also supported
- The operation API is also supported
<template>
{{ message }}
{{ message2==0 ? 'I'm the boss' : 'I smiled' }}
{{ message2 + 1 }}
{{ ('').map(v => `4546$v`) }}
</template>
<script setup lang="ts">
const message = "I am Mr. Tang"
const message2:number = 1
</script>
<style>
</style>2 Instructions
- v- Start with vue instructions
- v-text is used to display text
- v-html is used to display rich text
- v-if is used to control the display and hidden of elements (switch true and false DOM)
- v-else-if means the "else if block" of v-if. Can be called in chain
- v-else v-if conditional ending statement
- v-show is used to control the display and hiding of elements (display none block Css switch)
- v-on abbreviation @ is used to add events to elements
- v-bind abbreviation: Attr attribute used to bind elements
- v-model bidirectional binding
- v-for is used to traverse elements
v-on modifier
Bubble cases:
<template>
<div @click="parent">parent
<div @="child">child</div>
</div>
</template>
<script setup lang="ts">
const child = () => {
('child');
// After clicking, the parent will not be agreed to because it was blocked}
const parent = () => {
('parent');
}
</script>Prevent form submission cases:
<template>
<form action="/">
<button @="submit" type="submit">submit</button>
</form>
</template>
<script setup lang="ts">
const submit = () => {
('child');
}
</script>
<style>
</style>v-bind class case 1:
<template>
<div :class="[flag ? 'active' : 'other', 'h']">456789</div>
</template>
<script setup lang="ts">
const flag: boolean = false;// Change to true and switch to different effects</script>
<style>
.active {
color: red;
}
.other {
color: blue;
}
.h {
height: 300px;
border: 1px solid #ccc;
}
</style>v-bind class case 2:
<template>
<div :class="flag">{{flag}}</div>
</template>
// Directly bind cls<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 binding style case:
<template>
<div :style="style">Bindstyle</div>
</template>
<script setup lang="ts">
type Style = {
height: string,
color: string
}
const style: Style = {
height: "300px",
color: "blue"
}
</script>
<style>
</style>v-model case:
<template>
<input v-model="message" type="text" />
<div>{{ message }}</div>
</template>
<script setup lang="ts">
import { ref } from 'vue' // Real-time monitoringconst message = ref("message")
</script>
<style>
.active {
color: red;
}
.other {
color: blue;
}
.h {
height: 300px;
border: 1px solid #ccc;
}
</style>This is the article about template syntax and vue directives in Vue3. For more related vue3 template syntax and vue directives, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!