vue中的组件 全局组件的创建和使用 组件化开发 单文件组件的创建

vue中的组件的概念

1. 一个组件相当于是一个小模块
2. 它是html、css与js的集合体，可以用于描述页面中的某个结构(模块)
3. 组件是独立存在于我们的vue应用里面的，意味着它可以复用，不需要我们将结构代码或者是业务代码重复的编写，而且也很方便进行维护
4. 在Vue中组件的出现是为了拆分Vue实例的代码量，让我们以不同的组件来划分不同的功能模块

全局组件的创建 和 使用

概念：全局组件指的是可以在应用程序中的任何位置使用的组件，在vue中，组件是可复用的Vue实例
语法：

Vue.component(组件名称,组件的配置)

**配置说明(**这里只列举其中两个)：

1. template:用于描述当前组件的结构
2. data：用于定义当前组件的关联的数据
   一个示例：

Vue.component('mycom', {
      // 定义结构
      template: `<div>
                  	 <h1>我是组件的内容---{{msg}}</h1>
                 </div>  `,
      // 定义数据
      data() {
        return {
          msg: 'hello
        }
      }
}

全局组件的创建 – template

作用：用于描述当前组件的结构，描述结构使用html
细节：template只能有一个根元素，意味着如果有多个元素，我们需要将其包裹到一个父容器中，这个父容器一般可以使用div
示例：

template: `
                 <div>
                 	 <h1>我是组件的内容---{{msg}}</h1>
                 	 <button>点我啊</button>
                 </div> 
                `,

报错信息：

Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
翻译：组件的模板只能包含一个根元素，除非你使用if分支进行判断
解决：将多个元素包裹到一个根元素中，这种根元素一般可以使用div

全局组件的创建 – data

作用：用于定义当前组件所需要使用到的数据
细节：组件的data必须是一个函数，且返回一个对象,以便每个实例可以维护一份被返回对象的独立拷贝
示例：

data: function () {
        return {
	成员...
                     }
    }

报错信息：

1.The "data" option should be a function that returns a per-instance value in component definitions.
翻译：组件中的data选项必须是一个函数，同时函数要为每个实例返回一个值
原因：组件是可复用的，为了让每个组件可以维护一个属于自己的数据，要求data必须是一个函数
解决：将data定义为一个函数

2.data functions should return an object
翻译：data函数必须返回一个对象
解决：在data函数中通过return返回一个对象

全局组件的使用

使用方式：

1. 组件是html,js,css的集合，类似于一个元素，我们可以将组件作为自定义元素来使用
2. 从表现形式上看也确实像使用自定义标签
3. 你可以将组件进行任意次数的复用
4. 组件要先定义再使用

示例：

<div id="app">
    <p>{{msg}}</p>
    <!-- 使用组件，就像使用一个标签一样，组件的名称就是这个标签名 -->
    <mycom></mycom>
  </div>

报错信息：

1.Unknown custom element: <***> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
翻译：未知的用户元素***,你是否正确的注册(创建)了这个组件呢？如果是递归组件调用，那么确保组件有name属性
原因：在我们当前的场景中，是因为你没有在vue实例进行处理之前创建好这个first组件 或者 确实没有创建这个名称的组件
解决：将全局组件在vue实例的 前面 创建好

单文件组件 跟 全局组件 对比

1. 从代码及工程化角度考虑
   Vue.component在复杂的项目中有明显的缺点
   1. 全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复
   2. 字符串模板 (String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要单独的处理
   3. 不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
   4. 没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript，而不能使用预处理器，如 Pug (formerly Jade) 和 Babel选择器：#id名（# 和 id 之间没有空格）
      单文件组件为以上所有问题提供了解决方法，并且还可以使用 webpack或 Browserify 等构建工具
2. 从公司开发角度而言：
   几乎所有的vue项目开发都是使用单文件组件，也就是常说的 组件化开发

组件化开发

1. 组件化开发指的是：根据封装的思想，把页面上可重用的部分封装为组件，从而方便项目的开发和维护
2. 组件化开发的好处
   1. 提高了前端代码的复用性和灵活性
   2. 提升了开发效率和后期的可维护性
3. vue 是一个完全支持组件化开发的框架。vue 中规定组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件
4. 在vue中，扩展名为.vue的文件也称为单文件组件，意思是使用一个文件来描述一个组件

单文件组件的创建

概念

扩展名为.vue的文件就是单文件组件

结构说明

单文件组件结构的基本说明

• template:用于描述组件的结构
• script:用于添加组件的功能(script行为)，使用export default暴露当前的组件实例
• style:用于设置组件的样式

细节

关于template

1. template模板结构只能有一个根元素（vue2.0中的规则）
2. <template> 是 vue 提供的容器标签，只起到包裹性质的作用，它不会被渲染为真正的 DOM 元素

关于script

3. export default用于暴露当前的组件实例，default表示默认就会暴露的成员
4. 单文件组件的data必须是一个函数，且返回一个对象

关于 style

5. 样式style可以使用预处理器，scoped可以用于定义局部作用域样式
6. 其中 <style>标签上的 lang="css" 属性是可选的，它表示所使用的样式语言。默认只支持普通的 css 语法，可选值还有less、scss 等
7. 在 <style> 标签上添加lang="less"属性，即可使用 less 语法编写组件的样式
8. 每个组件中必须包含 template模板结构，而 script 行为和 style 样式是可选的组成部分