vue3-(模版语法&指令)

1.在script标签中声明一个变量:message,可以直接在template模版中直接使用：

<template>
  <div>{{ message }}</div>
</template>

<script setup lang="ts">
const message = "你好，vue3"
</script>

2.在模版语法中编辑js语句：

<template>
  <div>{{ isflag ? 'isflag为true显示的值' : 'isflag为false显示的值' }}</div>
</template>

<script setup lang="ts">
const isflag: boolean = false;
</script>

3.在模版中使用运算符：

<template>
  <div>{{ num + 10 }}</div>
</template>

<script setup lang="ts">
const num: number = 100;
</script>

4.在模版中使用js方法：

<template>
  <div>{{ message.split(',') }}</div>
</template>

<script setup lang="ts">
const message: string = '我,是,vue3';
</script>

5.指令：

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

6.绑定html class 和style样式

<template>
  <div :class="classObj">
    我们可以传给 v-bind:class 一个对象，以动态地切换 class
  </div>
</template>

<script setup lang="ts">
const isActive: boolean = true;
const ishas: boolean = false;
type Sty = {
  'bg-color': boolean;
  'font-size': boolean;
};
const classObj: Sty = { 'bg-color': isActive, 'font-size': ishas };
</script>

<style lang="less" scoped>
.bg-color {
  background: red;
}
.font-size {
  font-size: 20px;
}
</style>

<template>
  <div :style="styleObj">可以传给 v-bind:style 一个对象</div>
</template>

<script setup lang="ts">
type Sty = {
  width: string;
  height: string;
  color: string;
};
const styleObj: Sty = { width: '200px', height: '200px', color: 'red' };
</script>

7.双向数据绑定：v-model，需要引入 ref做基础数据双向绑定

<template>
  <input type="text" v-model="message" />
  <div>{{ message }}</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const message = ref('基本数据使用ref做响应式');
</script>