Vue3+TS Day02 - 基础指令 Mustache、v-

一、Vue 模板语法

1、如何在 vscode 中添加代码片段？

image.png image.png

2、什么是模板语法？

image.png

3、Mustache 双大括号语法【与标签内容相关】

image.png

二、Vue 模板语法 v-bind【与属性相关】

1、v-bind 指令是做什么的？简写语法糖是什么？ 在开发中，哪些属性需要动态进行绑定呢？（重点）

• v-bind 用于绑定一个或多个属性值，或者向另一个组件传递 props 值（这个学到组件时再介绍）
• v-bind 有一个对于的语法糖，也就是简写方式【:src="src"】
• 【需要动态绑定的属性】：比如图片的链接 src，网站的链接 href，动态绑定一些类、样式等等

image.png image.png

2、v-bind 对 class 和 style 的【属性值】进行绑定

image.png image.png image.png image.png

3、v-bind 动态绑定【属性名字】？

image.png

4、v-bind 如何动态将一个【对象】绑定到【属性】？

image.png

三、Vue 模板语法 v-on【与事件相关】

1、v-on 是干什么的？

• 在前端开发中，我们需要经常和用户进行各种各样的交互，比如点击、拖拽、键盘事件等等
• 在 Vue 中如何监听事件呢？使用 v-on 指令

image.png image.png

2、v-on 的基本使用？

image.png

3、v-on 如何在点击时，拿到点击事件 event 对象？如果有多个参数呢？

image.png

4、事件默认是会进行冒泡传递的，如何在 vue 中优雅的阻止冒泡？

• 使用 v-on 修饰符

image.png

四、Vue 模板语法（不常用部分）

1、v-once 指令（知道作用即可）？

image.png

2、v-html 指令（知道作用即可）？

image.png

3、v-pre 指令（知道作用即可）？

image.png