Vue3+TS Day02 - 基础指令 Mustache、v-
2021-11-24 本文已影响0人
望穿秋水小作坊
一、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
