02-vue的基础语法与指令系统.pptx

模板语法;;如何将data中的文本数据，插入到HTML中呢？

我们已经学习过了，可以通过Mustache语法(也就是双大括号)。

我们可以像下面这样来使用，并且数据是响应式的;但是，在某些情况下，我们可能不希望界面随意的跟随改变

这个时候，我们就可以使用一个Vue的指令

v-once:

该指令后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的)

该指令表示元素和组件(组件后面才会学习)只渲染一次，不会随着数据的改变而改变。

代码如下：

;某些情况下，我们从服务器请求到的数据本身就是一个HTML代码

如果我们直接通过{{}}来输出，会将HTML代码也一起输出。

但是我们可能希望的是按照HTML格式进行解析，并且显示对应的内容。

如果我们希望解析出HTML展示

可以使用v-html指令

该指令后面往往会跟上一个string类型

会将string的html解析出来并且进行渲染

;v-text作用和Mustache一致：

v-text通常情况下，接受一个string类型

;v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法。

比如下面的代码：

第一个h2元素中的内容会被编译解析出来对应的内容

第二个h2元素中会直接显示{{message}}

;在某些情况下，我们浏览器可能会直接显然出未编译的Mustache标签。

;前面我们学习的指令主要作用是将值插入到我们模板的内容当中。

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

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

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

这个时候，我们可以使用v-bind指令：

作用：动态绑定属性

缩写：:

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

参数：attrOrProp(optional)

下面，我们就具体来学习v-bind的使用。

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

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

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

比如通过Vue实例中的data绑定元素的src和href，代码如下：;v-bind有一个对应的语法糖，也就是简写方式

在开发中，我们通常会使用语法糖的形式，因为这样更加简洁。

简写方式如下：;很多时候，我们希望动态的来切换class，比如：

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

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

绑定class有两种方式：

对象语法

数组语法;绑定方式：对象语法

对象语法的含义是:class后面跟的是一个对象。

对象语法有下面这些用法：

;绑定方式：数组语法

数组语法的含义是:class后面跟的是一个数组。

数组语法有下面这些用法：;我们可以利用v-bind:style来绑定一些CSS内联样式。

在写CSS属性名的时候，比如font-size

我们可以使用驼峰式(camelCase)fontSize

或短横线分隔(kebab-case，记得用单引号括起来)‘font-size’

绑定class有两种方式：

对象语法

数组语法

;绑定方式一：对象语法

绑定方式二：数组语法;我们知道，在模板中可以直接通过插值语法显示一些data中的数据。

但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示

比如我们有firstName和lastName两个变量，我们需要显示完整的名称。

但是如果多个地方都需要显示完整的名称，我们就需要写多个{{firstName}}{{lastName}}

我们可以将上面的代码换成计算属性：

OK，我们发现计算属性是写在实例的computed选项中的。

;计算属性中也可以进行一些更加复杂的操作，比如下面的例子：;每个计算属性都包含一个getter和一个setter

在上面的例子中，我们只是使用getter来读取。

在某些情况下，你也可以提供一个setter方法（不常用）。

在需要写setter的时候，代码如下：

;我们可能会考虑这样的一个问题：

methods和computed看起来都可以实现我们的功能，

那么为什么还要多一个计算属性这个东西呢？

原因：计算属性会进行缓存，如果多次使用时，计算属性只会调用一次。

我们来看下面的代码：;事实上var的设计可以看成JavaScript语言设计上的错误.但是这种错误多半不能修复和移除,以为需要向后兼容.

大概十年前,BrendanEich就决定修复这个问题,于是他添加了一个新的关键字:let.

我们可以将let看成更完美的var

块级作用域

JS中使用var来声明一个变