Vue踩坑筆記（一）

didikee 發(fā)布于2019-08-21 15:20 / 1766人閱讀

摘要：下面是代碼，作為記錄，以后會用的著。。。定義一個網(wǎng)站質(zhì)量組件定義一個子組件，組件內(nèi)的標(biāo)簽想出來延時忙時網(wǎng)站質(zhì)量數(shù)據(jù)定義父組件，在父組件內(nèi)部注冊子組件

最近在用vue做的一個項目中用到組件，我想通過v-for指令，在子組件內(nèi)部動態(tài)構(gòu)造出li標(biāo)簽，添加不同的內(nèi)容，在官網(wǎng)上沒有找到在組件內(nèi)部使用v-for的例子，一開始vue實例化的時候數(shù)據(jù)總是加載不出來，后來同事提示原來數(shù)據(jù)需要定義在父組件中，問題解決。下面是代碼，作為記錄，以后會用的著。。。

//定義一個網(wǎng)站質(zhì)量組件
    var zhiliangList=Vue.extend({   //定義一個子組件，組件內(nèi)的li標(biāo)簽想v-for出來
          template:""
                    +""
                        +""
                        +""
                            +""
                                +""
                                +""
                                +""
                            +""
                        +""
                                    +""
                                +" "
                                    +"延時：{{item.ys}} s"
                                +" "
                                    +"忙時：{{item.ms}} s"
                                +""
                    +"",
          props:["item"]
        });
        
        //網(wǎng)站質(zhì)量數(shù)據(jù)
        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",{  //定義父組件，在父組件內(nèi)部注冊子組件
          template:"",
          data:function(){
              return {
                  items:zhiliangArray
              }
          },
          components:{
            "zhiliang-list":zhiliangList
          }
        });