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 指令
用于動(dòng)態(tài)綁定 DOM 元素的屬性，比較常見(jiàn)的比如：<a>標(biāo)簽的 href 屬性，<img/>標(biāo)簽的 src 屬性。
<div id="app">
<a v-bind:href="link">百度首頁(yè)</a>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
link: 'http://www.baidu.com'
}
})
</script>
用 v-bind 指令來(lái)修飾 href 屬性，表明它的值是一個(gè)動(dòng)態(tài)的值，對(duì)應(yīng)的則是 data 中的 link 的值：http://www.baidu.com
效果圖.png
8.v-on 指令
v-on 指令相當(dāng)于綁定事件的監(jiān)聽(tīng)器，綁定的事件觸發(fā)了，可以指定事件的處理函數(shù)。
<div id="app">
<button v-on:click="say">點(diǎn)擊</button>
</div>
<script>
let app = new Vue({
el: '#app',
methods: {
say() {
console.log('Hello World!')
}
}
})
</script>
效果圖.png
9.v-model 指令
這是一個(gè)最重要最常用的指令，一般用在表單輸入，它幫助我們輕易地實(shí)現(xiàn)表單控件和數(shù)據(jù)的雙向綁定，相對(duì)以前的手動(dòng)更新 DOM，簡(jiǎn)直就是開(kāi)發(fā)者的福音，下面我們來(lái)看看它的用法：
<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 指令，并指定關(guān)聯(lián)的數(shù)據(jù) msg，我們就可以輕松把用戶輸入的內(nèi)容綁定在 msg 上。我們把 msg 的內(nèi)容顯示出來(lái)，看是不是跟用戶輸入的內(nèi)容是同步更新的：
效果圖.gif
10.v-once 指令
它的特定是只渲染一次，后面元素再更新變化，都不會(huì)重新渲染。
<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,公眾號(hào)的同學(xué)們'
}
});
</script>
效果圖.gif
