Vue组件

1.注册全局组件

    <div id="app">
    <component-a></component-a>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    
    <script>
        // 注册全局组件
        // 组件名驼峰，横线分隔符命名
        // 使用组件，使用横线分隔符命名
    Vue.component('component-a',{
        // 指定组件的模板
   template:`<div><h1>{{name}}</h1></div>`,
//  在组件中data值是一个函数，需要有 return  且返回一个对象
   data:function(){    
       return {
           name:"全局组件"
       }
   }
  
    })    

2.注册局部组件

    var vm = new Vue({
    el: '#app',
    data: {
    
    },
   components:{
    "component-b":{
        template:`<div><h1>头部组件----{{name}}</h1></div>`,
        data:function(){
            return {
                name:"局部组件"
            }
        }
    }
}
    })

 3.组件的抽取

    <div id="app">
            <app-header></app-header>    //加载头部组件
            <app-main></app-main>        //加载main组件
            <app-footer></app-footer>    //加载底部组件
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    
    <script>
    // 头部组件
    Vue.component('app-header',{
        template:`
        <div class="header"><h1>头部组件</h1></div>
        `
    })
    // main组件
    Vue.component('app-main',{
        template:`
        <div class="main">
        <ul>
            <li>用户管理</li>
            <li>账户管理</li>
            <li>供应商管理</li>
        </ul>
    </div>
        `
    })
    // 底部组件
    Vue.component('app-footer',{
        template:`
        <div class="footer"><h1>底部组件</h1></div>
        `
    })
    
     //组件管理
    var vm = new Vue({
    el: '#app',
    })
    
    </script>