前端面试准备

Vue 的生命周期

beforeCreate(Vue实例的数据观测和事件系统都未初始化) =>created(Vue实例的数据观测已经初始化,但是DOM元素还未挂载)=>beforeMount(Vue实例的虚拟DOM已经生成,但尚未替换真实DOM)=>mounted(Vue实例已经挂载到了真实的DOM上,可以访问DOM元素。)=>beforeUpdate(数据已经更新,但是DOM尚未重新渲染)=> updated(Vue实例的数据和DOM都已经更新,可以执行一些DOM相关的操作)=>beforeDestory(在Vue实例销毁之前调用,在这一阶段,Vue实例仍然完全可用。)=>destroyed(在Vue实例销毁之后调用。
在这一阶段,Vue实例及其相关的DOM已经被销毁,无法再访问。)

vue 生命周期的作用是什么?

Vue 生命周期中有多个事件钩子,让我们在控制整个 Vue 实例过程时更容易形成好的逻辑。

第一次页面加载会触发哪几个钩子?

第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

简单描述每个周期具体适合哪些场景

beforecreate : 可以在这加个 loading 事件,在加载实例时触发

created : 初始化完成时的事件写在这⾥,如在这结束 loading 事件,异步请求也适宜在这⾥调⽤

mounted : 挂载元素,获取到 DOM 节点

updated : 如果对数据统⼀处理,在这⾥写上相应函数

beforeDestroy : 可以做⼀个确认停⽌事件的确认框

nextTick : 更新数据后⽴即操作 dom

vue使用自定义组件

1、创建自定义组件:
首先,你需要创建自定义组件。组件可以是单文件组件(.vue文件),也可以是普通的JavaScript文件。
2、通过import语句导入自定义组件。
3、通过components选项注册自定义组件。

Vue 路由跳转的几种方式

1、router-link
用于在Vue单页面应用中导航到不同的路由。

<router-link to="/about">About</router-link>

2、编程式导航
this.$router.push()方法进行路由跳转:

this.$router.push('/about');

3、router-view

简述 MVVM 框架

Model: 代表数据模型,也可以在 Model 中定义数据修改和操作的业务逻辑。

View: 代表 UI 组件,它负责将数据模型转化成 UI 展现出来。

ViewModel: 监听数据模型的改变和控制视图行为、处理用户交互,简单理解就是一个同步 View 和 Model 的对象,连接 Model 和 View。

Vue 的路由实现:hash 模式和 history 模式

hash 模式 (默认)

工作原理: 监听网页的 hash 值变化 —> onhashchange 事件, 获取 location.hash

使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。

会给用户好像跳转了网页一样的感觉, 但是实际上没有跳转

主要用在单页面应用 (SPA)

history 模式

工作原理: 主要利用 history.pushState() API 来改变 URL, 而不刷新页面.

其实一共有五种模式可以实现改变 URL, 而不刷新页面.

需要后台配置支持, 如果输入一个并不存在的 url, 需要后端配置做 “兜底配置”, 不是粗暴的返回 404, 而是返回首页

4种vue指令

v-if:判断是否隐藏;

v-for:数据循环;

v-bind:class:绑定一个属性;

v-model:实现双向绑定

v-if 和 v-show 的区别

v-if 通过控制 dom 节点的方式,添加和删除元素,进而实现显示或隐藏元素,v-show 通过设置 dom 元素的 display 来实现显示或隐藏的操作,并不会删除 dom

v-if 隐藏会将组件销毁,显示时会将其内部的监听事件重建,v-show 只是设置 display,并不会阻止子组件内部的监听事件

v-if 有着更高的切换消耗,v-show 有着更高的初始渲染消耗

W3C 标准

W3C(World Wide Web Consortium,万维网联盟)是一个制定Web标准的国际组织,它的标准旨在确保不同浏览器、设备和平台之间的互操作性,提高Web内容的可访问性和可用性。

HTML标准:
使用符合HTML规范的标签和语法,确保文档结构的正确性和清晰度。
避免使用过时的HTML元素和属性,推荐使用语义化的HTML标签来描述文档结构和内容。
CSS标准:
使用符合CSS规范的样式语法和属性,确保样式表的可读性和可维护性。
避免使用浏览器私有前缀(vendor prefix),而是优先选择标准的CSS属性和特性。
采用层叠和继承的原则,合理组织和管理样式规则,避免样式冲突和重复。
JavaScript标准:
遵循ECMAScript标准的语法和规范,确保JavaScript代码的可移植性和兼容性。
使用严格模式(strict mode)来减少错误,并使用合适的错误处理机制处理异常。
避免使用过时的JavaScript特性和API,优先选择新的Web标准和技术。
响应式设计:
使用响应式设计原则来确保网站在不同设备和屏幕尺寸下都能正确显示和良好交互。
使用CSS媒体查询来针对不同的设备和分辨率应用不同的样式,以实现自适应布局和设计。
兼容性测试:
在主流浏览器(如Chrome、Firefox、Safari、Edge等)和不同操作系统(Windows、Mac、iOS、Android等)上进行兼容性测试。
使用W3C提供的在线工具(如HTML Validator、CSS Validator等)对代码进行验证,确保符合W3C标准。

