vue - 组件的最最基础、初级写法

html

<div id="app"></div>

js

 <script>
// 子组件
var MyBody = Vue.extend({
     template:`<div @click=show(123)>我是身体</div>`,
     methods:{
         show(num){
             alert(num);
         }
     }
 });
 // 子组件
 var MyHeader = Vue.extend({
     template:`<h1 :haha='123'>我是头部</h1>`         
 });
 // 入口组件
 // template 只能有一个根节点
 var App = Vue.extend({
     components:{
         "my-header":MyHeader,
         "my-body":MyBody
     },
     template:`
     <div>
     <my-header></my-header>
     <my-body></my-body>
     </div>
     `
 })
 new Vue({
     el: "#app",
     components:{
         "app": App  // 声明组件
     },
     template:`<app/>`  // 使用组件
     
 })
</script>

全局组件写法（Vue.component）

全局组件不用声明也可以用

<script>
   Vue.component('mybtn',{
       template:`<button>按钮</button>`
   })
   // 入口组件
   var App = {
       template:`<div>
           不用声明也可以用<br/>
           <mybtn></mybtn>  
        </div>`,
   }

   new Vue({
       el:"#app",
       components:{
           "app":App
       },
       template:`<app/>`
   })
</script>

引入整个vue包的话，使用render加载

import Vue from 'vue';
new Vue({
  el:"#app",
  render:c=>c(App)   //c就是creater
})

引入vue.js的话，可使用template，components

import Vue from 'vue.js';
new Vue({
  el:"#app",
  components:{
    app:App
  },
  template:'<app/>'
})

关于组件名定义的方式