Vue实战前必须掌握的10个指令

1. v-text 指令

---

v-text 指令用于更新标签包含的文本。咱们看看它的用法：

咱们给<p></p>标签加上了指令 v-text ，它的值就是咱们data数据中的msg，就这么简单，最后咱们来看看渲染结果：

它的做用跟{{ msg }}效果是同样的：

2. v-html 指令

---

v-html 这个指令它帮助咱们绑定一些包含html代码的数据在视图上，好比：“<b>hello,vue</b>”，这个字符串包含了<b>标签，
要想<b>不被看成普通的字符串渲染出来，就得用 v-html 指令。

仍是上面的代码，咱们把 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，分别对应着显示/隐藏。有比较才能看到效果，咱们拿两个标签分别设置不一样的值，看看解析渲染效果。

咱们用了两个<p>标签，都加上了 v-show 指令，取值分别为true和fasle，直接看效果吧！

第一个p标签的v-show设置为true，元素正常显示；第二个p标签的v-show设置为false，元素解析成：

因此它不会显示在视图上。这就是 v-show 指令的用法，简单明了。

4. v-if 指令 指令

---

v-if 指令的取值也是为true或false，它控制元素是否须要被渲染出来，听起来有点抽象，不怕，一样，咱们拿两个元素设置不用的值，
对比一下看效果就知道了。

咱们把 v-show 指令换成了 v-if ，一样是两个<p>标签，一样是不一样的取值：true和false。咱们看效果：

看到了吧，设置为true的<p>标签，成功渲染出来，而设置为false的<p>标签，直接被一行注释代替了，并无被解析渲染出来。

也许你会问了， v-show 和 v-if 都能控制元素显示或者隐藏，这两个怎么区别使用呢？

5. v-else 指令

---

if和else在编程语言通常都是结对出现的，在vue里面也不例外。它没有对应的值，可是要求前一个兄弟节点必需要使用 v-if 指令，
也对，没有if，哪来的else。

咱们使用两个<p>标签，第一个使用 v-if 指令，并取值为false，第二个使用 v-esle 指令，啥也不说了，看效果最直观：

只有第二个<p>标签被渲染出来，第一个<p>标签因为 v-if 指令的值为false，直接被忽视了，不渲染。
同理，一旦第一个标签的 v-if 指令的值为true，被忽视的就是第二个<p>标签了。 v-if 和 v-else 只有一个会被渲染出来。
有兴趣的同窗，能够继续去了解一下 v-else-if 指令，一样很简单。

6. v-for 指令

---

有时候，咱们的data中的存放的数据不是个简单的数字或者字符串，而是数组Array类型，这个时候，
咱们要把数组的元素展现在视图上，就须要用到vue提供的 v-for 指令，来实现列表的渲染。

咱们看看它的用法：

首先，咱们的data中包含数组list，数组包含三个元素：“Tom”，“John”，“Lisa”，咱们经过 v-for 指令把它渲染出来，
其中item表示数组中的每一个元素。咱们看看渲染结果：

咱们看到，咱们解析渲染出三个div，其中包含的值分别是数组中的元素，表示咱们解析渲染成功。
什么，怎么拿到索引？拿到每一个元素的索引也很简单，咱们稍微改动一下代码，把html部分的代码修改成：

在循环解析的过程当中，咱们不但要拿到list数组的每一个元素item，咱们还获取每一个元素的索引，写法如上，循环的时候加上(index,item)。

咱们来看效果图：

咱们看到，索引分别是0,1,2都被成功地渲染出来了。这就是用 v-for 指令来渲染列表的用法。
比起之前手动更新dom列表，简直就是方便得不要不要的。

7. v-bind 指令

---

在第六节咱们也提过 v-bind 指令的做用和用法，它用于动态绑定DOM元素的属性，比较常见的好比：<a>标签的href属性，<img/>标签的src属性。

用 v-bind 指令来修饰href属性，代表它的值是一个动态的值，对应的则是data中的link的值：http://hello.com.

来吧，看看渲染效果：

<a>标签的href的值成功地解析渲染成:http://hello.com。

第六节也说过， v-bind 指令能够简写成一个冒号“：”，也就是如下两种写法是等价的。

它们的解析渲染效果是同样同样的。

8. v-on 指令

---

v-on 指令至关于绑定事件的监听器，绑定的事件触发了，能够指定事件的处理函数。
这里咱们仍是配合methods来演示：

咱们经过 v-on 指令修饰click点击事件，指定事件响应后的处理函数为methods中的say( )方法，
咱们渲染看看效果：

点击按钮，能够成功触发click事件，而且调用say( )，一切都在咱们的预期之中。

此外，若是你想给处理程序say( )传参数，也是能够的，用法跟普通的方法一致。

咱们再上一个案例的基础上稍微修改代码，say(name)接受一个参数name，并把name打印出来，在调用的时候传如实参“Tom”。
再看看效果，是否是在咱们的预期以内：

9. v-model 指令

---

这是一个最重要最经常使用的指令，通常用在表单输入，它帮助咱们轻易地实现表单控件和数据的双向绑定，相对之前的手动更新DOM，
简直就是开发者的福音，火烧眉毛地来看看它的用法：

只要给input控件添加 v-model 指令，并指定关联的数据msg，咱们就能够轻松把把用户输入的内容绑定在msg上。
咱们把msg的内容显示出来，看是否是跟用户输入的内容是同步更新的：

是否是比你手动更新DOM爽多了，是否是感觉到了vue的MVVM带来的快感？

10. v-once 指令

---

最后，咱们再来说解一下v-once指令，它的特色是只渲染一次，后面元素中的数据再更新变化，都不会从新渲染。

咱们再上面的案例代码中稍作修改，仔细看改了哪里：

修改1:<p>标签增长了 v-once 指令；
修改2：msg的初始值再也不是空字符串。咱们来看看效果：

因为msg有了初始值，第一次渲染的时候，input控件和<p>标签都有了内容，因为<p>标签咱们添加了 v-once 指令，
因此，后期咱们更新msg的值的时候，<p>标签的内容不会发生改变，也是符合咱们的预期。

总结：
本文共学习了Vue的10个指令，v-text 、 v-html 、 v-show 、 v-if 、 v-else 、v-for 、 v-bind 、 v-on 、
v-model 、 v-once ，并区别使用 v-if 和 v-show 这2个指令。

掌握好这10个指令能够知足开发中的需求了。