超緊繃!30天Vue.js學習日記 指令V集合!(2)

大家好,我們終於來到第7篇了…咳咳
昨天有講了一些指令,但是沒講完,所以今天要介紹的是其他指令:
主要分別是v-model , v-once , v-for , v-html , v-text …

• v-model

v-model指令跟v-bind很像,都是用於綁定資料的,不過v-bind是單向綁定,v-model則是雙向綁定,差別在哪呢?單向綁定只能將資料渲染到DOM上,而雙向綁定不只能做到這個,更可以直接在上面修改我們所綁定的資料,前者在昨天的教學已經提到了,所以我們著重在後者的部分:

<div id="app4">
	<input type="text" v-model="msg">
	<span>Your input is : {{msg}}</span>
</div>
<script>
var app4 = new Vue({
el:'#app4',
data:{
msg:''
}	
})
</script>

• v-once

該指令用來表示該元素只能渲染一次,因此我們打開console輸入:

app3.msg = 555

會發現僅有一項span標籤的值被渲染,另一個有包含v-once指令的span標籤則否。

<div id="app3">
	<span v-once>{{msg}}</span>
	<span>{{msg}}</span>
	<!-- console:app3.msg = 555 -->
</div>
<script>
var app3 = new Vue({
el:'#app3',
data : {
msg : '123456'
}
})
</script>

• v-for

如果各位有碰過其他程式語言的話,便不難發現它其實是個for-loop,因此該範例會照順序將app5 instance中的item逐一印出來。

<div id="app5">
  <ul>
    <li v-for="(item, index) in item">
      index: {{ index }}
      name: {{ item.name }}
    </li>
  </ul>
</div>
<script>
var app5 = new Vue({
  el: '#app5',
  data: {
    item: [
      { id: '123456789', name: '1' },
      { id: '234567890', name: '2' },
      { id: '345678901', name: '3' }
    ]
  }
});
</script>

• v-html

在Vue中，不能透過雙括號將html的元素插入到模板中，如果字串包含html元素會直接被解析成字符實體,使用瀏覽器打開範例可以發現,若沒有使用v-html,瀏覽器會將data中google存放的字串直接印出來。

<div id="app">
	<div v-html="google"></div>
	<div>{{google}}</div>
</div>
<script>
var app = new Vue({
	el: '#app', 
	data: {
		google: '<a href="http://google.com">Google</a>'
	},
})
</script>

• v-text

該指令是用於更新元素的textContent,與雙括號不同的是,v-text需要被綁定在某個元素上,能夠避免還沒編譯前的閃現問題。

閃現問題:若我們直接使用雙括號,在生命週期created期間,在這個時候範例中的msg尚未被編譯至{{msg}}中,所以user是能在網頁載入的一瞬間看到{{msg}},使用v-text可以避免這個問題產生。

<span v-text="msg"></span>

• v-cloak

該指令可以隱藏未被編譯的{{}},直到綁定的實例準備完畢,因此也能避免掉閃現問題。

<span v-cloak="msg">{{msg}}</span>

範例請在這邊下載:

https://drive.google.com/open?id=1T7u-GFcLJIhA9jyH0BHgaWEdBTFfPtjB

今天的教學就到這邊結束,我們明天見~