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
