zxl-lxz / notes Goto Github PK
View Code? Open in Web Editor NEW学习笔记
学习笔记
目前的简单理解
当 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
的语法检查~
相当于z-index
的作用。不过与z-index
相反。order
的数值越小,项目越排在前面。这里设置第六的项目的order
为-1.(默认都是0).
有剩余空间时,项目放不放大的一个属性。默认值为0,即不放大。当有一个项目设置>0时,它将一个人“独吞”剩余空间大小。当有"竞争者"时,根据各自flex-grow
的大小,分配剩余空间的大小。
默认所有项目的该值都为1.即当空间不足时,所有的项目都将缩小。
当某个项目设置flex-shrink
值为0时,该项目将不会缩小。
默认值auto.定义项目在分配剩余空间之前,占据的主轴空间。其实就是width.默认就是项目本来的大小。可以和设置width一样,设置一个固定值。
就是flex-grow,flex-shrink,flex-basis
三个属性的合并。
默认值是0 1 auto
.就是有剩余空间也不占据剩余空间,空间不足时要缩小,不放大不缩小时显示自身大小。
默认auto.继承父容器的align-items属性对齐。该属性设置,可以允许该项目有不一样的对齐方式。
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);
}
}
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>
其可以让属性变化成为一个持续一段时间的过程,而不是立即生效的。比如,将一个元素的颜色从白色改为黑色,通常这个改变是立即生效的,使用 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
是CSS3
提供的一个属性。
它用来旋转,缩放,平移,倾斜。
.div1 {
width: 100px;
height: 100px;
background-color: grey;
transform: rotate(30deg);
}
以一个含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);
}
两个参数。第一个参数对应X轴的平移。第二个参数对应Y轴的平移。第一个参数未提供时,第二个参数默认为0.
.box {
width: 100px;
height: 100px;
transform: translate(10%);
}
// 只会向右平移10px(百分比根据元素本身大小计算)
以一个点为中心,做旋转。这个点可以由transform-origin
来定义。默认是元素的中心。
.box {
width: 100px;
height: 100px;
transform: rotate(0.5turn);
}
// 单位:deg(度数,一圈360度),turn(圈数,完整是一圈)
transfrom-origin: (50%, 50%)
默认就是元素的中心点。
长和宽的缩放。
transform-origin
进行缩放的。默认是在元素的中心。这样缩放会出现上和下等比缩放,左和右等比缩放。
.box {
width: 100px;
height: 100px;
transform: scale(2, 2);
}
// 中心点的上方增加了50px,中心点的下方增加了50px,中心点的左边增加50px,中心点的右边增加50px.
// 如果元素是在父元素的边缘,会出现部分缩放被隐藏的现象
// 如果加上transform-origin: left top;则所有增长全在右边和下方。左边不会有隐藏。
.box {
width: 100px;
height: 100px;
transform: skew(45deg);
}
// 与垂直方向夹角45度。此时宽为200px。
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.