vue的组件化开发

vue的组件化开发

在我们以前开发前端的时候，把所有的业务都放在了一起，这样做，不管是我们后期的维护还是扩展，都显得含麻烦，也不利于我们的代码重复使用。组件化开发模式也就是为了解决这种麻烦，把我们的复杂业务代码，抽离成一个个组件，当我们需要开发一个页面时，我们就可以直接引入这个组件，直接使用即可！。

1.初步使用vue的组件

注册组件的三个步骤
1.创建组件构造器：
template:代表模板，就是以后你要在页面上显示的html模板代码

 /*创建组件构造器*/
    const cpn = Vue.extend({
        template: `
            <div>
                <h2>我是组件的标题</h2>
                <p>我是组件的内容</p>
            </div>
        `
    });

2.注册组件：
参数1：你给这个组件起的名称，在页面就可以直接把这个当作标签来时用
参数2：上边你创建的组件构造器对象

/*注册组件*/
    Vue.component('my-cpn',cpn);

3.使用组件：注意，组件必须要写在挂载在vue的标签下，否则不生效

<div id="app">
    <my-cpn></my-cpn>