Vue组件注册

1.全局组件注册语法

2.1 全局组件注册语法
    参数1：组件名称；  
    参数2：组件对象（data（组件内部需要的数据），template（模板内容））
    Vue.component('button-counter', {
        data: function(){
            return {
                count: 0
            }
        },
        template: '点击了{{count}}次',
        methods: {
            handle: function(){
                this.count +=2;
            }
        }
    });
    

2.组件使用 , 可重复使用

        
    

    
    

        
        
        
    

 

3.组件注册注意事项

        1. data必须是一个函数
        2. 组件模板内容必须是单个根元素
        3. 组件模板内容可以是模板字符串（使用反引号）
            模板字符串需要浏览器提供支持（ES6语法）
            template:   

                 `

                    点击了{{count}}次
                    测试
                

`

        4.组件的命名方式
            短横线方式
            Vue.component('button-counter', {})
            驼峰方式
            如果使用驼峰式命名组件，那么在使用组件的时候，
            只能在字符串模板中用驼峰的方式使用组件，但是
            在普通的标签模板中，必须使用短横线的方式使用
            Vue.component('helloWorld', {})    

 

4. 注册局部组件

局部组件只能在注册他的父组件中使用
        1.定义一个组件对象
        var HelloJack = {
            data: function(){
                return {
                    msg: '窗外的麻雀'
                }
            },
            template: '

{{msg}}

'
        };
        2.在Vue对象中注册
        var vm = new Vue({
            el:'#app',
            components: {
                'hello-jack': HelloJack,
                'hello-marry': HelloMarry,
                'hello-tom': HelloTom
            }        
        });