Vue踩坑笔记（一）

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

//定义一个网站质量组件
    var zhiliangList=Vue.extend({   //定义一个子组件，组件内的li标签想v-for出来
          template:'
'
                    +'
'
                        +''
                        +''
                            +''
                                +''
                                +''
                                +''
                            +''
                        +'
'
                                    +''
                                +'
'
                                    +'延时：{{item.ys}} s'
                                +'
'
                                    +'忙时：{{item.ms}} s'
                                +'
'
                    +'
',
          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:'
',
          data:function(){
              return {
                  items:zhiliangArray
              }
          },
          components:{
            'zhiliang-list':zhiliangList
          }
        });