02_Vue3基础语法(一)之Mustache语法及v-bind的使用_为什么mustache语法是双括号

Vue3基础语法(一)

Mustache双大括号语法

如果我们希望把数据显示到模板（template）中，使用最多的语法是 “Mustache”语法 (双大括号) 的文本插值。

• 并且我们前面提到过，data返回的对象是有添加到Vue的响应式系统中；
• 当data中的数据发生改变时，对应的内容也会发生更新。
• 当然，Mustache中不仅仅可以是data中的属性，也可以是一个JavaScript的表达式。

另外这种用法是错误的：

v-once指令

v-once用于指定元素或者组件只渲染一次：

• 当数据发生变化时，元素或者组件以及其所有的子元素将视为静态内容并且跳过；

• 该指令可以用于性能优化；

• 如果是子节点，也是只会渲染一次：

v-text指令

用于更新元素的 textContent：

v-html

默认情况下，如果我们展示的内容本身是 html 的，那么vue并不会对其进行特殊的解析。

如果我们希望这个内容被Vue可以解析出来，那么可以使用 v-html 来展示；

v-pre

v-pre用于跳过元素和它的子元素的编译过程，显示原始的Mustache标签： 跳过不需要编译的节点，加快编译的速度；

v-cloak

这个指令保持在元素上直到关联组件实例结束编译。

和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到组件实例准备完毕。

v-bind的绑定属性

前面讲的一系列指令，主要是将值插入到模板内容中。

但是，除了内容需要动态来决定外，某些属性我们也希望动态来绑定。

• 比如动态绑定a元素的href属性；
• 比如动态绑定img元素的src属性；

绑定属性我们使用v-bind：

缩写：:

预期：any (with argument) | Object (without argument)

参数：attrOrProp (optional)

修饰符：

.camel - 将 kebab-case attribute 名转换为 camelCase。

用法：动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。

绑定基本属性

v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值（这个学到组件时再介绍）；

在开发中，有哪些属性需要动态进行绑定呢？

• 还是有很多的，比如图片的链接src、网站的链接href、动态绑定一些类、样式等等

绑定class介绍

在开发中，有时候我们的元素class也是动态的，比如：

• 当数据为某个状态时，字体显示红色。
• 当数据另一个状态时，字体显示黑色。

绑定class有两种方式：

• 绑定class – 对象语法

  我们可以传给 :class (v-bind:class 的简写) 一个对象，以动态地切换 class。

• 绑定class – 数组语法

​ 我们可以把一个数组传给 :class，以应用一个 class 列表；

绑定style介绍

我们可以利用v-bind:style来绑定一些CSS内联样式：

• 这次因为某些样式我们需要根据数据动态来决定；
• 比如某段文字的颜色，大小等等；

CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名；

绑定class有两种方式：

• 对象语法

• 数组语法

动态绑定属性

在某些情况下，我们属性的名,可能也不是固定的：

• 前面我们无论绑定src、href、class、style，属性名称都是固定的；
• 如果属性名称不是固定的，我们可以使用 :[属性名]=“值” 的格式来定义；
• 这种绑定的方式，我们称之为动态绑定属性；

绑定一个对象

如果我们希望将一个对象的所有属性，绑定到元素上的所有属性，应该怎么做呢？

• 非常简单，我们可以直接使用 v-bind 绑定一个 对象；
• 案例：info对象会被拆解成div的各个属性

v-on绑定事件

前面我们绑定了元素的内容和属性，在前端开发中另外一个非常重要的特性就是交互。

在前端开发中，我们需要经常和用户进行各种各样的交互：

• 这个时候，我们就必须监听用户发生的事件，比如点击、拖拽、键盘事件等等
• 在Vue中如何监听事件呢？使用v-on指令。
• 接下来我们来看一下v-on的用法：

v-on的使用：

缩写：@

预期：Function | Inline Statement | Object

参数：event

修饰符：

• .stop - 调用 event.stopPropagation()。
• .prevent - 调用 event.preventDefault()。
• .capture - 添加事件侦听器时使用 capture 模式。
• .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
• .{keyAlias} - 仅当事件是从特定键触发时才触发回调。
• .once - 只触发一次回调。
• .left - 只当点击鼠标左键时触发。
• .right - 只当点击鼠标右键时触发。
• .middle - 只当点击鼠标中键时触发。
• .passive - { passive: true } 模式添加侦听器

用法：绑定事件监听