前端 杂项小记

前言

有一些零零散散的，又没法起一篇文章，都放这里

hover两种用法

1. 绑定元素自身

//html部分
<div class="test">
	<span class="test_sub"> content </span>
</div>

//css部分
.test{
	opacity: 1;
}
.test:hover {
	opacity: .3;
}

2. 父元素hover，改变子元素的属性，必须是父子元素

.test_sub {
	opacity: .3;
}
.test:hover .test_sub {  //注意：父元素hover和子元素之间有个 空格
	opacity: 1;
}

2.css怎么搞出一个三角形

原理，利用边框border
给你看个图你就懂了，把边框搞粗一点

上述的div宽高为100px，边框为等腰梯形，我们要得到三角形，把div的宽高置为零就行了

//html部分
<div class="test"></div>

//css部分
.test{
	height:100px;
	width: 100px;
	border-top: 30px solid red;
	border-right: 30px solid yellow;
	border-bottom: 30px solid blue;
	border-left: 30px solid green;
}

效果：

后台接口数据格式为utf-8导致乱码

使用encodeURIComponent(string) 将字符串转为utf-8，然后去掉不必要的部分

vue项目打包

部分样式文件不生效，可能是线上环境的puclicpath没有改,太忙了，有时间在具体写下

attribute

布尔类型的attribute，只要存在就意味着值为true。

<button :disabled="flag">测试按钮</button>

上面这个按钮中，flag的值为null或者undefined时，disable不会被包含在button元素中。

vue3.0

lodash三方库中实现了防抖和节流。

v-if和v-show

1.v-if控制dom元素的切换，v-show是对css进行切换
2.需要控制多元素切换时，可以将多元素使用template包裹，但是template只支持v-if
3,使用情况：当切换情况较少时，使用vif，频繁的切换使用vshow更好

在绑定数据时，加上.number修饰符

加上.number修饰符可以确保拿到的值是数值类型的

<input v-model.number="age" />

自建等比例容器

主要是利用padding-bottom为百分比值时根据宽度计算这一特性。
利用父容器控制等比例，如果直接放入元素会导致比例变化（父元素不再等比例，具体表现为宽度不变，高度为：padding-bottm加上元素高度）,所以我们需要子容器来盛放元素

//创建一个宽高比为10:4的容器
.example{ //父容器控制比例
	width:100%;
	padding-bottom:40%;

	//这个容器作为父元素,放一个占满它的容器（子容器），子容器是我们真正放入元素的容器
	position:relative;
}


.example{//子容器放入元素
	position:absolute;
	top:0;bottom:0;left:0;right:0;//此时自动占满父容器
}

对象迭代

在JavaScript有史以来的大部分时间内，迭代对象属性都是一个难题

这两个静态方法Object.values()和Object.entries()接收一个对象，返回它们内容的数组。

Object.values()返回对象值的数组，
Object.entries()返回键/值对的数组。

const o = {
  foo: 'bar',
  baz: 1,
  qux: {}
};

console.log(Object.values(o));
// ["bar", 1, {}]

console.log(Object.entries((o)));
// [["foo", "bar"], ["baz", 1], ["qux", {}]]