Vue入門教程04-循壞語句的渲染

1、v-for列表渲染：

v-for 指令循壞的語法格式： 【item in items】 或者使用of代替in ；
v-for 可以將數組渲染到一個列表中，如下：

<template>
  <div class="hello">
    <ol>
      <!-- books是定義好的數組，book是數組內單個對象的別名 -->
      <li v-for="book in books">
        {{ book.name }}
      </li>
    </ol>
  </div>
</template>
<script>
  export default {
    name: 'hello',
    data () {
      return {
        books: [
          { name: '《VueJS入門到放棄》' },
          { name: '《Java編程思想》' },
          { name: '《柴靜.看見》' }
        ]
      }
    }
  }
</script>

2、v-for模板渲染：

  <div class="hello">
    <ul>
      <template v-for="book in books">
        <li>{{ book.name }}</li>
        <li>*********************</li>
      </template>
    </ul>
  </div>

3、v-for 迭代對象：

1）value屬性迭代：

  <div class="hello">
    <ul>
      <li v-for="value  of bookshop">
        <span>{{ value }}</span>
      </li>
    </ul>
  </div>

2）key屬性迭代:

  <div class="hello">
    <ul>
      <li v-for="(value, key)   of bookshop">
        <span>{{ key }} : {{ value }}</span>
      </li>
    </ul>
  </div>

3）index索引迭代:

最後，編寫一個完整的代碼迭代對象的三種屬性：

<template>
  <div class="hello">
    <ul>
      //value、key、index三個參數變量名稱是可以自定義的，但是參數的位置含義是固定的：(值，鍵，索引)
      <li v-for="(value, key, index)  of bookshop">
        <span> {{ index }}. {{ key }} : {{ value }}</span>
      </li>
    </ul>
  </div>
</template>
<script>
  export default {
    name: 'hello',
    data () {
      return {
        bookshop: {
          name: '老百姓百科書店',
          url: 'http://www.老百姓百科書店.com',
          address: '123市456路789號'
         }
      }
    }
  }
</script>

4、v-for 迭代整數：

整數的迭代很簡單：

  <div class="hello">
    <ul>
      <li v-for="n in 10">
        {{ n }}
      </li>
    </ul>
  </div>

5、關於數組更新的渲染機制：

1）、自動渲染：

當數組執行以下的函數操作時，會觸發重新渲染：

	當數組執行以下的函數操作時，會觸發重新渲染：
	push() : 在數組的末屬添加一個或多個元素;
	pop(): 把數組中的最後一個元素刪除;
	shift(): 把數組中的第一個元素刪除;
	unshift(): 在數組的前端添加一個或多個元素;
	splice():向/從數組中添加/刪除項目，然後返回被刪除的項目;
	sort(): 數組排序;
	reverse(): 顛倒數組中元素的順序;

打開Chrome瀏覽器的控制檯，動態爲數組添加元素時，數組列表會自動重新渲染。

2）、非自動渲染：

a.由於filter()、concat() 和 slice() 函數不會改變原始數組，而是返回一個新數組。當執行此類函數時，數組列表的不會重新渲染的，需要對原數組進行重新賦值才能觸發渲染動作：

	filter()：過濾器
	concat(): 拼接
	slice()：可從已有的數組中返回選定的元素

//filter()、concat() 和 slice() 函數不會觸發重新渲染，需要重新對原數組賦值才能觸發渲染動作：
myArray = myArray.filter(function () {
  return xxxx
})

b.由於 JavaScript 機制的限制，以下數組的變動方式也不會被檢測到：

//一、使用索引設置數組
//解決方案：使用Vue.set(myArray, inedx, newValue)或myArray.splice(indexOfItem, 1, newValue)賦值
myArray[index] = newValue;

//二、改變數組長度
//解決方案：使用myArray.splice(newLength)來替代；
myArray.length = newLength;

END.