史上最詳細VUE2.0全套demo講解 基礎2（列表渲染）

時間  2019-11-05
標籤 史上 詳細 vue2.0 vue 全套 demo 講解 基礎 列表 渲染 简体版
原文   原文鏈接

做者 ：混元霹靂手-Ziksangjavascript

在基礎1發佈以後，我真心發現，根據api進一步分析，再結合工做中的實際demo給你們講解以後，大清早就收穫了平均一分種一個喜歡，這使我很欣慰，本身的努力沒有白費，我決心稱熱打鐵立刻出擊，打造基礎2，在基礎上的部分我將給你們講解列表渲染 v-for指令，在我本身認爲這個是基礎篇的核心，爲何我要放在第二部分講呢，由於我有不少demo例子都會基於v-for指令去講，這也是咱們工做的核心，從後臺拿數據，再渲染數據，若是有對基礎1由於v-for指令看的不是很透徹的話，請看完這篇再回頭看看基礎1，仍是那句話，支持我創做的請給一個大大的喜歡html

贊

v-for 列表渲染前端

  1. v-for array 數組渲染

咱們用v-for指令根據一組數組的選項列表進行渲染。 v-for指令須要以item in items形式的特殊語法， items 是源數據數組而且 item 是數組元素迭代的別名。vue

應用場景：
一般狀況下，進入一個活動要展現出全部參加活動的人員，裏面有姓名，年齡，報名時間等等，就先舉這三個列子，那後臺確定會返回一個arraylist數組集合，集合中每一個元素確定是一個對象，那咱們如何去把這個數組集合高效率，合理的渲染到頁面上，,再拿到用戶id去到下一個頁面查詢memberDetail祥情，用過jq的同窗確定知識很煩繁，通常確定是用arttemplate這種模板引擎java

<template>
     <div>
         <ul>
             <li v-for="(item,index) in memberList" @click="memberDetail(index)">
                 <span>{{item.custName}}</span>
                 <span>{{item.age}}</span>
                 <span>{{item.joinTime}}</span>
             </li>
         </ul>
     </div>
</template>

<script>
export default {
     created () {
         //就當看做是ajax在初始化進入的時候從後臺獲取的用戶列表數據
         this.memberList = [
            {custName : "ziksang1",age:20,joinTime : "2014-01-02",custId:1},
            {custName : "ziksang2",age:21,joinTime : "2014-01-03",custId:2},
            {custName : "ziksang3",age:22,joinTime : "2014-01-04",custId:3},
            {custName : "ziksang4",age:23,joinTime : "2014-01-05",custId:4},
         ]
     },
     data () {
         return {
             memberList : []
         }
     },
     methods : {
         memberDetail (index) {
             sessionStorage.custId = this.memberList[index].custId
         }
     }
}
</script>複製代碼

我以爲這個demo太經常使用了，逐行分析
1.若是在template模板裏面用到了數據必須先在data選項裏先聲明賦值，咱們先給memberList給予一個[]數組
2.在created函數裏咱們就看成模擬從後臺拿到的數據，而後賦值給data選項裏的memberList，此時memberList就有後臺拿到的值了
3.(item,index) in memberList是vue本身封裝的一個語法結構
一.item表明集合中的每個元素，此時每個元素就是一個對象
二.index表明集合每個元素的下標
三.memberList是所要循環的數組
4.爲何咱們要把 (item,index) in memberList放在每個循環dom上，那就是li標籤 只有在li循環體節點上和循環體全部子節點上拿到item這個對象裏面的全部屬性
5.@click="memberDetail(index)" 這裏用了一個點擊方法，咱們把index做爲了方法的參數，目的是什麼，這個index表明每個循環出來dom的下標，經過點擊，咱們能夠拿到對應的用戶id能夠說拿到每個用戶的任意值，而後在methods咱們進行操做，咱們能夠能過sessonStorage來存放，用來過分到下一個用戶祥情頁，來獲取全部用戶詳情，咱們能夠打開谷歌瀏覽器，當咱們用鼠標點擊的時候，能夠發現sessionStorage裏的變化es6

整個流程是不管是開發任意中型項目必備的ajax

2.template v-for

如同 v-if 模板，你也能夠用帶有 v-for 的 <template> 標籤來渲染多個元素塊，循環塊區域vue-cli

