Vue 编码基础
2.1.1. 组件规范
2.1.2. 模板中使用简单的表达式
2.1.3 指令都使用缩写形式
2.1.4 标签顺序保持一致
2.1.5 必须为 v-for 设置键值 key
2.1.6 v-show 与 v-if 选择
2.1.7 script 标签内部结构顺序
2.1.8 Vue Router 规范
Vue 项目目录规范
2.2.1 基础
2.2.2 使用 Vue-cli 脚手架
2.2.3 目录说明
2.2.4注释说明
2.2.5 其他
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
=================================================================
好好学习,记住这些属性,以后用处会很大的。
提示:以下是本篇文章正文内容,下面案例可供参考
=========================================================================
布局原理:
flex是flexible Box的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局。总结:flex布局原理就是通过给父盒子添加flex属性,来控制子盒子的位置和排列方式。
注意:
1、当我们为父盒子设为flex布局以后,子元素的float、clear和vertical-align属性将失效。
2、伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局(别称)
定义:
采用flex布局的元素,称为flex容器,简称“容器”。它的所有子元素自动成为容器成员,称为flex项目,简称“项目”。
举例:
div就是flex父容器,span就是子容器flex项目,子容器可以横向排列也可以纵向排列。
===========================================================================
父项常见属性
-
List itemflex-direction:设置主轴的方向;
-
justify-content:设置主轴上的子元素排列方式;
-
flex-wrap:设置子元素是否换行;
-
align-content:设置侧轴上的子元素的排列方式(多行);
-
align-items:设置侧轴上的子元素排列方式(单行);
-
flex-flow:复合属性,相当于同时设置了flex-direction和flex-wrap。
主轴与侧轴
1、默认主轴方向就是X轴方向,水平向右
2、默认侧轴方向就是Y轴方向,垂直向下
属性值以及说明:
row:从左到右;(默认值)
row-reverse从右到左;(反方向)
column:从上到下;
column:从下到上;
代码如下(示例):
1
2
3
默认的效果图:
代码如下(示例):
div {
display: flex;
width: 800px;
height: 300px;
background-color: pink;
/* Y轴为主轴 */
flex-direction: column;
}
div span {
width: 150px;
height: 100px;
background-color: powderblue;
}
Y轴的效果图:
代码如下(示例):
div {
display: flex;
width: 800px;
height: 300px;
background-color: pink;
flex-direction: row-reverse;
}
div span {
width: 150px;
height: 100px;
background-color: powderblue;
}
看数字,注意盒子顺序发生了变化,效果图如下:
justify-content属性定义了项目在主轴上的对齐方式。
-
flex-start:默认值从头部开始,如果主轴是x轴,则从左往右;
-
flex-end:从尾部开始排列;
-
center:在主轴居中对齐(如果主轴是x轴则水平居中)
-
space-around:平分剩余空间;
-
space-between:先两边贴边,再平分剩余空间(重要)
代码如下(示例):
1
2
3
4
先两边贴边,再平分剩余空间的效果图如下:
代码如下(示例):
div {
display: flex;
width: 800px;
height: 300px;
background-color: pink;
/* 平分剩余空间 */
justify-content: space-around;
}
div span {
width: 150px;
height: 100px;
background-color: powderblue;
}
平分剩余空间的效果图:
代码如下(示例):
div {
display: flex;
width: 800px;
height: 300px;
background-color: pink;
/* 在主轴居中对齐 */
justify-content: center;
}
div span {
width: 150px;
height: 100px;
background-color: powderblue;
}
在主轴居中对齐的效果图:
代码如下(示例):
div {
display: flex;
width: 800px;
height: 300px;
background-color: pink;
/* 从尾部开始排列 */
justify-content: center;
}
div span {
width: 150px;
height: 100px;
background-color: powderblue;
}
注意看数字,从尾部开始排列的效果图:
默认情况下,项目都排在一条线(又称“轴线”)上。flex-wrap属性定义,flex布局中默认是不换行的。
-
nowrap:默认值,不换行;
-
wrap:换行。
代码如下(示例):
1
2
3
4
5
在不换行的情况下,盒子的宽度会自动缩小以便于一行可以放下所有盒子,默认不换行的效果图:
div {
display: flex;
width: 600px;
height: 400px;
background-color: pink;
flex-wrap: wrap;
}
div span {
width: 150px;
height: 100px;
background-color: powderblue;
margin: 10px;
}
换行的效果图:
该属性是控制子项在侧轴上的排列方式,并且只能用于子项出现换行的情况(多行),在单行下是没有效果的。
-
flex-start:默认值在侧轴的头部开始排列;
-
flex-end:在侧轴的尾部开始排列;
-
center:在侧轴中间显示;
-
space-around:子项在侧轴平分剩余空间;
HTTP
-
HTTP 报文结构是怎样的?
-
HTTP有哪些请求方法?
-
GET 和 POST 有什么区别?
-
如何理解 URI?
-
如何理解 HTTP 状态码?
-
简要概括一下 HTTP 的特点?HTTP 有哪些缺点?
-
对 Accept 系列字段了解多少?
-
对于定长和不定长的数据,HTTP 是怎么传输的?
-
HTTP 如何处理大文件的传输?
-
HTTP 中如何处理表单数据的提交?
-
HTTP1.1 如何解决 HTTP 的队头阻塞问题?
-
对 Cookie 了解多少?
-
如何理解 HTTP 代理?
-
如何理解 HTTP 缓存及缓存代理?
-
为什么产生代理缓存?
-
源服务器的缓存控制
-
客户端的缓存控制
-
什么是跨域?浏览器如何拦截响应?如何解决?