为什么用这个，首先想要手写仓库，那么你使用的数据就必须是响应式数据，不然你改变了，页面却没有改。
而 Vue.observable 和 reactive 都是把数据变成响应式的方法

# transition-group

transition-group 是表示的一组动画，一般常配合 v-for 动态渲染使用，由于 transition 中只能是单个的元素，因此如果需要多个元素添加动画效果需要加入 transition-group 使用。

# 媒体查询两种方法:

# css 方式

@media screen and (max-width: 600px) { 

/* 当屏幕尺寸小于 600px 时，应用下面的 CSS 样式 */

  .class {

    background: #ccc;

  }

}

/* 当屏幕尺寸大于 900px 时，应用下面的 CSS 样式 */

@media screen and (min-width: 900px) {

  .class {

    background: #fff;

  }

}

Keyframe 演示动画

常用属性：

1. name: string，用于自动生成 CSS 过渡类名。例如：name: 'fade' 将自动拓展为 .fade-enter，.fade-enter-active 等。默认类名为 "v"
2. appear: boolean，是否在初始渲染时使用过渡。默认为 false。
3. css: boolean，是否使用 CSS 过渡类。默认为 true。如果设置为 false，将只通过组件事件触发注册的 JavaScript 钩子。
4. type: string，指定过渡事件类型，侦听过渡何时结束。有效值为 "transition" 和 "animation"。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。
5. mode: string，控制离开 / 进入过渡的时间序列。有效的模式有 "out-in" 和 "in-out"；默认同时进行。
6. duration: number | {enter: number, leave: number} 指定过渡的持续时间。默认情况下，Vue 会等待过渡所在根元素的第一个 transitionend 或 animationend 事件。

---

自定义过渡类名属性：

1. enter-class: string
2. leave-class: string
3. appear-class: string
4. enter-to-class: string
5. leave-to-class: string
6. appear-to-class: string
7. enter-active-class: string
8. leave-active-class: string
9. appear-active-class: string

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转 rotate、扭曲 skew、缩放 scale 和移动 translate 以及矩阵变形 matrix。

语法:

transform: none|transform-functions;

即：

transform: rotate | scale | skew | translate |matrix;

# 一、animation 属性也是一个简写属性，用于设置六个动画属性。

用法：animation: name duration timing-function delay iteration-count direction;

这六个属性值分别为：

# 自动填充高度.html

<div class="box">

  <div class="header">头部</div>

  <div class="auto-fill">自动填充</div>

</div>

# 使用 flex（推荐）

• 兼容性好；
• 只需关注自动填充的 div，无需考虑其他 div 的高度

.box {

  display: flex;

  flex-flow: column;

  height: 100%;

}

.header {

  background: dodgerblue;

  height: 30px;

}

.auto-fill {

  background: wheat;

  flex: 1

}

# 方式一

# 安装 scss，参考文章：

vue 中引入 sass

# 具体实现