Vue组件基础操作介绍

 <div id="app">
        <my-com></my-com>  <!-- 使用组件：名称之间用'-'连接  -->
    </div>
    <script>
        //第一步：使用Vue.extend创建组件
        var mycom = Vue.extend({
            template:'<h2>白桦林</h2>'   //template：指定页面中要展示的html结构
        })
        //第二步：使用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>