web前端面试提问总结：

2021-12-02 本文已影响0人似朝朝我心

学过CSS3吗？CSS3的新增特性有哪些？

主要是文本效果、边框、图片、字体、背景效果、阴影效果、色彩类：

RGBA和透明度
word-wrap属性
background属性
text-shadow属性
font-face属性
border-radius属性
box-shadow属性

渐变：

linear-gradient()：线性渐变。
radial-gradient()：径向渐变。

其他：

三类选择器，基本选择器，属性选择器，伪类选择器
媒体查询（响应式布局）- 盒模型、弹性布局(flex布局)
网格分栏布局
多栏布局

动画相关：

Transition 过渡
Transform 2D或3D转换
Animation 实现动画功能
画布canvas是h5新增的标签，不属于css3

学习过动画吗？动画怎么写？

@keyframes 动画绑定到某个元素
animation-name 给动画命名
animation-duration 需要多长时间才能完成动画
animation-delay 延迟动画
animation-iteration-count 设置动画应运行多少次
animation-direction 反向或交替运行动画
animation-timing-function 指定动画的速度曲线
animation-fill-mode 指定动画的填充模式
animation 动画简写属性（1抵7）

<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation: myfirst 5s linear 2s infinite alternate;
}

@keyframes myfirst {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>

对JS了解吗？简要说一下定时器有哪些？怎么清除定时器？

js 定时器有以下两个方法：

setInterval() 间隔执行
setTimeout() 延迟执行
清除与之对应使用 clearInterval() 和 clearTimeout()

css定位属性有哪些？简要说明。

绝对定位：absolute
相对定位：relative
固定定位（相对视窗而言）：fixed
粘性定位（相对于用户滚动位置而言）：sticky
静态定位：static

学习过浮动吗？怎么清除浮动？相关属性有哪一些？

有左右浮动和文档流浮动布局。

常见的2种清除浮动方案：

使用带clear属性的空元素

在浮动元素后变使用一个空元素如<div class="clear"></div>，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。

使用CSS的overflow属性（也就是BFC）添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果

vue相关：

组件通讯方式有哪些？父子组件如何通讯？
常见的是父子组件通讯、兄弟组件通讯、vuex复杂组件通讯。

父子组件通讯：

父传子：父组件通过绑定自定义属性，子组件通过props进行接收
子传父：子组件绑定事件的形式，通过$emit()发送，父组件通过发布时间进行接收。

vuex状态管理理解？
成员列表：

state 存放变量共享状态
mutations 存放state成员操作
getters 加工state成员给外界
actions 异步操作
modules 模块化状态管理

学过vue-cli吗？npm怎么安装？vue-router理解？怎么写？学过路由守卫吗？说说看？还有路由懒加载实现原理。

1.安装npm install vue-router
2.文件src下创建router文件夹，在router文件夹下创建router.js
3.在main.js导入路由并配置
4.书写路由规则，导入组件,在router.js里写入
5.在App.vue里添加路由链接
6.在router.js里配置规则

路由守卫分为前置守卫和后置守卫：

前置守卫：对路由进行权限控制。在路由跳转前触发，参数包括to,from,next三个，这个钩子作用主要是用于登录验证，也就是路由还没跳转提前告知。
后置守卫：在跳转之后判断

路由懒加载实现原理：其实就是按需引入，为了避免页面一开始就全部加载所有的组件，使页面出现的慢，卡顿，路由懒加载就是你点击了那个导航才开始加载那个组件，提高用户体验。

简述一下vue的基本指令？

v-if | v-esle | v-else-if 条件判断
v-bind 单向数据绑定
v-show 双向数据绑定
v-on 事件绑定
v-for 列表渲染
v-text 文本
v-html 转义

v-model双向数据绑定的实现原理？与单向数据流动v-bind的区别？

vue 双向数据绑定是通过数据劫持结合发布订阅模式的方式来实现的，也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变。

学过vue的修饰符吗？

事件修饰符
.stop 阻止单机事件传递，案例阻止事件层层冒泡
.prevent 提交事件不再重载页面
.once 事件点击只触发一次
.capture 捕获、监听事件
v-model修饰符

<input v-model.lazy="msg">  默认情况下，v-model同步输入框的值和数据。可以通过这个修饰符，转变为在change事件再同步。
<input v-model.number="msg"> 自动将用户的输入值转化为数值类型
<input v-model.trim="msg"> 自动过滤用户输入的首尾空格

键盘修饰符

<input @keyup.enter="submit">  监听空格键
还可以监听其他键位

v-if和v-show显示与隐藏的区别？

v-show控制css的display属性为none,v-if是向dom中添加或删除元素。
频繁点击的话采用v-show

web前端面试提问总结：

vue相关：

猜你喜欢

热点阅读