[Vue]组件component(七)

component

定义页面局部区域块，完成单独页面的小功能

代码块

<div id="myApp">
  <ol>
<!-- 
1. 先定一个game-item的标签
2. v-for遍历games数组
3. 将遍历后的每一个item赋值给game变量
-->
    <game-item v-for="item in games" v-bind:game="item"></game-item>
  </ol>

</div>
<script>
  /*定义组件 定义了一个html的标签*/
  Vue.component('game-item', {
    props: ['game'],
    template: '<li>{{game.title}}</li>'
  })
  var myApp = new Vue({
    /*绑定标签的id*/
    el: '#myApp',
    /*标签上绑定的数据*/
    data: {
      games: [
        {title: '斗地主'},
        {title: '打麻雀'},
        {title: 'UNO'},
      ]
    },
  });
</script>

END