vue新手上路

vue新手上路 ——记录于2021.3.12

一、对前端基本知识的汇总（个人不熟悉的）

1、position：absolute、relative、fixed和static四种定位方式的理解
（1）static：静态的，是position的默认值，所以一般要么position没有定义默认这个，要么定义的时候肯定不写这个；
（2）relative：相对的，用相对定位的元素不管它是否进行移动，元素仍要占据它原来的位置（占坑不放）。
（3）absolute：绝对的，多和relative搭配使用（就近原则，父相子绝：父级relative，子级absolute，且定位时是找最近的有position定位的父级）。绝对定位元素的前面或者后面的元素会认为这个元素并不存在，即这个元素“浮”在其他元素上面（跟别人抢上了还）。
（4）fixed：固定的，是相对于浏览器窗口而言。（页面不动它不动，页面滚动它还不动）。

2、display的方式
（1）display:inline;定义在其上的width和height无效
（2）display：inline-block，块级元素，可定义width和height，遇到定义行和高无效的时候，可以试试该方法

3、vue的特点
（1）组件化：一个组件实现一个单页面，各个组件之间耦合度低，但相互之间可调用
（2）v-model动态绑定数据，可以在页面上修改实时看到修改效果
（3）运行速度快，每次一保存一刷新页面就可以看到改变，不需要修改一次代码跑一次程序

4、vue组件的导入
（1）定义好子组件，且定义好export default下的name；
（2）在父组件中import name from ‘子组件位置’
（3）在父组件的components下声明该子组件
（4）在父组件的template引用该标签

5、vue组件路由的使用
（1）在router下的index.js文件引入要添加路由的组件
（2）在index.js下按照路由格式加入该组件的相关信息

6、弹性布局：基于盒状模型：display +position+float(具体内容参考博客http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)
（1）flex-direction:决定横排还是竖排
（2）flex-wrap:多个div块儿，一行排不是否要换行
（3）flex-flow:（1）和（2）的合并
（4）align-items:决定大小不一的div块儿是上对齐还是下对齐还是上下拉一样长对齐
（5）align-content:多根轴线的对齐方式，（4）和（5）我没太用过呢

7、vue实现垂直水平居中(前提先都定义好width和height)
（1）居中元素的父级元素display：flex;居中元素margin：auto;
（2）实现水平垂直居中：display:flex; flex-direction:column; justify-content: center;

8、vue实现水平居中
（1）行内元素：text-align:center;
（2）块级元素；margin：0 auto;

9、vue实现垂直居中
（1）单行元素：line-height = 父级高度；
（2）块级元素：父级定义display：inline-block；vertical-align：middle;

以上内容有不完整的欢迎补充！不对的地方请多指教！😊