<div id="app">
        <my-com></my-com>  <!-- 使用組件：名稱之間用'-'連接  -->
    </div>
    <script>
        //第一步：使用Vue.extend創(chuàng)建組件
        var mycom = Vue.extend({
            template:'<h2>白樺林</h2>'   //template：指定頁面中要展示的html結(jié)構(gòu)
        })
        //第二步：使用Vue.component注冊組件
        Vue.component('myCom',mycom)  //'myCom'是注冊的組件名，在注冊時采用駝峰命名
        new Vue({
            el:'#app'
        })
    </script>

  <template>
      //必須有一個html的標簽作為模板的根標簽
  </template>

<template>
<div>
  <table border="1" align="center">
    <thead>
    <tr>
      <th width="100">編號</th>
      <th width="100">姓名</th>
      <th width="100">年齡</th>
      <th width="100">性別</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="(info,index) in info" :key="index">
      <td>{{ info.id}}</td>
      <td>{{ info.name}}</td>
      <td>{{ info.age}}</td>
      <td>{{ info.sex}}</td>
    </tr>
    </tbody>
  </table>
</div>
</template>
<script>
export default {
  name: "StudentInfo",
  data(){
    return {
      info:[
        {id:1001,name:'黃忠',age:44,sex:'男'},
        {id:1001,name:'小喬',age:19,sex:'女'},
        {id:1001,name:'周瑜',age:22,sex:'男'},
        {id:1001,name:'劉備',age:34,sex:'男'},
      ]
    }
  }
}
</script>
<style scoped>
</style>