zxl-lxz / notes Goto Github PK

View Code? Open in Web Editor NEW

7.0 7.0 4.0 1.7 MB

学习笔记

HTML 36.13% JavaScript 61.48% CSS 2.38%

notes's People

Contributors

Stargazers

Watchers

Forkers

onlyflyer zw231212 foreverjiangting

notes's Issues

vue中的key有什么作用？

目前的简单理解

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。

意思是：
如果不指定唯一的key,那么当数组项变化时，并不会去删除重建DOM，而只是简单的改变值而已。

如果指定了唯一的key,相当于给改变之前这个值对应的DOM一个唯一的标志，当这个位置的DOM里面的值改变时，并不会简单的改变值，而是会删除重建DOM。

例如用下面的数组做渲染，假定绑定了key为A，B，C，D....

let arr = [1, 2, 3, 4, 5];

<div>1</div>  // A
<div>2</div> // B
<div>3</div> // C
<div>4</div> // D
<div>5</div> //E

此时，将数组项改变

arr = [5, 4, 3, 2, 1];

// 如果没有绑定key,只是简单的替换内容。复用了之前的DOM。
<div>5</div>  // A
<div>4</div> // B
<div>3</div> // C
<div>2</div> // D
<div>1</div> //E

// 如果绑定了key,则不会复用
<div>5</div>  // E
<div>4</div> // D
<div>3</div> // C
<div>2</div> // B
<div>1</div> //A

这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。

意思是：复用会带来弊端。例如在第一个tab下点击了某个链接，该链接变成了点击后的样式。切换tab,我们改变了数组的项。如果没有给每一项指定唯一的key，会发现，该tab下的那一项也变成了点击后的样式。当然，这只是一个简单的例子。实际上，不绑定key在某些情况下会带来很大的危险。

建议尽可能在使用 v-for 时提供 key，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。

所以，尽量都提供key吧，实在需要复用的话，就用index作为key吧。因为这样和没有绑定key的效果是一样的，不过能帮我们通过eslint的语法检查～

flexBox子项目属性记忆

子项目（item）属性记忆

1⃣️order

相当于z-index的作用。不过与z-index相反。order的数值越小，项目越排在前面。这里设置第六的项目的order为-1.（默认都是0）.

2⃣️flex-grow

有剩余空间时，项目放不放大的一个属性。默认值为0，即不放大。当有一个项目设置>0时，它将一个人“独吞”剩余空间大小。当有"竞争者"时，根据各自flex-grow的大小，分配剩余空间的大小。

3⃣️️flex-shrink

默认所有项目的该值都为1.即当空间不足时，所有的项目都将缩小。

当某个项目设置flex-shrink值为0时，该项目将不会缩小。

4⃣️flex-basis

默认值auto.定义项目在分配剩余空间之前，占据的主轴空间。其实就是width.默认就是项目本来的大小。可以和设置width一样，设置一个固定值。

5⃣️flex

就是flex-grow,flex-shrink,flex-basis三个属性的合并。
默认值是0 1 auto.就是有剩余空间也不占据剩余空间，空间不足时要缩小，不放大不缩小时显示自身大小。

6⃣️align-self

默认auto.继承父容器的align-items属性对齐。该属性设置，可以允许该项目有不一样的对齐方式。

animation(动画)

animation是如下几个属性的简写。

animation-name(动画名字)

animation-duration(一次完整动画的持续时间)

animation-timing-function(执行节奏)

animation-delay(延迟执行)

animation-iteration-count(动画允许次数)

animation-direction(是否反向执行)

animation-fill-mode(执行前后的目标样式)

.box {
    animation: animate1 2s linear infinite;
}
@keyframes {
    0% {
        transfrom: scale(1.05);
    }
    100% {
        transfrom: scale(1);
    }
}

常用CSS选择器注意点

逗号a, b

div, p {color: red;}
.div1, .div2 {color: red;}
#div1, #div2 {color: red;}
...

选择后代a b

