原文链接:https://blog.csdn.net/qq1195566313/article/details/122773486
模版语法
声明变量在template直接使用
<template>
<div>{{ message }}</div>
</template>
<script setup lang="ts">
const message = "我是小满"
</script>
<style>
</style>
编写条件运算
<template>
<div>{{ message == 0 ? '早上好中国' : '我爱吃冰淇淋' }}</div>
</template>
<script setup lang="ts">
const message:number = 1
</script>
<style>
</style>
运算也支持
<template>
<div>{{ message + 1 }}</div>
</template>
<script setup lang="ts">
const message:number = 1
</script>
<style>
</style>
操作API
<template>
<div>{{ message.split(',') }}</div>
</template>
<script setup lang="ts">
const message:string = "我,是,小,满"
</script>
<style>
</style>
vue 指令
v- 开头都是vue的指令
v-text
v-text用来显示文本
<template>
<div v-text="message"></div>
</template>
<script setup lang="ts">
const message:string = "数,组,排,列"
</script>
<style>
</style>
v-html
v-html用来展示富文本
v-if
v-if用来控制元素的显示隐藏(切换真假DOM)
<template>
<div v-if="flag">{{ message }}</div>
</template>
<script>
const message: string = "hello world"
const flag: boolean = true
</script>
v-else
v-else-if 表示 v-if 的“else if 块”。可以链式调用
v-else v-if条件收尾语句
<template>
<div @click.stop="child">child</div>
<div v-if="type=='A'">A</div>
<div v-else-if="type=='B'">B</div>
<div v-else-if="type=='C'">C</div>
<div v-else="type=='D'">D</div>
</template>
<script>
const type: string = "A"
</script>
v-show
v-show 用来控制元素的显示隐藏(display none block Css切换)
<template>
<div v-show="flag">{{ message }}</div>
</template>
<script>
const message: string = "hello world"
const flag: boolean = true
</script>
v-on
v-on 简写@ 用来给元素添加事件
<template>
<div>
<button v-on:click="clickTap">111</button>
</div>
</template>
<script>
const clickTap = () => {
console.log('触发了点击事件')
}
</script>
v-on修饰符 冒泡案例
<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>
v-on 阻止表单提交案例
<script>
const submit = () => {
console.log('child');
}
</script>
<template>
<form action="/">
<button @click.prevent="submit" type="submit">submit</button>
</form>
</template>
v-bind
v-bind简写: 用来绑定元素的属性Attr
案例1:
<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>
案例2:
<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-model
v-model 双向绑定
v-for 用来遍历元素
v-on修饰符 冒泡案例
Comments NOTHING