應用場景 ：
當咱們循環渲染時，咱們若是有多個欠套不合理的關係下，通常狀況下確定是在最外層套一個div元素，這個我認爲顯的不是很清楚，咱們用template來代替渲染，不但能省去很dom節點，並且也能解決欠套不合理的狀況後端

<template>
     <div>
         <template v-for="item in list">
              <p>{{item.content}}</p>
              <img :src="item.img" alt="">
              <p class="divider"></p>
         </template>
     </div>
</template>

<script>
export default {
     data () {
         return {
             list : [
                 {content : 'ziksang',img :'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1301074775,1382810875&fm=80&w=179&h=119&img.JPEG'},
                 {content : 'ziksang2',img :'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1312092207,1376369244&fm=80&w=179&h=119&img.JPEG'}
             ]
         }
     }
}
</script>
<style>
body,html{
    width:100%;
    height:100%
}
.divider{
    width:100%;
    height:1px;
    background:black;
}
</style>複製代碼

若是咱們不想多創節點，又不想讓p元素作爲根節點，咱們就能夠用template來作渲染，在chorme開發者工具上，也能證明，最外層的的template會自動消失，不會創造出多餘的節點。api

3. v-for Object 對象渲染

你也能夠用 v-for 經過一個對象的屬性來迭代。

應用場景 ：
就像第一個列子若是到了詳情頁，咱們要展現一個用戶詳情，若是後端都給你排好序了，如何正確的方便展現出來，用最快，最便捷的方法那就是v-for 迭代對象，通常狀況下展現一個用戶詳情，後臺確定返回一個用戶對象給你

<template>
     <table>
         <template>
            <tr>
                <td v-for="(value,key,index) in memberDetail">{{key}}</td>
            </tr>
            <tr>
                <td v-for="(value,key,index) in memberDetail">{{value}}</td>
            </tr>
         </template>
     </table>
</template>

<script>
export default {
     created () {
        //比方說咱們這裏拿到前面的custId傳給後臺拿到用戶數據
        this.memberDetail = {
                 name : 'ziksang',
                 age : 20,
                 address : "xxx省xxxx市",
                 tel : "15921898427"
             }
     },
     data () {
         return {
             memberDetail : {} 
         }
     }
}
</script>
<style>
body,html{
    width:100%;
    height:100%
}
.divider{
    width:100%;
    height:1px;
    background:black;
}
</style>複製代碼

1.(value,key) in memberDetail
value表明屬性值
key 表明屬性,
index表明每一個dom節點的下標索引
二者都是一一對應的，經過第一個例子講解，我相信這個例子很簡單了

4. v-for 整數迭代

這個看看demo就能夠了，我幾乎沒用過

<div>
  <span v-for="n in 10">{{ n }}</span>
</div>複製代碼

4. v-for 和 組件

在自定義組件裏，你能夠像任何普通元素同樣用 v-for 。

應用場景 ：
比方拿掘金來講，每一個用戶展示的文章列表中，每一個用戶的文章能夠作成一個統一組件，經過父組件來進行數據的傳遞，循環出全部人的文章，就造成了文章列表，並且能夠在熱門，最新，或者專欄裏面複用，只須要經過數據傳遞，是一種至關好的模式

在components文件夾裏創一個myArticle文件

<template>
    <div>
        <p>{{artList.name}}</p>
        <p>{{artList.startTime}}</p>
        <p>{{artList.content}}</p>
        <p>{{artList.good}}</p>
    </div>
</template>

<script>
export default {
    props : ['artList']
}
</script>複製代碼

用props選項來接收父組件傳入的數據，渲染組件

App.vue文件

<template>
     <div> <my-article v-for='item in artList' :art-list='item'></my-article> </div> </template>

<script>
import myArticle from "./components/myArticle.vue"
export default {
    components : {
        myArticle
    },
    created () {
        //比方說咱們是從後臺拿到的文章集合
        this.artList = [
            {name : 'ziksang1' , startTime : '1小時前' , content:'aaaaaaaaa',good : 1},
            {name : 'ziksang2' , startTime : '2小時前' , content:'bbbbbbbbb',good : 2},
            {name : 'ziksang3' , startTime : '3小時前' , content:'ccccccccc',good : 3},
            {name : 'ziksang4' , startTime : '4小時前' , content:'ddddddddd',good : 4}
        ]
     },
     data () {
         return {
             artList : [] 
         }
     }
}
</script>複製代碼

