vue结构介绍

1. 什么是组件化开发
   组件化开发指的是：根据封装的思想，把页面上可重用的 UI 结构封装为组件，从而方便项目的开发和维护。
   vue 是一个支持组件化开发的前端框架。
   vue 中规定：组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。
2. vue 组件的三个组成部分
   每个 .vue 组件都由 3 部分构成，分别是：
   template -> 组件的模板结构
   script -> 组件的 JavaScript 行为
   style -> 组件的样式
   其中，每个组件中必须包含 template 模板结构，而 script 行为和 style 样式是可选的组成部分。
3. template
   vue 规定：每个组件对应的模板结构，需要定义到 节点中
   
   注意：
   template 是 vue 提供的容器标签，只起到包裹性质的作用，它不会被渲染为真正的 DOM 元素
   template 中只能包含唯一的根节点
4. script
   vue 规定：开发者可以在

7. 使用组件的三个步骤
   步骤1：使用 import 语法导入需要的组件

import Left from '@/components/Left.vue'

步骤2：使用 components 节点注册组件

 // 2. 使用components节点注册组件 私有子组件 
 //在 vue 项目的 main.js 入口文件中，
 //通过 Vue.component() 方法，可以注册全局组件。
  components: {
    Left,
    Right,
    Test
  }

步骤3：以标签形式使用刚才注册的组件

  <!-- 3. 以标签形式，使用注册好的组件 -->
      <Left></Left>

8. 组件的 props
   props 是组件的自定义属性，在封装通用组件的时候，合理地使用 props 可以极大的提高组件的复用性！
   

9. props 是只读的
   vue 规定：组件中封装的自定义属性是只读的，程序员不能直接修改 props 的值。否则会直接报错
   要想修改 props 的值，可以把 props 的值转存到 data 中，因为 data 中的数据都是可读可写的
   

10. props 的 default 默认值
    props 的 default 默认值
    11.props 的 type 值类型
    在声明自定义属性时，可以通过 type 来定义属性的值类型。

11. props 的 required 必填项
    在声明自定义属性时，可以通过 required 选项，将属性设置为必填项，强制用户必须传递属性的值。

12. 组件之间的样式冲突问题
    默认情况下，写在 .vue 组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题。
    导致组件之间样式冲突的根本原因是：
    ① 单页面应用程序中，所有组件的 DOM 结构，都是基于唯一的 index.html 页面进行呈现的
    ② 每个组件中的样式，都会影响整个 index.html 页面中的 DOM 元素
    解决办法:
    为了提高开发效率和开发体验，vue 为 style 节点提供了 scoped 属性，从而防止组件之间的样式冲突问题

13. /deep/样式穿透
    如果给当前组件的 style 节点添加了 scoped 属性，则当前组件的样式对其子组件是不生效的。如果想让某些样
    式对子组件生效，可以使用 /deep/ 深度选择器