UI/UX设计

UI(User Interface,用户界面)设计关注用户与产品之间的界面交互,包括页面布局、颜色、字体、图标等。
UX(User Experience,用户体验)设计关注用户在使用产品时的整体感受和体验,包括用户需求分析、用户行为研究、用户测试等。

Ajax

Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML)是一种用于创建动态网页的技术,通过在后台与服务器进行少量数据交换,实现网页的异步更新。相比传统的同步请求方式,Ajax能够在不重新加载整个页面的情况下,局部更新页面内容,提高了用户体验和页面的响应速度。

特点:
异步:Ajax请求是异步执行的,不会阻塞页面的加载和渲染,用户可以继续操作页面。
基于事件:Ajax请求是基于事件驱动的,可以通过回调函数处理异步请求的响应结果。
局部更新:Ajax可以局部更新页面的内容,无需重新加载整个页面,减少了数据传输量和页面加载时间。
工作原理:
发送请求:通过JavaScript创建XMLHttpRequest对象,然后使用该对象发送HTTP请求到服务器。
处理响应:服务器接收到请求后,处理并生成响应数据,然后将数据返回给客户端。
更新页面:客户端接收到响应数据后,使用JavaScript处理数据,并更新页面的部分内容,通常是通过DOM操作实现。

应用场景:
动态加载内容:如动态加载文章评论、新闻列表等。
表单验证:通过Ajax向服务器发送验证请求,实时检查用户输入的合法性。
单页面应用(SPA):通过Ajax获取数据,动态更新页面内容,实现页面的无刷新加载和路由跳转。

盒模型

盒模型是CSS中用于布局的基本概念之一,指的是元素的内容、内边距、边框和外边距四个部分的组合。
内容区域(Content):
内容区域是盒模型中最内部的部分,它包含了元素的实际内容,如文本、图片等。
内容区域的大小由元素的宽度(width)和高度(height)属性决定。
内边距(Padding):
内边距是内容区域与边框之间的空白区域,用于控制元素内容与边框之间的间距。
可以使用padding属性设置元素的内边距大小,常见的值包括像素(px)、百分比(%)等。
边框(Border):
边框是围绕在内容区域和内边距外部的线条,用于装饰和分隔元素。
可以使用border属性设置元素的边框样式、宽度和颜色等。
外边距(Margin):
外边距是盒模型中最外部的部分,用于控制元素与其他元素之间的间距。
外边距在元素外部创建空白区域,可以用于调整元素在页面中的位置和布局。

响应式布局

响应式布局是一种设计和开发网页的方法,使得网页在不同设备上(如桌面、平板、手机)都能良好地显示和交互。

媒体查询(Media Queries):
媒体查询是CSS3中的一种功能,允许根据设备的特性和属性(如屏幕尺寸、分辨率、设备类型等)应用不同的样式。
使用媒体查询可以针对不同的设备和屏幕尺寸应用不同的样式,从而实现响应式布局。
弹性布局(Flexbox):
弹性布局是CSS3中的一种布局模型,旨在使容器内的子元素能够灵活地伸缩和排列,以适应不同尺寸的容器。
使用弹性布局可以实现自适应的页面布局,使页面元素能够根据设备的尺寸和屏幕方向自动调整和重新排列。
网格布局(Grid Layout):
网格布局是CSS3中的另一种强大的布局模型,允许将页面划分为行和列的网格,从而更灵活地控制页面的布局。
使用网格布局可以实现复杂的页面布局,并且能够在不同设备上提供一致的布局效果。
流式布局(Fluid Layout):
流式布局是一种相对于固定布局的布局方式,它使用百分比或者其他相对单位而不是固定单位来定义元素的宽度和高度。
使用流式布局可以使页面元素根据视口的大小自动调整大小和位置,从而适应不同尺寸的屏幕。

less&sass

Less或Sass的语法和功能,包括变量、嵌套规则、Mixin混合、函数等特性,可以使用这些特性来简化和优化CSS代码。

使用Less或Sass来模块化和组织CSS代码,将样式分解为多个文件或模块,每个模块负责管理特定的样式功能或组件,使得代码结构清晰、易于维护。

合理使用变量和Mixin混合来避免重复代码,提高代码的重用性和可维护性。例如,定义颜色、字体、间距等样式的变量,以及常用样式的Mixin混合。

