Vue组件化的构建

**

Vue组件化的构建

**
本文主要参照官方文档进行学习思考。
vue组件的用法类似于Java，py等基础语言中的函数，可以重复套用，将多次使用的程序段和功能定义为一个组件，使其可重复利用，便于开发。
根据官方文档指示让我们将一个页面抽象成为一个大的应用或者功能库，然后将他们具有相同功能的模块归到一起，这个集结点为一个组件，之间的互相联系画成图，表现成树状图结构

如果还不是很理解可以借助下图进行理解：

首先对于组件的基本使用：
共有三部：
1，定义组件
2，注册组件
3，使用调用组件
一：如何定义组件
语法如下：

	Vue.extend（此处为可变项，依据功能更改变即可）({
			template:"语句"
})

以上述为例我们在Vue.extend({})中定义了一个template并且其内容是html 的内容。
具体使用示例：

const cpnC = Vue.extend({
    template: `<div>
                <h2>aaa</h2>
                <p>组件内容1</p>
                <p>组件内容2</p>
              </div>`
})

上述代码将其综合在一起，可以自己试着将其分开为js和HTML的内容
接下来就是第二部
二：注册组件
注册组件语法：

Vue.component("组件名称", 组件内容)

我们使用上述的语法格式进行组件得注册

Vue.component('my-first-comp', cpnC)

第三步：使用组件
与

• 的基础用一样，组件的使用方法在你挂载的dom上直接用即可

  <div id="app">
     <my-first-comp></my-first-comp>
  </div>