组件化基本使用

简单的组件示例

```html

  <div id="app">

    <!-- 3.使用组件 -->

    <my-cpn></my-cpn>

    <my-cpn></my-cpn>

    <my-cpn></my-cpn>

    <cpnc></cpnc>

  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

  <script>

    // 1.创建组件构造器对象

    const cpnc = Vue.extend({

      template:`

        <div>

          <h2>标题</h2>

          <p>内容1...<p>

          <p>内容2...<p>

        </div>`

    })

    // 2.注册组件

    Vue.component('my-cpn', cpnc)

    const app = new Vue({

      el:"#app",

      data:{

      },

      components:{//局部组件创建

        cpnc:cpnc

      }

    })

  </script>

```

​  组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 `my-cpn`。我们可以在一个通过 `new Vue` 创建的 Vue 根实例中，把这个组件作为自定义元素来使用： `<my-cpn></my-cpn>`。