Vue3 第四章（模板语法 %26 vue指令）

模板插值语法

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

<template>
<div>{{ message }}</div>
</template>
<script setup lang="ts">
  const message = "我是小满"
</script>
<style>
</style>

模板语法是可以编写条件运算的

<template>
<div>{{ message == 0 ? '我是小满0' : '我不是小满other' }}</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>

指令
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修饰符 冒泡案例

<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>

阻止表单提交案例

<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 绑定class 案例 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>

v-bind 绑定class 案例 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-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>

————————————————
版权声明：本文为CSDN博主「小满zs」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq1195566313/article/details/122773486