模板插值语法

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

v-once 性能优化只渲染一次

v-memo 性能优化会有缓存具体请看我的掘金

Vue3.2 新增 v-memo - 掘金

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

学习Vue3 第四章（模板语法 vue指令）相关推荐

光脚丫思考Vue3与实战：第04章模板语法第01节概述+插值
下面是本文的屏幕录像的在线视频: 光脚丫思考Vue3与实战:第04章模板语法第01节插值温馨提示: 1.视频下载:线上视频被压缩处理,可以下载高清版本: 链接:https://pan.baid ...
《Go语言圣经》学习笔记第四章复合数据类型
<Go语言圣经>学习笔记第四章复合数据类型目录数组 Slice Map 结构体 JSON 文本和HTML模板注:学习<Go语言圣经>笔记,PDF点击下载,建议看书. ...
Effective Java（第三版）学习笔记 - 第四章类和接口 Rule20~Rule25
Effective Java(第三版) 学习笔记 - 第四章类和接口 Rule20~Rule25 目录 Rule20 接口优于抽象类 Rule21 为后代设计接口 Rule22 接口只用于定义类型 ...
Java基础学习——第十四章网络编程
Java基础学习--第十四章网络编程一.网络编程概述计算机网络: 把分布在不同地理区域的计算机与专门的外部设备用通信线路互连成一个规模大.功能强的网络系统,从而使众多的计算机可以方便地互相传递信 ...
《SysML精粹》学习记录--第四章
<SysML精粹>学习记录第四章:内部模块图(Internal Block Diagram,IBD) IBD介绍组成部分属性引用属性连接器项目流内嵌组成部分和引用小结第四章 ...
计算机网络（第7版）谢希仁著学习笔记第四章网络层
计算机网络(第7版)谢希仁著学习笔记第四章网络层第四章网络层 4.3划分子网和构造超网 p134 4.3.1划分子网 4.3.2使用子网时分组的转发 4.3.3无分类编址CIDR(构建超网) ...
JavaScript高级程序设计第四版学习--第二十四章
title: JavaScript高级程序设计第四版学习–第二十四章 date: 2021-5-31 10:46:01 author: Xilong88 tags: JavaScript 本章内容: ...
机器人导论（第四版）学习笔记——第四章
机器人导论(第四版)学习笔记--第四章 4.1 引言 4.2 解的存在性 4.3 当n<6时操作臂子空间的描述 4.4 代数解法和几何解法 4.5 简化成多项式的代数解法 4.6 三轴相交的Pi ...
光脚丫思考Vue3与实战：第04章模板语法第04节指令的缩写
下面是本文的屏幕录像的在线视频: 第04节指令的缩写温馨提示: 1.视频下载:线上视频被压缩处理,可以下载高清版本: 链接:https://pan.baidu.com/s/1Dd2HeUXH6DZ ...

学习Vue3 第四章（模板语法 vue指令）

模板插值语法

指令

学习Vue3 第四章（模板语法 vue指令）相关推荐

最新文章

热门文章