置顶文章
精选分类
前端
技术设计照片
高质量精选心得
思维kotlin
技术设计文章列表
vue 组件之间传值方法整理
心血来潮,总结下 vue 组件传值方法 props //parent 组件<child :msg="msg"></child>//child 组件props:{ msg:{ type:"String", defualt:"这是从父节点传过来的值" }} $emit / $on //parent 组件<child...
more...创建小型仓库store类似于vuex
为什么用这个,首先想要手写仓库,那么你使用的数据就必须是响应式数据,不然你改变了,页面却没有改。
而 Vue.observable 和 reactive 都是把数据变成响应式的方法
vue transition-group 属性
# transition-group
transition-group 是表示的一组动画,一般常配合 v-for
动态渲染使用,由于 transition 中只能是单个的元素,因此如果需要多个元素添加动画效果需要加入 transition-group
使用。
CSS @media 属性
# 媒体查询两种方法:
# css 方式
@media screen and (max-width: 600px) { | |
/* 当屏幕尺寸小于 600px 时,应用下面的 CSS 样式 */ | |
.class { | |
background: #ccc; | |
} | |
} | |
/* 当屏幕尺寸大于 900px 时,应用下面的 CSS 样式 */ | |
@media screen and (min-width: 900px) { | |
.class { | |
background: #fff; | |
} | |
} |
vue transition 属性
常用属性:
- name: string,用于自动生成 CSS 过渡类名。例如:name: 'fade' 将自动拓展为 .fade-enter,.fade-enter-active 等。默认类名为 "v"
- appear: boolean,是否在初始渲染时使用过渡。默认为 false。
- css: boolean,是否使用 CSS 过渡类。默认为 true。如果设置为 false,将只通过组件事件触发注册的 JavaScript 钩子。
- type: string,指定过渡事件类型,侦听过渡何时结束。有效值为 "transition" 和 "animation"。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。
- mode: string,控制离开 / 进入过渡的时间序列。有效的模式有 "out-in" 和 "in-out";默认同时进行。
- duration: number | {enter: number, leave: number} 指定过渡的持续时间。默认情况下,Vue 会等待过渡所在根元素的第一个 transitionend 或 animationend 事件。
自定义过渡类名属性:
- enter-class: string
- leave-class: string
- appear-class: string
- enter-to-class: string
- leave-to-class: string
- appear-to-class: string
- enter-active-class: string
- leave-active-class: string
- appear-active-class: string
CSS transform 属性
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转 rotate、扭曲 skew、缩放 scale 和移动 translate 以及矩阵变形 matrix。
语法:
transform: none|transform-functions; | |
即: | |
transform: rotate | scale | skew | translate |matrix; |
CSS animation 属性
# 一、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 | 规定是否应该轮流反向播放动画。 |
css 实现填充剩余高度
# 自动填充高度.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 | |
} |