置顶文章

1.8k 2 分钟

还记得所有 AI 教程必提的「奥卡姆剃刀原则」吗?即:如无必要,勿增实体。这条原则也被收藏,还有一些不太常见的费茨法则、盖尔定律、康威定律等,都被一一收入囊中。

精选分类

文章列表

1.2k 1 分钟

心血来潮,总结下 vue 组件传值方法 props //parent 组件<child :msg="msg"></child>//child 组件props:{ msg:{ type:"String", defualt:"这是从父节点传过来的值" }} $emit / $on //parent 组件<child...
5.4k 5 分钟

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

2.2k 2 分钟

# transition-group

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

1.8k 2 分钟

# 媒体查询两种方法:

# css 方式

@media screen and (max-width: 600px) { 
/* 当屏幕尺寸小于 600px 时,应用下面的 CSS 样式 */
  .class {
    background: #ccc;
  }
}
/* 当屏幕尺寸大于 900px 时,应用下面的 CSS 样式 */
@media screen and (min-width: 900px) {
  .class {
    background: #fff;
  }
}

3.6k 3 分钟

常用属性:

  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

2.1k 2 分钟

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

语法:

transform: none|transform-functions;
即:
transform: rotate | scale | skew | translate |matrix;

3.8k 3 分钟

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

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

这六个属性值分别为:

animation-name规定需要绑定到选择器的 keyframe 名称
animation-duration规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function规定动画的速度曲线。
animation-delay规定在动画开始之前的延迟。
animation-iteration-count规定动画应该播放的次数。
animation-direction规定是否应该轮流反向播放动画。

678 1 分钟

# 自动填充高度.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
}