史上最详细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教程