什么是组件化？
当我们遇到复杂问题的时候：
- 任何一个人处理信息的逻辑能力都是有限的
- 所以，当我们面对一个复杂的问题的时候，我们不可能一次性搞定处理掉一大堆内容
- 但是我们都会有问题拆解的能力
- 将一个复杂的问题拆解成很多小的问题处理，再将这些小问题放到整体中，这样很多问题都会迎刃而解了
Vue组件化思想
- 组件化是Vue.js中的一个重要的思想
- 它提供的是一种抽象，可以让我们开发一个个独立可复用的小组件来构造我们的应用。
- 任何一个组件都会被抽象为一棵树。
注册组件的基本步骤
组件的使用分为3个步骤：
- 创建组件构造器
const cpnC = Vue.extend({template:`<div><h2>我是标题</h2><p>我是内容：哈哈哈</p><p>我是内容：呵呵呵</p></div>`
- 注册组件
Vue.component('my-cpn',cpnC)
- 使用组件
<my-cpn></my-cpn>
<my-cpn></my-cpn>
<my-cpn></my-cpn>
<my-cpn></my-cpn>
需求：当有一块内容需要重复显示的时候就可以利用组件化的思想–>将一块内容重复显示4次
1.一般方法
<div><h2>我是标题</h2><p>我是内容：哈哈哈</p><p>我是内容：呵呵呵</p>
</div>
<div><h2>我是标题</h2><p>我是内容：哈哈哈</p><p>我是内容：呵呵呵</p>
</div>
<div><h2>我是标题</h2><p>我是内容：哈哈哈</p><p>我是内容：呵呵呵</p>
</div>
<div><h2>我是标题</h2><p>我是内容：哈哈哈</p><p>我是内容：呵呵呵</p>
</div>
2.组件化实现
<my-cpn></my-cpn>
<my-cpn></my-cpn>
<my-cpn></my-cpn>
<my-cpn></my-cpn>
完整代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="author" content="xiaonaihu" /><meta name="generator" content="HBuilder X" /><title>组件化的基本使用</title><script src="../../lib/vue.min.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app"><!-- 3.使用组件 --><my-cpn></my-cpn><my-cpn></my-cpn><my-cpn></my-cpn><my-cpn></my-cpn></div><script type="text/javascript">// 1.创建组件的构造器对象const cpnC = Vue.extend({template:`<div><h2>我是标题</h2><p>我是内容：哈哈哈</p><p>我是内容：呵呵呵</p></div>`})// 2.注册组件Vue.component('my-cpn',cpnC)var app = new Vue({el: "#app",data:{message:"hello vue"}});</script></body>
</html>
