08、实战前必须掌握的10个指令(下)

6.v-for 指令

---

  

    {{ index }}--{{ item }}
  

效果图.png

7.v-bind 指令

---

用于动态绑定 DOM 元素的属性，比较常见的比如：标签的 href 属性，标签的 src 属性。

  百度首页

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

效果图.png

8.v-on 指令

---

v-on 指令相当于绑定事件的监听器，绑定的事件触发了，可以指定事件的处理函数。

  点击

效果图.png

9.v-model 指令

---

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

  
  
你输入：{{ msg }}

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

效果图.gif

10.v-once 指令

---

它的特定是只渲染一次，后面元素再更新变化，都不会重新渲染。

   
   
你输入：{{ msg }}

效果图.gif