本文共 3015 字，大约阅读时间需要 10 分钟。
1. 插值操作
1.1 mustache语法
mustache语法，简单来说就是{
{}}语法，并且数据是响应式的//mustache语法{ { message}}
1.2 v-once
- 该指令后面不需要跟任何表达式
- 该指令表示元素和组件只渲染一次，不会随着数据的改变而变化
我们在原来的标签上加上v-once指令
{ { message}}
然后打开浏览器，输入app.message = ‘vue.js’，发现页面上的值并没有改变，这就是v-once的效果。
1.3 v-html
有时候，我们从服务器里请求来的数据本身就是html代码，如果我们直接通过mustache语法来展示，会将html代码也一起展示，但是我们希望的是按照html格式解析，并展示相应内容，此时可以用v-html指令
- 该指令后面一般会跟一个string类型
- 会将string类型的html代码解析出来并进行渲染
{ { link}}
效果如下：
1.4 v-text
- v-text和mustache作用基本一致
- v-text通常情况下，接受一个string类型
{ { message}}
效果如下：
1.5 v-pre
v-pre用于跳过这个元素和它的子元素的编译过程，用于显示原本的mustache语法
比如下面的代码：
- 第一个h2元素的内容会被编译解析出来
- 第二个h2元素的内容会直接显示{ {message}}
{ { message}}
{ { message}}
效果如下：
1.6 v-cloak
由于某些原因，比如网络加载原因或者数据渲染较慢，浏览器可能直接显示出未编译的mustache标签。
例如：
hello { { name}}
此时页面的效果就是这样：
上面的显示效果显然是不好的。但是我们如果加上 v-cloak 指令,并设置样式，在没有渲染之前，页面就不会出现未渲染好的内容和标签：
hello { { name}}
2. 绑定属性
前面介绍的指令是将值插入到我们的模板内容中，但是，除了内容需要动态决定外，某些属性我们也希望来动态决定，比如动态绑定a标签的href属性、img标签的src属性或者一些其他标签的class属性等等，此时，就需要用到这个指令：v-bind
v-bind：
- 作用：动态绑定属性
- 语法糖：：(冒号)
- 预期：any (with argument) | Object (without argument)
- 参数：attrOrProp (optional)
2.1 基本使用
通过Vue实例中的data绑定元素的src和href：
效果如下：
2.2 绑定class属性
有时候，我们希望可以动态的切换class属性，比如：
当数据为某一状态时，字体显示红色
当数据为另一状态时，字体显示黑色
绑定class的两种方式：
- 对象语法
- 数组语法
2.2.1 对象语法
含义:class后面跟的是一个对象
- 用法1：直接通过{ }绑定一个类
hello world
- 用法2：可以通过判断，传入多个值
hello world
...data:{ isActive:true, isLine:true }
效果如下:
hello world
- 用法3：和普通的类同时存在，并不冲突
hello world
//属性hello world
- 用法4：如果过于复杂，可以放在computed或者methods中
hello world
2.2.2 数组语法
含义：class后面跟的是一个数组
- 用法1：直接通过[ ]绑定一个类
- 用法2：可以传入多个值
- 用法3：和普通的类同时存在，并不冲突
//属性
- 用法4：如果过于复杂，可以放在computed或者methods中
2.3 绑定style属性
我们可以利用v-bind:style来绑定一些CSS内联样式
- 绑定方式1：对象语法
:style后面跟的是一个对象类型，其中，对象的key是CSS属性的名称，对象的value是具体赋的值
hello world
- 绑定方式2：数组语法
:style后面跟的是一个数组类型
hello world
3. 计算属性
3.1 什么是计算属性
我们知道，在模板中可以直接通过插值语法来显示data中的数据，但是某些情况下，我们需要对数据进行一些处理，或者将多个数据结合起来显示。
例如：我们有firstName和lastName两个变量，需要显示完整的名称，我们可以直接用
{ { firstName}}{ { lastName}} 这样的插值语法来显示。
但是如果多个地方都需要显示完成的名称，我们就需要写很多个这样的代码。
其实，我们可以将上面的代码写成计算属性。
{ { fullName}}
3.2 计算属性的复杂操作
总价是:{ { totalPirce}}
3.3 计算属性的getter和setter
每个计算属性都包含了一个getter和一个setter。在上面的例子中，我们只是用getter来读取值，在某些情况下，也可以使用setter来设置值，代码如下：
{ { fullName}}
{ { firstName}}
{ { lastName}}
然后在console里输入 app.fullName=‘zhang.san’，会调用set方法，然后显示会调用get方法。
3.4 计算属性的缓存
我们可能会考虑一个问题：
methods和computed看起来都可以实现我们的功能，但是为什么会多出一个计算属性呢，直接都使用methods不就可以了？
原因：计算属性会进行缓存，如果多次使用时，计算属性只会调用一次
{ { fullName}}
{ { fullName}}
{ { fullName}}
{ { getFullName()}}
{ { getFullName()}}
{ { getFullName()}}
结果如下，会发现，计算属性只调用了一次，但是方法却调用了三次。
转载地址：http://dqmbi.baihongyu.com/