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
