Vue定义组件

vue组件---组件就是一个大对象
组件 (Component) 是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。
在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。
在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。
一、定义一个组件:
在html中使用<my-aaa></my-aaa>
自定义标签名：小写，并且包含一个短杠，实测大写不支持,,,但是可以在写HTML结构时用大写
1. 全局组件--要注册一个全局组件，使用 Vue.component(tagName, options)
（1）定义全局组件比较常用的方式
Vue.component('my-aaa',{
template:'<strong>好</strong>'，
data:function(){ //组件里面放数据:data必须是函数的形式，函数必须返回一个对象(json)
return {
msg:"123456789"
};
},
methods:{ //组件里其他的用法，和vue实例一样

                 }
             });

        （2） 定义全局组件另一种方式
             var Aaa=Vue.extend({   
                 template:'<h3>我是标题3</h3>',
                 data:function(){  //*组件里面放数据:data必须是函数的形式，函数必须返回一个对象(json)
                     return {
                        msg:"123456789"
                     };
                 },
                 methods:{  //*组件里其他的用法，和vue实例一样

                 }
             });

             Vue.component('aaa',Aaa);
    
    2. 局部组件---放到某个组件内部
         (1) 定义局部组件比较常用的方式
             var vm=new Vue({//组件内部用法同全局组件
                el:'#box',
                components:{
                    'my-aaa':{
                        template:'<h2>标题2</h2>'
                    }
                }
             });

         (2) 定义局部组件另一种方式
             var Aaa=Vue.extend({   
                 template:'<h3>我是标题3</h3>',
                 data:function(){  //*组件里面放数据:data必须是函数的形式，函数必须返回一个对象(json)
                     return {
                        msg:"123456789"
                     };
                 },
                 methods:{  //*组件里其他的用法，和vue实例一样

                 }
             });
             var vm=new Vue({
                 el:'#box',
                 data:{
                    bSign:true
                 },
                 components:{ //局部组件
                    aaa:Aaa
                 }
             });