初级前端面试题HTML5 CSS3 JS VUE

整理的不全
还有一些在https://blog.csdn.net/weixin_44195250/article/details/96841612

HTML5 CSS3

1、元素水平垂直居中

1.css3的transform：
.ele {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
}

2.flex盒子布局:
.ele {
    display: flex;
    justify-content: center;
    align-items: center;
}

3.display的table-cell:
.ele {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

2、flex布局及其属性

flex布局也叫弹性布局，用来为盒装模型提供最大的灵活性，任何容器都可以指定为flex布局。（display： flex/inline-flex;）
1.flex-direction属性决定主轴的方向（即项目的排列方向）。

flex-direction: row | row-reverse | column | column-reverse;
1
2.flex-wrap属性表示项目若不在一条抽线上时的换行方式。

 flex-wrap: nowrap | wrap | wrap-reverse;
1
3.flex-flow属性是flex-direction和flex-wrap的简写，默认值为row nowrap。

flex-flow: < flex-direction > || < flex-wrap >;
1
4.justify-content属性定义类项目在主轴方向上的对齐方式。

justify-content: flex-start | flex-end | center | space-between | space-around;
1
5.align-items属性定义了项目在交叉轴上的对齐方式。

align-items: flex-start | flex-end | center | baseline | stretch;
1
6.align-content属性定义了多根轴线的对齐方式，若只有一根轴线，则该属性不起作用。

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

3、css3中的制作动画的属性主要有哪些？

1.变形（transform）

①rotate(< angle >)：2D旋转，负数为逆时针旋转；
②translate(x,y)：水平和垂直方向同时移动；
③scale(< number >, < number >)：水平和垂直方向同时2D缩放；
④skew(< angle >, < angle >)：水平和垂直方向上同时扭曲；
⑤matrix(< number >, < number >，< number >, < number >，< number >, < number >)：
以一个含有六个值的变换矩阵的形式指定一个2D变换。

2.转换（transition）

transition:property duration timing-function delay;
transition-property: 指css属性的name，transition的效果；
transition-duration：实现效果所需的时间；
transition-timing-function：实现效果的转速曲线；
transition-delay：定义效果开始的时间。

3.动画（animation）

animation： name keeping-time animate-function delay times iteration final；
name：动画的名字；
keeping-time：动画持续时间；
animate-function：运动曲线；
delay：动画延迟时间；
times：动画循环执行的次数；
iteration：动画循环的方式；
final：动画到最后时的状态。

JS

1、冒泡排序和快速排序的思想

.冒泡排序的思想：

通过相邻两个元素之间的比较和交换，使较大的元素逐渐从前面移向后面（升
序），就像水底下的气泡一样逐渐向上冒泡，所以被称为“冒泡”排序。冒泡排序的最坏时间复杂度
为O(n2)，平均时间复杂度为O(n2)。
代码演示：

var   arr=[2,5,4,1,7,3,8,6,9,0];
function arrayMax(arr) {
    var temp = null;
    for (var i = 0;i<arr.length-1;i++){
        for (var j = i+1;j<arr.length;j++){
        	//如果前面的数据比后面的大就交换  
        	//两个数交换一定要声明一个变量,用来存储其中要被赋值的那个
            if (arr[i]>arr[j]){
                temp = arr[j];
                arr[j] = arr[i];
                arr[i] = temp;
            }

        }
    }
    return arr;
}
console.log(arrayMax(arr));

2.快速排序的思想：

元素的比较和交换是从两端向中间进行的，较大的元素一轮就能够交换到后面的位置，而较小的元素
一轮就能交换到前面的位置，元素每次移动的距离较远，所以比较次数和移动次数较少，速度较快，
故称为“快速排序”。 

代码演示：

var times = 0;
function queryArrayMax(arr) {
    //如果数组长度小于等于1无需判断直接返回即可
    if (arr.length<=1){
        return arr;
    }
    var arrIndex = Math.floor(arr.length/2);//获取中间值 这个是索引
    var arrCenterVal = arr.splice(arrIndex,1);// 利用索引取出中间值  改变原始数组
    var left= [],//存储小的
        right = [];//存储大的
   // 遍历数组 ,进行判断分配
   for (var i = 0;i<arr.length;i++){
       if (arr[i]<arrCenterVal){
            left.push(arr[i])//比中间值小的放在左边数组
       }else{
           right.push(arr[i])//比中间值大的放在右边数组
       }
       console.log("第"+(++times)+"次排序后："+arr);
   }
    //递归执行以上操作,对左右两个数组进行操作，直到数组长度为<=1；
   return queryArrayMax(left).concat(arrCenterVal,queryArrayMax(right))

}
console.log(queryArrayMax(arr));

VUE

1、vue的有哪些常用的指令？自定义指令是什么？

指令是一种可以附加到DOM元素的微命令(tiny commands).。它们通常以"v-"作为前缀, 以方便Vue知道你在使用一种特殊的标记, 从而确保语法的一致性。

v-if: 使用true或false来判断元素的现实或隐藏；
v-for：数据循环；
v-on：函数绑定；
v-bind：属性绑定；
v-model：数据的双向绑定。

以上的是vue中一些内置的指令，但在实际项目开发中这些内置指令并不能完全满足开发需求，所以可以使用vue来创建全局指令，也就是自定义指令。
举一个简单的小栗子：加载DOM时直接让表单获取焦点。

JS部分：

// 和自定义过滤器一样,我们这里定义的是全局指令
Vue.directive('focus',{
	inserted(el) {
  		el.focus()
	}
})

html部分：

1 以上部分中：

①使用 Vue.directive() 来新建一个全局指令,(指令使用在HTML元素属性上的)
②Vue.directive(‘focus’) 第一个参数focus是指令名,指令名在声明的时候,不需要加 v-
③在使用指令的HTML元素上, 我们需要加上 v-.
④Vue.directive(‘focus’,{}) 第二个参数是一个对象,对象内部有个 inserted() 的函数,函数有 el 这个参数.
⑤el 这个参数表示了绑定这个指令的 DOM元素,在这里就是后面那个有 placeholder 的 input
⑥el 就等价于 document.getElementById(‘el.id’)
⑦可以利用 $(el) 无缝连接 jQuery

指令绑定到一个元素上时，指令内部的五个生命周期函数：

bind: 当指令绑定到 HTML 元素上时触发.只调用一次.
inserted: 当绑定了指令的这个HTML元素插入到父元素上时触发(在这里父元素是 div#app)，
但不保证，父元素已经插入了 DOM 文档.
updated: 所在组件的VNode更新时调用.
componentUpdate: 指令所在的组件的VNode以及其子VNode 全部更新后调用.
unbind: 指令和元素解绑的时候调用,只调用一次