JS基础实战课件02_Vue基础–模板语法.pptx

Vue基础–模板语法;;我们在前面练习Vue的过程中，有些代码片段是需要经常写的，我们再VSCode中我们可以生成一个代码片段，方便我们快速生成。

VSCode中的代码片段有固定的格式，所以我们一般会借助于一个在线工具来完成。

具体的步骤如下：

第一步，复制自己需要生成代码片段的代码；

第二步，https://snippet-generator.app/在该网站中生成代码片段；

第三步，在VSCode中配置代码片段；

;代码片段过程;React的开发模式：

React使用的jsx，所以对应的代码都是编写的类似于js的一种语法；

之后通过Babel将jsx编译成React.createElement函数调用；

Vue也支持jsx的开发模式（后续有时间也会讲到）：

但是大多数情况下，使用基于HTML的模板语法；

在模板中，允许开发者以声明式的方式将DOM和底层组件实例的数据绑定在一起；

在底层的实现中，Vue将模板编译成虚拟DOM渲染函数，这个我会在后续给大家讲到；

所以，对于学习Vue来说，学习模板语法是非常重要的。

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

并且我们前端提到过，data返回的对象是有添加到Vue的响应式系统中；

当data中的数据发生改变时，对应的内容也会发生更新。

当然，Mustache中不仅仅可以是data中的属性，也可以是一个JavaScript的表达式。

另外这种用法是错误的：;v-once用于指定元素或者组件只渲染一次：

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

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

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

;用于更新元素的textContent：

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

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

;v-pre用于跳过元素和它的子元素的编译过程，显示原始的Mustache标签：

跳过不需要编译的节点，加快编译的速度；

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

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

div?不会显示，直到编译结束。;前端讲的一系列指令，主要是将值插入到模板内容中。

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

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

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

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

缩写：:

预期：any(withargument)|Object(withoutargument)

参数：attrOrProp(optional)

修饰符：

.camel-将kebab-caseattribute名转换为camelCase。

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

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

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

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

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

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

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

绑定class有两种方式：

对象语法

数组语法

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

;数组语法：我们可以把一个数组传给:class，以应用一个class列表；

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

这次因为某些样式我们需要根据数据动态来决定；

比如某段文字的颜色，大小等等；

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

绑定class有两种方式：

对象语法

数组语法

;对象语法：

数组语法：

:style的数组语法可以将多个样式对象应用到同一个元素上；

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

前端我们无论绑定src、href、class、style，属性名称都是固定的；

如果属性名称不是固定的，我们可以使用:[属性名]=“值”的格式来定义；

这种绑定的方式，我们称之为动态绑定属性；

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

非常简单，我们可