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
          }
        });