20200929_vue组件

组件化 UI界面的角度进行划分：为了拆分代码量，功能细化
模块化是从代码的逻辑划分

组件的创建

方式一

1. 定义 Vue.extend,返回组件的模板对象

    var con1 = Vue.extend({
        template: '<h3>使用Vue.extend创建组件</h3>'
    });

2.注册组件

Vue.component('myConl', con1);

3.在vue挂载的html处挂载相应的标签,如果有大写用横杆割开

<my-conl></my-conl>

可以结合成一步

方式二

   Vue.component('myCom2',{
        template:'<h3>使用标签创建组件</h3>'
    })

组件可以有自己的data，必须为function,内部返回对象

    Vue.component('myCom2', {
        template: '<h3>使用标签创建组件{{msg}}</h3>',
        data: function () {
            return {msg: '这是组件的msg'}
        }
    })