使用Less或Sass的嵌套规则来简化CSS选择器的书写,提高代码的可读性和可维护性。但要注意避免过度嵌套,以免影响性能和产生样式层级过深的问题。

使用继承来减少重复的样式定义,但要谨慎使用,确保继承的样式逻辑清晰、易于理解,避免引入不必要的样式耦合和影响。

将样式按照模块或组件进行划分,每个模块或组件独立开发、测试和维护,降低代码的耦合度,便于团队协作和项目的扩展。

遵循团队或项目约定的编码规范,统一命名规范、缩进风格、注释规范等,以确保团队协作的一致性和代码的可读性。

使用Less或Sass提供的功能和工具进行代码优化和压缩,减少不必要的代码和文件大小,提高页面加载性能。

表现与数据分离

表现与数据分离是一种设计原则,旨在将应用程序的不同方面分开处理,使得各个部分之间相互独立,易于管理和维护。
在Web开发中,表现与数据分离通常指的是将网站的结构(HTML)、样式(CSS)和行为(JavaScript)分离开来,使它们各自负责不同的责任。
通过表现与数据分离,开发者可以更轻松地修改和维护代码,提高代码的可读性、可维护性和复用性,同时也便于团队协作和版本控制。

Web语义化

Web语义化是指使用具有语义的HTML标签来描述页面的结构和内容,以及使用适当的标记来表达文档的含义,使得网页在没有样式表、脚本或者屏幕阅读器等辅助工具的情况下也能够清晰地呈现给用户,并且对搜索引擎有更好的理解。
例如,使用

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/6853.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

css基础之盒子模型、浮动问题

盒子模型 一、盒子模型的组成 border边框、content内容、padding内边距、margin外边距(与另外盒子的距离) 1.边框 border-width border-style: solid实线 border-style: dashed虚线 border-style: dotted点线 border-color border: 1pxx solid pink;复合写法&#xff0c;无…

网络链路管理:智能化与自动化并行,打造稳定高效的网络环境

在当今复杂的网络环境中&#xff0c;链路管理显得尤为重要。一条稳定、高效的链路是确保网络顺畅运行的关键。监控易作为一款领先的网络监控与管理系统&#xff0c;深知链路管理的重要性&#xff0c;并致力于为用户提供智能化、自动化的链路管理解决方案。 智能添加网络链路信…

Leetcode 3134. Find the Median of the Uniqueness Array

Leetcode 3134. Find the Median of the Uniqueness Array 1. 解题思路2. 代码实现 题目链接&#xff1a;3134. Find the Median of the Uniqueness Array 1. 解题思路 这一题一开始没有自力搞定也是有点惭愧&#xff0c;思路上其实还挺好想的&#xff0c;看了一下其他大佬们…

求解亲和数

【问题描述】 古希腊数学家毕达哥拉斯在自然数研究中发现&#xff0c;220的所有真约数&#xff08;即不是自身 的约数&#xff09;之和为&#xff1a; 1245101120224455110284。而284的所有真约数为1、2、4、71、142&#xff0c;加起来恰好为220。人 们对这样的数感到很惊奇&am…

Spring Cloud架构进化实操:Eureka、Apollo、OpenFeign、Ribbon、Zuul组件

文章目录 前言一、引出二、服务注册与发现2.1 创建Eureka注册中心2.1.1 引入pom依赖2.1.2 配置yaml2.1.3 启动服务21.4 测试访问 2.2 创建服务提供者2.2.1 配置yaml2.2.2 启动服务2.2.3 测试访问 2.3 创建服务消费者2.3.1 服务提供者接口2.3.2 服务消费者调用接口 三、负载均衡…

用户中心(优化)

文章目录 功能扩充管理员修改用户信息管理员删除用户管理员添加用户添加个人主页&#xff0c;可以完善个人信息&#xff08;上传头像没有实现&#xff09;添加默认头像打造一个所有用户可发帖的页面前端页面&#xff0c;√后端建表&#xff0c;接口&#xff0c;√前后端联调√ …

W801学习笔记二十:宋词学习应用

前三章完成了唐诗的应用&#xff0c;本章将实现宋词的学习应用。 宋词与唐诗的区别不大&#xff0c;马上开始。 1、我们需要参考前面唐诗的方式&#xff0c;把宋词文本下载下来&#xff0c;并进行格式整理。 W801学习笔记十七&#xff1a;古诗学习应用——上 2、在菜单中添加…

[论文阅读]Adversarial Autoencoders(aae)和代码

In this paper, we propose the “adversarial autoencoder” (AAE), which is a probabilistic autoencoder that uses the recently proposed generative adversarial networks (GAN) to perform variational inference by matching the aggregated posterior of the hidden …

