前端(2).docxvue面试题初级

Vue.js 是一款流行的前端JavaScript框架，它以组件化开发、数据双向绑定和简易API而著称。在Vue面试中，初级开发者通常会被问到关于HTML、CSS、JavaScript基础以及Vue特性的相关问题。以下是根据提供的内容整理的一些核心知识点： 1. **块级元素与行内块元素的区别及转换**： - 块级元素如`div`，占据整行，可设置宽高，内外边距。行内块元素如`span`，在一行内显示，但也可设置宽高。 - 转换方法：使用CSS的`display`属性，`display:block`将行内元素转换为块级，`display:inline-block`则将块级元素转换为行内块。 2. **水平垂直居中布局**： - 使用绝对定位：父元素`position:relative`，子元素`position:absolute; left:50%; top:50%; transform: translate(-50%, -50%)`。 - 使用Flexbox布局：父元素`display:flex; justify-content:center; align-items:center`。 - 使用表格布局：父元素`display:table`，子元素`display:table-cell; vertical-align:middle; text-align:center`。 3. **盒模型**： - 标准盒模型（content-box）：元素的宽高包含内容区，不包括边框和内边距。 - 怪异盒模型（border-box）：元素的宽高包含内容区、边框和内边距。 - 转换：使用`box-sizing`属性，`box-sizing:border-box`使元素变为怪异盒模型，`box-sizing:content-box`恢复为标准盒模型。 4. **position属性**： - `absolute`：元素相对于最近非static定位的祖先元素定位。 - `fixed`：元素相对于浏览器窗口定位，始终固定在屏幕的某个位置。 5. **模拟`position:sticky`效果**： 当元素在屏幕内时正常显示，超出屏幕范围时固定在屏幕某位置。可以使用JavaScript监听滚动事件，当达到特定位置时，切换元素的`position`属性为`fixed`。 6. **清除浮动**： - `overflow:hidden`或`auto`：创建BFC（块格式化上下文）。 - 添加空`div`并设置`clear:both`。 - 对于浮动元素后续的元素设置`clear:both`。 7. **事件传播**： - 冒泡：事件从最深的节点开始，逐级向上层元素传播。 - 捕获：事件从最外层元素开始，逐级向下层元素传播。 - 阻止冒泡：使用`event.stopPropagation()`。 - 事件代理：在父元素上绑定事件，通过事件冒泡处理子元素事件，节省内存，便于动态添加元素的事件处理。 8. **JavaScript执行顺序**： JavaScript引擎遵循单线程执行、宏任务和微任务的概念。提供的代码示例中，`console.log(1)`先执行，然后异步任务`setTimeout`和`Promise`的回调，其中`Promise`的`then`属于微任务，优先执行，故顺序为1634257。 9. **JavaScript内置类型**： - 基本类型：`null`、`undefined`、`string`、`number`、`boolean`。 - 对象类型：`Array`、`Object`。 10. **类型判断**： - `typeof`：检测除函数和null之外的基本类型，对于对象（包括数组），返回"object"。 - `instanceof`：检查对象是否属于某个构造函数的实例。 - `Object.prototype.toString.call()`：更全面地识别对象类型，返回类型字符串。 以上知识点是Vue面试中可能遇到的基础题目，理解并熟练掌握它们对于初级Vue开发者至关重要。