這個須要逐行分析
1.首先們引入組件
2.v-for來循環組件
3.把每一個文章的數據用 :art-list='item'傳給myArticle組件
如咱們進行下拉加載和上拉刷新的話，只要把取到的數據再次重新賦給子組件就能夠了，並且咱們還能夠在各個頁面來重複複用這個組件，減小開發工做量

4. 數組更新檢測

1.數組變異

說的通俗一點，實是就是咱們用Array.prototype裏提供的原型方法裏咱們能直接改掉data選項裏的數據，觸發了視圖更新，那就是叫數組變異方法
官方給你們列了只有那些方法能觸發視圖更新
1.push()
2.pop()
3.shift()
4.unshift()
5.splice()
6.sort()
7.reverse()

應用場景，咱們比方說咱們是絕境的後臺控制者，咱們無聊看那個文章不爽，咱們對文章進行操做，這個只是我瞎說玩玩的場景，就是用情景去模擬用法的場景

App.vue文件

<template>
     <div> <my-article v-for='item in artList' :art-list='item'></my-article> <button @click='push'>添加文章</button> <button @click='pop'>尾部去除一篇文章</button> <button @click='unshift'>在頭部加入一條數據</button> <button @click='shift'>在頭部去除一條數據</button> <button @click='reverse'>把全部數據進行反轉</button> <button @click='clear'>清除全部數據</button> </div> </template>

<script>
import myArticle from "./components/myArticle.vue"
export default {
    components : {
        myArticle
    },
    created () {
        //比方說咱們這裏拿到前面的custId傳給後臺拿到用戶數據
        this.artList = [
            {name : 'ziksang1' , startTime : '1小時前' , content:'aaaaaaaaa',good : 1},
            {name : 'ziksang2' , startTime : '2小時前' , content:'bbbbbbbbb',good : 2},
            {name : 'ziksang3' , startTime : '3小時前' , content:'ccccccccc',good : 3},
            {name : 'ziksang4' , startTime : '4小時前' , content:'ddddddddd',good : 4}
        ]
     },
     data () {
         return {
             artList : [] 
         }
     },
     methods : {
          push () {
            this.artList.push({
                name : 'ziksang5' ,
                 startTime : '5小時前' ,
                  content:'eeeeeeeeee',
                  good : 5})
        },
        pop () {
            this.artList.pop()
        },
        shift () {
            this.artList.shift()
        },
        unshift () {
            this.artList.unshift({
                name : 'ziksang3',
                age : 40
            })
        },
        reverse () {
            this.artList.reverse()
        },
        clear () {
            this.artList = []
        }
     }
}
</script>複製代碼

咱們發現咱們點這些按鈕的時候，myArticle的視圖同時跟着改變，這就是咱們須要的效果就是變異方法根本的意思，能通過Array.prototype裏的原形方法改變data選項artList數組觸發視圖改變的方法就是變異方法

2.數組非變異

no-mutation methods(非變異方法)，不能經過Array.prototype裏的原形方法改變data選項artList數組觸發視圖改變的方法就是非變異方法，其他的方法都是操做後，造成一個返回值，全部操做只是返回了一個新數組，而不會觸發視圖更新
有1.filter(), 2.concat(), 3.slice(), 4.map()

<template>
  <div>
      <ul>
         <li v-for = " (item,index) in list" v-text='`${item} - ${index} `'></li>
      </ul>
      <button @click="filter">數組進行取餘過濾</button>
      <button @click="concat">數組進行合併</button>
      <button @click="map">數組印射</button>
      <button @click="slice">返回截取後的數組</button>
  </div>
</template>

<script>

export default {
    data () {    
        return {
            list : [ 1, 2, 3, 4],
            list2 : [ 7, 8, 9, 0 ]
        }
    },
    methods : {
        filter () {
            this.list = this.list.filter((item)=>{
                return item % 2
            })
        },
        concat () {
            //以上兩種方法均可以
            //1.第一種是es6的解構操做符
            //2.第二種是傳統的數組合並
            this.list = [...this.list,...this.list2]
            //this.list = this.list.concat(this.list2)
        },
        map () {
            this.list = this.list.map(item =>{
                return `${item} map`
            })
        },
        slice () {
            this.list = this.list.slice(2)
        }
    }
}

</script>複製代碼

那咱們最終目的仍是要經過方法來改變視圖更新，怎麼辦，很簡單，只要把造成的返回值再重新賦值給data選項裏的數組就能夠了，看api文檔提及來很高深的樣子，但根本原理就是Array.prototye原型上方法導的鬼，我相信你們確定很清楚了，上面我還在代碼中對...解構新特性給你們演示了一個例子

