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

6.v-for 指令

---

<div id="app">
  <div v-for="(item, index) in list">
    {{ index }}--{{ item }}
  </div>
</div>
<script>
let app = new Vue({
  el: '#app',
  data: {
    list: ['Tom', 'John', 'Lisa']
  }
})
</script>

效果图.png

7.v-bind 指令

---

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

<div id="app">
  <a v-bind:href="link">百度首页</a>
</div>
<script>
let app = new Vue({
  el: '#app',
  data: {
    link: 'http://www.baidu.com'
  }
})
</script>

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

效果图.png

8.v-on 指令

---

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

<div id="app">
  <button v-on:click="say">点击</button>
</div>
<script>
let app = new Vue({
  el: '#app',
  methods: {
    say() {
      console.log('Hello World!')
    }
  }
})
</script>

效果图.png

9.v-model 指令

---

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

<div id="app">
  <input v-mode="msg" type="text">
  <p>你输入：{{ msg }}</p>
</div>
<script>
let app = new Vue({
  el: '#app',
  data: {
    msg: ''
  }
})
</script>

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

效果图.gif

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

效果图.gif