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