Vue. js 六、组件化开发（一）

组件化思想

它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。

有了组件化的思想，我们在之后的开发中就要充分的利用它。

尽可能的将页面拆分成一个个小的、可复用的组件。

这样让我们的代码更加方便组织和管理，并且扩展性也更强

• 组件的使用分成三个步骤：
  1.创建组件构造器
  2.注册组件
  3.使用组件

<div id='app'>  
    <!-- 3.使用组件 -->
    <my-cpn></my-cpn>
    <my-cpn></my-cpn>
</div>
<!-- <my-cpn></my-cpn>  //如果在实例外面使用组件的话是没有用的 -->

1.Vue.extend()：

• 调用Vue.extend()创建的是一个组件构造器

2.Vue.component()：

• 调用Vue.component()是将刚才的组件构造器注册为一个组件，并且给它起一个组件的标签名称。
• 所以需要传递两个参数：1、注册组件的标签名 2、组件构造器

3.组件必须挂载在某个Vue实例下，否则它不会生效。

<script>
// 1.创建组件
let cpn = Vue.extend({
    template:`
    <div>
    	<h2>我是组件</h2>
    	<p>1.创建组件</p>
    	<p>2.注册组件</p>
    	<p>3.使用组件</p>
    </div>
    `
})
// 2.注册组件
Vue.component('my-cpn',cpn)

let app = new Vue({
    el:'#app'
});
</script>