VUE基础知识07

列表渲染
1.数组遍历:可以绑定key，key是给每一个vnode（虚拟节点）的唯一id，可以依靠key，更准确、快速地拿到oldVnode中的对应node节点。
2.遍历对象：官网vue.js可以查看用法。
新建组件：ListRender.vue
shortif组件可以帮助生成独一无二的id：右击项目打开终端，npm i shortid --save在当前工程里面安装三方类库，在package.json里面查看情况。

//key保持独一无二性，可以有其他操作。
<ul>
<li v-for = "(person,index) in persons" :key="personsKeys[index]">
id: {{personsKeys[index]}} ：{{index}} )姓名： {{person.name}},年龄： {{person.age}},年龄： {{person.sex}}
</li>
</ul>
<ul>
<li v-for = "(item,key) in persons[0]" :key="personsKeys[index]">
{{key}}：{{item}}
</li>
</ul>

import shortId from 'shortid'

data(){
    persons:[
        {name:'张三',age:18,sex:'男'},
        {name:'李四',age:18,sex:'男'},
        {name:'王五',age:18,sex:'男'}
    ],
    personsKeys:[]
}

//生命周期结束调用
mounted(){
    this.personsKeys = this.persons.map(v=>shortId.generate())
}