上两节我们学习了vue的实例知识：

第4节：vue实例的4个常用选项

第5节：vue 实例的生命周期

提醒一下，这两节的内容在后面实战的时候很重要，如果落下的同学可以回去翻看学习，不必害怕难学，这里没有难学的教程。

这一节，我们学习如何在html上绑定我们实例中的数据。

Mustache 语法

什么叫Mustache语法，别被这高大上的叫法吓到了，其实就是双大括号{{ }}的写法，在之前的章节我们就演示过在视图中显示我们的数据，这是最常见的绑定方式。有了它，我们可以轻松地在视图显示我们的数据并及时自动更新，无需手动控制。

<div id="app">{{ name }}</div>
 <script>
 let app = new Vue({
    el:"#app",
    data:{
     name:"前端君"
    }
 });
 </script>

十分简单，页面视图上也成功显示我们的data中的name的值：“前端君”。

（再复习一遍）

绑定纯html

有时候有一种这样的需求，我们的数据包含了一些html的标签代码，比如：

 name:"<strong>前端君</strong>"

文本“前端君”被一个<strong>标签包住，而我们在展示的是，需要合理地渲染strong标签，再显示我们想要展示文本内容。这种情况，用原来的双大括号{{  }}方式，就不能满足了，它会渲染成这样：

（这不是我想要的）

<strong>被当作是普通的文本数据被展示了，这并不是我们想要的结果。这个是时候，你需要用vue提供的v-html指令，用法如下：

 <div id="app" v-html="name"></div> <script> let app = new Vue({    el:"#app",    data:{     name:"<strong>前端君</strong>"    } }); </script>

v-html以属性的形式添加到了div中，值为“name”，也就是我们数据data中的name：

 "<strong>前端君</strong>"

我们来看看视图展示的结果：

（这才是我想要的效果）

视图上的“前端君”有了明显的加粗效果，说明<strong>标签发挥了作用，我们通过chrome的开发者工具查看解析生成后的html文档，name的值，被解析成html标签，并作为字节点，插入在<div id=”app”></div>中去。

这，就是v-html的作用啦。

绑定属性

前面两个都是控制视图展示文本内容，有时候，html标签的属性也很重要，比如：<a>标签的href属性，<img/>标签的src属性等。Vue中如何将data中的数据绑定为这些属性的值呢？还是用双大括号{{  }}的写法吗？

当然不是，这里不需要用双大括号{{ }}，我们用v-bind指令，如下：

 <div id="app">   <!--在href前用v-bind：修饰-->   <a v-bind:href="link">hello官网</a> </div> <script> let app = new Vue({    el:"#app",    data:{     link:"http://hello.com"    } }); </script>

在视图中的a标签，我们在<a>标签加上v-bind:来修饰href属性，而它的值就是data中的属性link。我们来看看解析渲染的html页面效果。

（href属性的值成功解析出来了）

标签<a>的属性href的值成功地绑定了data数据link的值，通过v-bind指令，就成功地将数据成功地绑定在视图的标签的属性中。

v-bind 指令的简写

对于v-bind指令，如果一个标签中需要绑定多个属性的话，就得连续写多个v-bind。

问题是没问题，但vue为了我们的代码更简洁易看，提供了v-bind指令的简写，仅需要冒号。

原本完整的写法：

 <!--完整的写法--> <a v-bind:href="link">hello官网</a>

简洁的写法：

 <!--缩写--> <a :href="link">hello官网</a>

此外，需要注意的是：当渲染的属性值是布尔值的时候（true和false），效果就不一样了，并不是简单地将true或者false渲染出来，而是当值为false的时候，属性会被移除。

我们试试看：

 <div id="app">   <!--我们用缩写的语法-->   <button :disabled="dis_true">      我是true   </button>   <button :disabled="dis_false">      我是false   </button> </div> <script> let app = new Vue({    el:"#app",    data:{      dis_true:true,      dis_false:false    } }); </script>

我们通过v-bind指令的缩写，给两个button标签的disabled属性绑定值，一个值为true，一个值为false，我们来看看效果：

（第二个button的disbaled属性被移除了）

我们看到，当属性值设置成true的时候，disabled的值为解析成“disabled”，当属性值设置成false的时候，属性disabled直接被移除掉了。

支持javascript表达式

上面讲到的都是将数据简单地绑定在视图上，但事实上，vue还支持我们对数据进行简单的运算：javascript表达式支持。

我们举3个例子演示一下：

1.加减乘除运算：

 <div id="app">{{ num+3 }}</div> <script> let app = new Vue({    el:"#app",    data:{        num:2    } }); </script>

上面的案例，在渲染的时候，并不是直接渲染data的num，而是对num进行的简单的加法：num+3，渲染的结果为：5。

（结果为：5）

2.三元运算符：

 <div id="app">{{ ok ? 'yes':'no' }}</div> <script> let app = new Vue({    el:"#app",    data:{        ok:true    } }); </script>

三元运算符计算，上面元算的结果为：“yes”。

（三元运算后的结果为：“yes”）

3.字符串拼接：

 <div id="app">  <a :href="'http://'+host">hello官网</a> </div> <script> let app = new Vue({    el:"#app",    data:{        host:'hello.com'    } }); </script>

<a>标签的href属性的值通过两个字符串的拼接起来，我们看看最后拼接效果：

（字符串拼接成功）

注意：

虽然vue支持javascript表达式运算，我们只会在运算比较简单的情况下才会这么玩，当运算比较繁琐复杂的时候，一定要用vue的computed属性来进行计算。

本节小结

在视图绑定数据的方法：Mustache语法（双大括号语法），绑定纯HTML，绑定属性，支持javascript表达式的写法，以及表达式写法和computed区别。

扩展阅读

1.《ECMAScript 6 系列》原创教程