VUE学习日记（五） ---- 组件定义 component

 案例1

<div id="myPage">
      <today-weather></today-weather>
    </div>    

    <script>
      Vue.component('today-weather',{
        template:'<div>今天真是个好天气啊！吃顿好的！</div>'
      });
      var myPage = new Vue({
        el:'#myPage',        
      })
    </script>

效果展示：

 

 

 

 

 

 案例2

<div id="myPage">
      <ol>
        <game-item v-for="item in games" v-bind:game="item"></game-item>
      </ol>
    </div>    

    <script>
      // 定义一个名为game-item的组件
      Vue.component('game-item',{
        props:['game'],
        template:'<li>{{game.name}}</li>'
      });
      var myPage = new Vue({
        el:'#myPage',
        data:{
          games:[
            {name:'元气骑士'},
            {name:'水浒Q传'},
            {name:'战魂铭人'}
          ]
        }
      })
    </script>

 

效果展示：