Vue踩坑笔记（一）

最近在用vue做的一个项目中用到组件，我想通过v-for指令，在子组件内部动态构造出li标签，添加不同的内容，在官网上没有找到在组件内部使用v-for的例子，一开始vue实例化的时候数据总是加载不出来，后来同事提示原来数据需要定义在父组件中，问题解决。下面是代码，作为记录，以后会用的着。。。

//定义一个网站质量组件
    var zhiliangList=Vue.extend({   //定义一个子组件，组件内的li标签想v-for出来
          template:'<li>'
                    +'<div class="blockDiv">'
                        +'<span class="shuLine" :class="item.linesy"></span>'
                        +'<table class="tableWidth">'
                            +'<tbody>'
                                +'<tr><td width="36%">'
                                    +'<span :class="item.cjlogo"></span>'
                                +'</td>'
                                +'<td width="32%">'
                                    +'<label>延时：<label class="color_3">{{item.ys}}</label> s</label>'
                                +'</td>'
                                +'<td width="32%">'
                                    +'<label>忙时：<label class="color_3">{{item.ms}}</label> s</label>'
                                +'</td></tr>'
                            +'</tbody>'
                        +'</table>'
                    +'</div></li>',
          props:['item']
        });
        
        //网站质量数据
        var zhiliangArray=[{
                        ys:"2.48",
                        ms:"3.13",
                        cjlogo:"taobao_logo",
                        linesy:"redLine"
                    },
                    {
                        ys:"2.48",
                        ms:"3.13",
                        cjlogo:"jd_logo",
                        linesy:"orangeLine"
                    },
                    {
                        ys:"1.98",
                        ms:"2.83",
                        cjlogo:"souhu_logo",
                        linesy:"yellowLine"
                    },
                    {
                        ys:"1.48",
                        ms:"2.53",
                        cjlogo:"sina_logo",
                        linesy:"greenLine"
                    },
                    {
                        ys:"1.08",
                        ms:"2.13",
                        cjlogo:"wangyi_logo",
                        linesy:"blueLine"
                    }];
        
        
        Vue.component('zhiliang',{  //定义父组件，在父组件内部注册子组件
          template:'<ul><zhiliang-list v-for="item in items" :item="item"></zhiliang-list></ul>',
          data:function(){
              return {
                  items:zhiliangArray
              }
          },
          components:{
            'zhiliang-list':zhiliangList
          }
        });