第八节：实战前必须掌握的10个指令(下)

第八节：实战前必须掌握的10个指令(下)

前端君 翻身的码农
上一节咱们学了5个重要的指令： v-text 、 v-html 、 v-show 、 v-if 、 v-else

传送门:《 实战前必须掌握的10个指令(上) 》

这一节，咱们继续学习剩下的5个指令。话很少说，撸起来！

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。

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

<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>

methods选项的用法再也不展开讲解，还不理解的同窗能够翻看第四节《定义一个vue实例经常使用的4个选项》

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

(gif图，加载须要点时间)

点击按钮，能够成功触发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”。再看看效果，是否是在咱们的预期以内：

(gif图，加载须要点时间)

“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的内容显示出来，看是否是跟用户输入的内容是同步更新的：

(gif图，加载须要点时间)

是否是比你手动更新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的初始值再也不是空字符串。咱们来看看效果：

(gif图，加载须要点时间)

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

本节小结

---

学完本节，你应该掌握了 v-for 、 v-bind 、 v-on 、 v-model 、 v-once 这5个指令的用法，加上第七节的5个指令，能够知足你在开发中的需求了。