Vue3系列3--模板语法和vue指令

1 模板插值语法

• 在script 声明一个变量可以直接在template 使用用法为{{变量名称}}
• 模板语法是可以编写条件运算的
• 运算也是支持的
• 操作API 也是支持的

<template>
  {{ message }}
    {{ message2==0 ? '我是老大' : '我笑的' }}
    {{ message2 + 1 }}
    {{ message.split('').map(v => `4546$v`) }}
</template>

<script setup lang="ts">
const message = "我是唐少"
const message2:number = 1
</script>
<style>
</style>    

2 指令

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<template>   <div @click="parent">parent     <div @click.stop="child">child</div>   </div> </template>    <script setup lang="ts"> const child = () => {   console.log('child');  // 点击后不会答应parent，因为被阻止了 } const parent = () => {   console.log('parent'); }    </script>

阻止表单提交案例：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<template>   <div :class="[flag ? 'active' : 'other', 'h']">456789</div> </template>    <script setup lang="ts"> const flag: boolean = false;// 改成true后切换不同的效果 </script>    <style> .active {   color: red; } .other {   color: blue; } .h {   height: 300px;   border: 1px solid #ccc; } </style>

v-bind 绑定class 案例 2：

?

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 26

<template>   <div :class="flag">{{flag}}</div> </template>  // 直接绑定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 绑定style案例：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<template>   <div :style="style">绑定style</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 21 22 23

<template>   <input v-model="message" type="text" />   <div>{{ message }}</div> </template>       <script setup lang="ts"> import { ref } from 'vue' // 实时监听 const message = ref("message") </script>    <style> .active {   color: red; } .other {   color: blue; } .h {   height: 300px;   border: 1px solid #ccc; } </style>