第一步：如何创建组件（原生方法）：

//Vue.extend是继承的意思，继承这个对象创建一个新的组件（相当于一个类）
let my_component =Vue.extend({
        template:'<p><span>{{test_data}} </span></p>',
        data:function() {
            return {
                test_data:"这是一个组件，相当于一个类",
            }
        }
    })


//当然在全局Vue.component或局部components注册组件名时,Vue.extend()可以省略！
Vue.component("name",{});

第二步：组件相当于一个类，必须实例化且挂在在Vue实例中才可以使用（实例化的三种方法）

//组件实例化的三种方式:
//第一种：new一个组件实例，然后通过实例的vm.$mount方法手动挂在到.container 元素对象中去！
new my_component().$mount(".container");

//第二种：先注册一个全局组件，然后把<my-kirin-global></my-kirin-global>元素放在.container实例下面;
//全局组件可以挂在在任何一个实例下面，而局部组件只能挂在在当下实例中！
//切记：每一个组件无法单独使用，必须挂在在Vue实例对象内部！
Vue.component("my-kirin-global", my_component);

//第三种，先注册一个局部组件，然后把<my-kirin-local></my-kirin-local>元素必须放在.container实例下面;
const app =  new Vue({
        el:".container",
        components:{
            "my-kirin-local":my_component,
        }
    });

});