初级前端面试题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: 指令和元素解绑的时候调用,只调用一次
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值