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区别。
掌握的10个指令：
1. v-text 指令
v-text 指令用于更新标签包含的文本，它的作用跟双大括号的效果一样。我们看看它的用法：
<div id="app">
<p v-text="msg"></p>
</div>
<script>
let app = new Vue({
el:"#app",
data:{
msg:'hello,vue'
}
});
</script>我们给<p></p>标签加上了指令 v-text ，它的值就是我们data数据中的msg，就这么简单，最后我们来看看渲染结果：
（渲染成功）
有没有发现，它的作用跟{{ msg }}效果是一样的：
<p v-text="msg"></p>
<!--效果相同-->
<p>{{ msg }}</p>
2. v-html 指令
这个指令我们再上一节刚刚讲过，它帮助我们绑定一些包含html代码的数据在视图上，比如：“<b>hello,vue</b>”，这个字符串包含了<b>标签，要想<b>不被当作普通的字符串渲染出来，就得用 v-html 指令。
<div id="app">
<p v-html="msg"></p>
</div>
<script>
let app = new Vue({
el:"#app",
data:{
msg:'<b>hello,vue</b>'
}
});
</script>还是上面的代码，我们把 v-text 指令换成 v-html 指令，msg的值变成了含有html代码的：“<b>hello vue</b>”，我们看看渲染效果：
（效果图）
就这样，<b>标签被成功解析并渲染出来，视图上的文本也有了加粗的效果，这就是v-html发挥了作用，bingo！
3. v-show 指令
v-show ，听这名字就可以猜测它跟元素的显示/隐藏 相关，没错，它就是用来控制元素的display css属性的。
v-show 指令的取值为true/false，分别对应着显示/隐藏。有比较才能看到效果，我们拿两个标签分别设置不同的值，看看解析渲染效果。
<div id="app">
<p v-show="show1">我是true</p>
<p v-show="show2">我是false</p>
</div>
<script>
let app = new Vue({
el:"#app",
data:{
show1:true,
show2:false
}
});
</script>
我们用了两个<p>标签，都加上了 v-show 指令，取值分别为true和fasle，直接看效果吧！
第一个p标签的v-show设置为true，元素正常显示；第二个p标签的v-show设置为false，元素解析成：
<p style="display: none">我是false</p>所以它不会显示在视图上。这就是 v-show 指令的用法，简单明了。
4. v-if 指令
v-if 指令的取值也是为true或false，它控制元素是否需要被渲染出来，听起来有点抽象，不怕，同样，我们拿两个元素设置不用的值，对比一下看效果就知道了。
<div id="app">
<p v-if="if_1">我是true</p>
<p v-if="if_2">我是true</p>
</div>
<script>
let app = new Vue({
el:"#app",
data:{
if_1:true,
if_2:false
}
});
</script>我们把 v-show 指令换成了 v-if ，同样是两个<p>标签，同样是不同的取值：true和false。我们看效果：
看到了吧，设置为true的<p>标签，成功渲染出来，而设置为false的<p>标签，直接被一行注释代替了，并没有被解析渲染出来。
你会问了， v-show 和 v-if 都能控制元素显示或者隐藏，这两个怎么区别使用呢？
记住一点：如果需要频繁切换显示/隐藏的，就用 v-show ；如果运行后不太可能切换显示/隐藏的，就用 v-if 。
5. v-else 指令
if和else在编程语言一般都是结对出现的，在vue里面也不例外。它没有对应的值，但是要求前一个兄弟节点必须要使用 v-if 指令，也对，没有if，哪来的else。
<div id="app">
<p v-if="if_1">我是if</p>
<p v-else>我是else</p>
</div>
<script>
let app = new Vue({
el:"#app",
data:{
if_1:false
}
});
</script>我们使用两个<p>标签，第一个使用 v-if 指令，并取值为false，第二个使用 v-else 指令，啥也不说了，看效果最直观：
只有第二个<p>标签被渲染出来，第一个<p>标签由于 v-if 指令的值为false，直接被忽视了，不渲染。
同理，一旦第一个标签的 v-if 指令的值为true，被忽视的就是第二个<p>标签了。 v-if 和 v-else 只有一个会被渲染出来。
6. v-for 指令
有时候，我们的data中的存放的数据不是个简单的数字或者字符串，而是数组Array类型，这个时候，我们要把数组的元素展示在视图上，就需要用到vue提供的 v-for 指令，来实现列表的渲染。
我们看看它的用法：
<div id="app">
<div v-for="item in list">{{item}}</div>
</div>
<script>
let app = new Vue({
el:"#app",
data:{
list:['Tom','John','Lisa']
}
});
</script>
首先，我们的data中包含数组list，数组包含三个元素：“Tom”，“John”，“Lisa”，我们通过 v-for 指令把它渲染出来，其中item表示数组中的每个元素。我们看看渲染结果：
(效果图)
我们看到，我们解析渲染出三个div，其中包含的值分别是数组中的元素，表示我们解析渲染成功。
什么，怎么拿到索引？拿到每个元素的索引也很简单，我们稍微改动一下代码，把html部分的代码修改为：
<div id="app">
<div v-for="(item,index) in list">
{{index}}.{{item}}
</div>
</div>在循环解析的过程中，我们不但要拿到list数组的每个元素item，我们还获取每个元素的索引，写法如上，循环的时候加上(index,item)。
我们来看效果图：
（效果图）
我们看到，索引分别是0,1,2都被成功地渲染出来了。这就是用 v-for 指令来渲染列表的用法。比起以前手动更新dom列表，简直就是方便得不要不要的。
提醒：v-for指令除了可以迭代数组，还可以迭代对象和整数。
7. v-bind 指令
在第六节我们也提过 v-bind 指令的作用和用法，它用于动态绑定DOM元素的属性，比较常见的比如：<a>标签的href属性，<img/>标签的src属性。
<div id="app">
<a v-bind:href="link">hello官网</a>
</div>
<script>
let app = new Vue({
el:"#app",
data:{
link:"http://hello.com"
}
});
</script>用 v-bind 指令来修饰href属性，表明它的值是一个动态的值，对应的则是data中的link的值：http://hello.com.
来吧，看看渲染效果：
（效果图）
<a>标签的href的值成功地解析渲染成:http://hello.com。
<a v-bind:href="link">hello官网</a>
<!--等价于--> <a :href="link">hello官网</a>它们的解析渲染效果是一样一样的。
8. v-on 指令
v-on 指令相当于绑定事件的监听器，绑定的事件触发了，可以指定事件的处理函数，记性好的同学应该记得我们在第四节介绍methods选项的时候，有用到 v-on 指令。（估计你也不记得了）,这里我们还是配合methods来演示：
<div id="app">
<button v-on:click="say">点击</button>
</div>
<script>
let app = new Vue({
el:"#app",
methods:{
say(){
console.log('hello');
}
}
});
</script>
回到这个例子，我们通过 v-on 指令修饰click点击事件，指定事件响应后的处理函数为methods中的say( )方法，我们渲染看看效果：
点击按钮，可以成功触发click事件，并且调用say( )，一切都在我们的预期之中。
此外，如果你想给处理程序say( )传参数，也是可以的，用法跟普通的方法一致。
<div id="app">
<button v-on:click="say('Tom')">
点击
</button>
</div>
<script>
let app = new Vue({
el:"#app",
methods:{
say(name){
console.log('hello,'+name);
}
}
});
</script>
我们再上一个案例的基础上稍微修改代码，say(name)接受一个参数name，并把name打印出来，在调用的时候传如实参“Tom”。再看看效果，是不是在我们的预期之内：
“hello，Tom”被打印出来了，一切尽在掌握之中，感觉真好。
9. v-model 指令
这是一个最重要最常用的指令，一般用在表单输入，它帮助我们轻易地实现表单控件和数据的双向绑定，相对以前的手动更新DOM，简直就是开发者的福音，迫不及待地来看看它的用法：
<div id="app">
<input v-model="msg" type="text">
<p>你输入：{{ msg }}</p>
</div>
<script>
let app = new Vue({
el:"#app",
data:{
msg:''
}
});
</script>只要给input控件添加 v-model 指令，并指定关联的数据msg，我们就可以轻松把把用户输入的内容绑定在msg上。我们把msg的内容显示出来，看是不是跟用户输入的内容是同步更新的：
是不是比你手动更新DOM爽多了，是不是感受到了vue的MVVM带来的快感？
10. v-once 指令
最后，我们再来讲解一下v-once指令，它的特点是只渲染一次，后面元素中的数据再更新变化，都不会重新渲染。
我们再上面的案例代码中稍做修改，仔细看改了哪里：
<div id="app">
<input v-model="msg" type="text">
<p v-once>你输入：{{ msg }}</p>
</div>
<script>
let app = new Vue({
el:"#app",
data:{
msg:'hello,公众号的同学们'
}
});
</script>
修改1:<p>标签增加了 v-once 指令；
修改2：msg的初始值不再是空字符串。我们来看看效果：
由于msg有了初始值，第一次渲染的时候，input控件和<p>标签都有了内容，由于<p>标签我们添加了 v-once 指令，所以，后期我们更新msg的值的时候，<p>标签的内容不会发生改变，也是符合我们的预期。