proxmox宿主机安装桌面

装完proxmox启动后一般进入shell界面&#xff0c;之后都是另外一台电脑连接web管理等操作&#xff0c;一直用起来还好。不过这样需要另外一台电脑连接管理操作&#xff0c;有时候调试时毕竟还是会有些不方便&#xff0c;就想能不能在宿主机上装个桌面做这类事&#xff0c;今天用…

python数据分析——大数据和云计算

大数据和云计算 前言一、大数据二、大数据定义三、数据存储单位四、大数据存储技术五、大数据应用技术六、大数据特征七、数据容量八、数据类型的多样性8.1结构化数据8.2半结构化数据8.3非结构化数据 九、获取数据的速度十、可变性十一、真实性十二、复杂性十三、价值十四、云计…

传输控制协议TCP

一、TCP简介 TCP是面向连接的&#xff1a; TCP连接只能有两个端点&#xff0c;TCP连接是点对点的&#xff1b; TCP提供可靠交互的服务&#xff1b; TCP提供全双工通信。 面向字节流&#xff1a; TCP中的“流”指的是流入或流出进程的字节序列&#xff1b; 虽然应用程序和…

理解 python 中的* 打包和解包

注意&#xff0c; 本文的打包和解包的概念有点类似与java 的装箱和解箱 但是还是有点区别 java 中的装箱指的是 把一系列的值让放入1个对象的属性中 而python的打包概念 包括 把一组元素打包成1个list or tuple把一系列 key value pair 打包成1个dict Python * 的基本功能&a…

Mac基于Docker-ubuntu构建c/c++编译环境

编译环境安装和使用被充分验证&#xff0c;如有期望补充的内容欢迎留言评论。 目录 前言 Docker desktop下载安装 修改镜像源 选择ubuntu镜像 docker容器启动 参数说明: 宿主机与docker容器文件共享 宿主机与docker容器拷贝文件 为 Ubuntu 配置 ssh、vim、make 相关工…

Flyway使用教程

Flyway使用教程 背景&#xff1a; 在开发环境对多个不同版本的分支进行开发&#xff0c;如果此时涉及到多张表结构修改&#xff08;比如新增字段&#xff09;&#xff0c;而在测试环境时却忘了整理SQL 脚本给测试人员执行&#xff0c;就会导致出现 bug&#xff0c;从而影响测试…

Android selinux权限

一.SE 概述 SELinux 是由美国NSA&#xff08;国安局&#xff09;和 SCC 开发的 Linux的一个扩张强制访问控制安全模块。原先是在Fluke上开发的&#xff0c;2000年以 GNU GPL 发布。从 fedora core 2开始&#xff0c; 2.6内核的版本都支持SELinux。 在 SELinux 出现之前&#…

神经网络模型里面权重衰减的理解

概述 神经网络模型里面&#xff0c;如果少部分参数的绝对值相对其他值过大&#xff0c;就会造成模型过度依赖于某些特征&#xff08;由这些较大值所代表&#xff09;&#xff0c;从而更容易产生过拟合问题。因而&#xff0c;我们有必要针对权重设置一种衰减措施&#xff0c;避…

PHP ASCII码的字符串用mb_convert_encoding 转utf-8之后不生效

检测数据类型是ascii,转码之后再检测还是utf-8没生效 private function toUTF8($str){$encode mb_detect_encoding($str, array("ASCII",UTF-8,"GB2312","GBK",BIG5,LATIN1));if ($encode ! UTF-8) {$str1 mb_convert_encoding($str, UTF-8, …

个人银行账户管理程序(2)

在&#xff08;1&#xff09;的基础上进行改进 1&#xff1a;增加一个静态成员函数total&#xff0c;记录账户总金额和静态成员函数getTotal 2对不需要改变的对象进行const修饰 3多文件实现 account。h文件 #ifndef _ACCOUNT_ #define _ACCOUNT_ class SavingAccount {pri…

力扣经典150题第五十三题:基本计算器

目录 力扣经典150题第五十六题&#xff1a;基本计算器示例提示解题思路 力扣经典150题第五十六题&#xff1a;基本计算器 给你一个字符串表达式 s &#xff0c;请你实现一个基本计算器来计算并返回它的值。 注意:不允许使用任何将字符串作为数学表达式计算的内置函数&#xf…

C#中环境变量

环境变量 什么是环境变量Environment.GetEnvironmentVariable 用于获取指定环境变量的值怎么知道环境变量存不存在&#xff1f;不存在怎么创建&#xff1f; 什么是环境变量 环境变量是操作系统中存储的一种机制&#xff0c;用于保存与操作系统环境和应用程序运行相关的配置信息…