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>