Vue学习：Vue中的组件的介绍

组件的定义：实现应用中局部功能代码和资源的集合；

模块的定义：向外提供特定功能的js程序，一般就是一个js文件；

模块化：当应用中的js都以模块的方式来编写，那这个应用就是一个模块化的应用；

组件化：当应用中的功能都是以组件的方式来编写的，那这个应用就是一个组件化的应用。

在创建组件之前，首先来了解一个非单文件组件和单文件组件的区别：

非单文件组件是指一个文件中包含多个组件，单文件组件是指一个文件中只包含一个组件。

一、非单文件组件举例：

关于组件的一些注意点：

关于组件名：

一个单词组成：第一种写法（首字母小写）；第二种写法（首字母大写）

多个单词组成：第一种写法（形如：my-school）；第二种写法（形如：MySchool）

组件嵌套：

关于VueComponent：

1、自定义组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是由Vue.extend生成的。

2、我们本身只需要写组件标签，Vue解析时会帮我们创建组件的实例对象，即Vue帮我们执行的：new VueComponent（options）。

3、特别注意，每次调用Vue.extend时，返回的都是一个全新的VueComponent。

4、关于this的指向：

（1）：组件配置中，data函数、methods中的函数、watch中的函数、computed中的函数，它们的this均是VueComponent实例对象；

（2）：new Vue（options）配置中： 

data函数、methods中的函数、watch中的函数、computed中的函数，它们的this均是Vue实例对象。

一个重要的内置关系：VueComponent.prototype.__proto__===Vue.prototype,有这个关系的目的是：让组件实例对象（vc）可以访问到Vue原型上的属性、方法。

二、单文件组件举例：

在单文件组件中需要用到脚手架，所以首先需要初始化脚手架；

具体步骤：

1、全局安装@vue/cli:npm install -g @vue/cli

2、切换到要创建项目的目录，然后使用命令创建项目：vue create xxx

3、启动项目: npm run serve

然后在编写文件：

main.js是整个项目的入口文件；

components中的vue文件：