div p {color: #333333;}
.div1 .div2 {color: #222222;}
.div1 #div3 {color: #ffffff;}
⚠️注意：只要b是a的后代元素即可。不论是几代。

大于号 a > b

div > p {color: red;}
.div1 > .div2 {color: green;}
⚠️注意：a一定要是b的父元素。只能一代。

加号 a + b

<style>
    .div2 + p {
        color: red;
    }
</style>

<div class="div2">222</div>
<p>111</p> // 我是红色
<p>111</p> // 我不是红色
<div class="div2">222</div>
<p>111</p> // 我是红色
⚠️注意：只有紧跟在a后面的第一个b元素才生效。

伪类:

a:link {color: blue;} // 没有被访问的样式
a:hover {color: green;} // 鼠标放上去的样式
a:visited {color: red;} // 被访问过后的样式
a:active {color: yellow;} // 正被点击的时候的样式
input:focus {border: none;} // 获得焦点的时候的样式
p:first-letter {font-size: 32px;background-color: grey;} // 第一个字样式,可设置背景色
p:first-line {color: red;} // 第一行的样式
p:before {content: '注意：'} // 在P内容之前插入内容，所有内容在P内。
p:after {content: '。。。'} //在内容最后插入，所有内容在P内。
.div1:first-child {color: red} // ⚠️寻找所有.div1的父元素，如果.div1是其父元素的第一个子元素，才应用样式。
.div1:last-child {color: red} // ⚠️寻找所有.div1的父元素，如果.div1是其父元素的最后一个子元素，才应用样式.
.div:nth-child(odd/even/number) {color: red} // ⚠️都要找到父元素哦，odd奇数，even偶数

<head>
<style>
p:first-child
{
background-color:yellow;
}
</style>
</head>
<body>

<p>这个段落是其父元素（body）的首个子元素。</p>

<h1>欢迎访问我的主页</h1>
<p>这个段落不是其父元素的首个子元素。</p>

<div>
<p>这个段落是其父元素（div）的首个子元素。</p>
<p>这个段落不是其父元素的首个子元素。</p>
</div>

<head>
<style> 
p:nth-child(2)
{
background:#ff0000;
}
</style>
</head>
<body>

<h1>这是标题</h1>
<p>第一个段落。</p> // 变色
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>

transition(过渡)

其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 CSS transitions 后该元素的颜色将逐渐从白色变为黑色，按照一定的曲线速率变化。这个过程可以自定义。

.box {
    width: 100px;
    height: 100px;
    background-color: #0000FF;
    transition: width 2s, height 2s, background-color 2s, transform 2s;
}
.box:hover {
    width: 200px;
    height: 200px;
    background-color: #333333;
    transform: rotate(180deg);
}
// 当hover的时候，元素的属性会发生一些变化，这些变化本是瞬间完成的。transition可以设置过渡。

transition其实是4个属性的简写。

div {
    transition: <property> <duration> <timing-function> <delay>;
}
.box {
    transition: color 2s ease-in 0.5s;
}

transfrom(变换)

transfrom是CSS3提供的一个属性。

它用来旋转，缩放，平移，倾斜。

.div1 {
  width: 100px;
  height: 100px;
  background-color: grey;
  transform: rotate(30deg);
}

matrix

以一个含6个值的变换矩阵的形式指定2D变换。matrix(a, b, c, d, e, f).不常用。

.div1 {
  width: 100px;
  height: 100px;
  background-color: grey;
  transform: matrix(1, 1, 1, 0, 0, 0);
}

平移translate

两个参数。第一个参数对应X轴的平移。第二个参数对应Y轴的平移。第一个参数未提供时，第二个参数默认为0.

.box {
    width: 100px;
    height: 100px;
    transform: translate(10%);
}
// 只会向右平移10px(百分比根据元素本身大小计算)

旋转rotate

以一个点为中心，做旋转。这个点可以由transform-origin来定义。默认是元素的中心。

.box {
    width: 100px;
    height: 100px;
    transform: rotate(0.5turn);
}
// 单位：deg(度数，一圈360度)，turn(圈数，完整是一圈)

transfrom-origin: (50%, 50%)默认就是元素的中心点。

缩放scale

长和宽的缩放。
⚠️注意：也是基于transform-origin进行缩放的。默认是在元素的中心。这样缩放会出现上和下等比缩放，左和右等比缩放。

.box {
    width: 100px;
    height: 100px;
    transform: scale(2, 2);
}
// 中心点的上方增加了50px,中心点的下方增加了50px,中心点的左边增加50px,中心点的右边增加50px.
// 如果元素是在父元素的边缘，会出现部分缩放被隐藏的现象
// 如果加上transform-origin: left top;则所有增长全在右边和下方。左边不会有隐藏。

下压倾斜skew

.box {
    width: 100px;
    height: 100px;
    transform: skew(45deg);
}
// 与垂直方向夹角45度。此时宽为200px。