vue組件的數(shù)據(jù)傳輸問(wèn)題

在使用vue組件的數(shù)據(jù)傳輸時(shí)，不顯示
代碼如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
           <div id="B1">
           <ul>
                <Bb v-for="list in lists" v-bind:todo="list" v-bind:key="list.id"></Bb>
           </ul>
           </div>
           <script>
              var B1=new Vue({
                el:'#B1',
                data:{
                  lists:[
                       {id:1,text:'djkasbv'},
                       {id:2,text:'njdkcnsjk'},
                       {id:3,text:'vonifov'}
                  ]
                }
              });
              Vue.component('Bb',{
                props:['todo'],
                template:'<li>{{todo.text}}</li>'
              })
           </script>
</body>
</html>

在瀏覽器中執(zhí)行該頁(yè)面，卻沒(méi)有顯示，請(qǐng)問(wèn)是為什么呢？？

回答

編輯回答

命于你

https://cn.vuejs.org/v2/guide...

2018年4月30日 05:17

編輯回答

神曲

你應(yīng)該先聲明component，然后再初始化Vue；

<script>
Vue.component('Bb',{
    props:['todo'],
    template:'<li>{{todo.text}}</li>'
})
new Vue({
    el:'#B1',
    data:{
          lists:[
               {id:1,text:'djkasbv'},
               {id:2,text:'njdkcnsjk'},
               {id:3,text:'vonifov'}
          ]
        }
  });
             
           </script>

2018年4月22日 06:53