vue学习笔记8——组件

一：基本概念

1. 组件定义：
web中的组件就是页面组成的一部分。好比我们的电脑中的每个元件（键盘，鼠标，显示器），他们具有独立的逻辑功能界面，同时又能根据规定的接口相互融合，变成一个完整的应用。页面也是一个个类似于这样的部分组成，如导航，列表，下拉菜单等。页面只不过是这些组件的容器，组件自由组合形成完整的界面，当不需要某个组件或者想用别的替换时，可以随时进行替换和删除，而不影响整个页面的运行。
通俗点讲，组件就是自定义的标签，比如<hello></hello>这样的标签，在HTML中是不存在的，而我们可以用组件的方式创建出来
2. 组件的核心思路：将一个巨大复杂的东西拆分成粒度合理的小东西
3. 组件的好处：

• 提高开发效率
• 方便重复使用
• 简化调试步骤
• 提高整个项目的可维护性
• 便于协同开发

4. 组件的基本组成：

• 样式结构
• 行为逻辑
• 数据

二 ： 使用组件

1. 编写组件的基本原则和步骤
组件要自定义标签，vue.js的编译器为这个自定义标签添加功能
vue也可以扩展原生的HTML，封装可重用的代码
要先注册自定义的标签，然后再使用
2. 组件分为全局组件和局部组件
2.1： 全局组件
全局化组件就是在构造器的外部用Vue.component来注册一个组件，而构造器如下：

构造器

全局注册的组件在任何地方都可以使用，比如在app,app1,app2管理的范围内都可以使用，使用组件之前要先注册组件
举个栗子：

全局组件

运行结果：

全局组件结果

组件命名问题：在使用组件的名称时，使用中间划线分词。eg: list-item，驼峰命名是不行的

2.2： 局部组件
如果一个组件只在它自己的作用域中使用，就可以定义在对象实例（构造器）中。这样这个custome组件只能在app管理的范围内使用，出了这个范围就不认识了
局部组件
结果：
局部组件结果
2.3 组件和指令的区别
组件新发明出一种HTML标签中不存在的标签，指令新发明一种HTML中已经存在的标签的属性，此属性以前不存在于标签中