4. 注意示項

官方提示：
因爲 JavaScript 的限制， Vue 不能檢測如下變更的數組：
當你利用索引直接設置一個項時，例如：vm.items[indexOfItem] = newValue
當你修改數組的長度時，例如：vm.items.length = newLength

在

<template>
  <div>
      <ul>
         <li v-for = " (item,index) in list" v-text='`${item} - ${index} `'></li>
      </ul>
      <button @click="change3">改變數組第2個值,改爲0</button>
      <button @click="change4">改變數組第2個值,改爲5</button>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
    data () {    
        return {
            list : [ 1, 2, 3, 4],
            list2 : [ 7, 8, 9, 0 ]
        }
    },
    methods : {
        //經過下標來改變整個數組裏的值也是行不通的
        changeList () {
            this.list[2] = 3
        },
        //經過數組長度改變改個數組裏的值是行不通的
        changeList2 () {
            this.length = 1
        },
        //第一咱們能夠經過，vue.set實列方法來改變，但咱們要在開頭再引一入下vue包
        // 1 第一個值表明須要改變的數組
        // 2 第二個表明改變那一項
        // 3 第三個表明改爲什麼值
        //樣式語法 Vue.set(example1.items, indexOfItem, newValue)
        change3 () {
            Vue.set(this.list,1,0)
        },
        //經過 Array.prototype.splice 數組原型上的方法來改變整個數組的長度或者內容
        //這個方法你們確定經常使用，我就不細說了
        change4 () {
            this.list.splice(1,1,5)
        }
    }
}

</script>複製代碼

這裏由於操做問題我就在代碼中直接寫了註釋，更加能讓你們清楚的瞭解，如何經過那些方法改變數組的長度，改變下標的某一個元素

5. 顯示過濾/排序效果

對於個人理解我就定義他叫副本過濾，在不改動data選項原數組的同時，對新數組進行改變，同時也不創造出多餘的數據值，那咱們這裏就要用到一個基礎3所要講的計算屬性
應用場景 ：
我在這裏作了一個小demo當原數組裏面隨機改變值的同時，副本基於原數組的建立出一個副本數組跟着過濾的不一樣而改變
有兩個視圖：
1.第一個視圖，咱們點擊按紐改變1-10的隨機數
2.第二個視圖，隨着隨機數的改變來判斷是否爲偶數是偶數的則過濾出來

<template>
  <div>
      <ul>
         <li v-for = " (item,index) in list" v-text='`${item} - ${index} `'></li>
      </ul>
      <ul>
         <li v-for = " (item,index) in filter" v-text='`${item} - ${index} `'></li>
      </ul>
      <button @click="randomList">隨機重置數組的值</button>
  </div>
</template>

<script>
export default {
    data () {    
        return {
            list : [ 1, 2, 3, 4]
        }
    },
    //檢測計算 隨着原數組用隨機數改變的同時，來篩選出不一樣的過濾結果，篩選結果是原數組的裏面爲偶數的值拼成一個新數組
    //1.咱們還能夠用methods方法，可是不能一直監控
    computed : {
        filter () {
            return this.list.filter((item)=>{
                 return item % 2
            })
        }
    },
    methods : {
        //這裏就是隨着改變data原數組裏的值
        randomList () {
            this.list = this.list.map(item => {
                return item+Math.round(Math.random()*9+1)
            })
        }
    }
}

</script>複製代碼

隨着咱們點擊按鈕的同時，兩個視圖同時更新，本質上就是在data選項裏過濾出一個新數組，同時這個新數組不會影響到data選項裏的數組，這個就叫作副本過濾，經過本身的想像能夠作出不少不一樣的demo例子

講到這個裏全部v-for 列表渲染已經講的我我的認爲很是透徹了，若是你動手去把這些代碼貼進vue-cli中理解一下，再動手本身敲兩個demo，我想你的項目開發速度絕對能提高一倍，最後別望了點贊哦，仍是那句話個人更新速度，取決於大家對個人承認，謝謝

掘金史上最詳細VUE2.0全套demo講解（基礎篇3） ==> 計算屬性

渣渣前端開發工程師，喜歡鑽研，熱愛分享和講解教學， 微信 zzx1994428 QQ494755899

支持我繼續創做和感到有收穫的話，請向我打賞點吧

若是轉載請標註出自@混元霹靂手ziksang

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程