当前位置： 首页 > news >正文

Web前端面试之Vue—对Vue的理解

news 文章来源：https://blog.csdn.net/qq_62799214/article/details/134040540 2025/4/20 8:59:10

目录

一、web发展历程

二、vue是什么

三、Vue核心特性

组件化

数据驱动

指令

四、Vue与Angular以及React的区别

一、web发展历程

Web是World Wide Web的简称，中文译为万维网

我们可以将它规划成如下的几个时代来进行理解

  • 静态网页：最早的网页是没有数据库的，可以理解成就是一张可以在网络上浏览的报纸，直到CGI技术的出现通过 CGI Perl 运行一小段代码与数据库或文件系统进行交互
  • 微软ASP，JSP的出现：2005 年左右，先后出现了微软的 ASP 和 Java Server Pages [JSP] 等技术,取代了 CGI ，增强了 WEB 与服务端的交互的安全性，其实就是Java + HTML
  • Jquery的出现，以及SPA（Single Page Application 单页面应用）的雏形，Backbone EmberJS AngularJS 这样一批前端框架的出现

二、vue是什么

  • Vue.js（简称为Vue）是一个用于创建用户界面的开源JavaScript框架
  • 也是一个创建单页应用的Web应用框架。
  • 旨在更好地组织与简化Web开发。
  • Vue所关注的核心是MVC模式中的视图层
  • 它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互

PS: Vue作者尤雨溪是在为AngularJS工作之后开发出了这一框架。他声称自己的思路是提取Angular中为自己所喜欢的部分，构建出一款相当轻量的框架最早发布于2014年2月

三、Vue核心特性

组件化

组件化就是把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式，在Vue中每一个.vue文件都可以视为一个组件

【精选】Vue 组件化编程、VueComponent实例对象_vuecomponent撖寡情_YuLong~W的博客-CSDN博客

组件化的优点：

  • 降低系统的耦合度，在保持接口不变的情况下，我们可以替换不同的组件快速完成需求，例如输入框，可以替换为日历、时间、范围等组件作具体的实现
  • 调试方便，由于整个系统是通过组件组合起来的，在出现问题的时候，可以用排除法直接移除组件，或者根据报错的组件快速定位问题，之所以能够快速定位，是因为每个组件之间低耦合，职责单一，所以逻辑会比分析整个系统要简单
  • 提高可维护性，由于每个组件的职责单一，并且组件在系统中是被复用的，所以对代码进行优化可获得系统的整体升级

数据驱动

MVVM表示的是 Model-View-ViewModel

mvvm实现了前后端更好的分离（前端需要的数据只需要请求后端的接口即可）

  • Model：模型层，负责处理业务逻辑以及和服务器端进行交互
  • View：视图层：负责将数据模型转化为UI展示出来，可以简单的理解为HTML页面
  • ViewModel：视图模型层，用来连接Model和View，是Model和View之间的通信桥梁

指令

指令 (Directives) 是带有 v- 前缀的特殊属性作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

  • 常用指令

    • 条件渲染指令 v-if
    • 列表渲染指令v-for
    • 属性绑定指令v-bind
    • 事件绑定指令v-on
    • 双向数据绑定指令v-model

四、Vue与Angular以及React的区别

Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合
1.与AngularJS的区别
相同点：

  • 都支持指令：内置指令和自定义指令；
  • 都支持过滤器：内置过滤器和自定义过滤器；都支持双向数据绑定；都不支持低端浏览器。
  • 都有双向数据绑定, 但是angular中的双向数据绑定是基于脏检查机制, vue的双向数据绑定是基于ES5的getter和setter来实现

不同点：

  • AngularJS的学习成本高，比如增加了Dependency Injection特性，而Vue.js本身提供的API都比较简单、直观
  • 在性能上，AngularJS有自己实现一套模板编译规则，依赖对数据做脏检查，所以Watcher越多越慢；Vue使用基于依赖追踪的观察并且使用异步队列更新，所有的数据都是独立触发的。
  • vue需要一个el对象进行实例化, 而angular是整个html页面下的,单页面应用, 而vue可以有多个vue实例

2.与React的区别
相同点：

  • React采用特殊的JSX语法，Vue.js在组件开发中也推崇编写.vue特殊文件格式，对文件内容都有一些约定
  • 两者都需要编译后使用
  • 中心思想相同：一切都是组件，组件实例之间可以嵌套
  • 都提供合理的钩子函数，可以让开发者定制化地去处理需求
  • 都不内置列数AJAX，Route等功能到核心包，而是以插件的方式加载
  • 在组件开发中都支持mixins的特性

不同点：

  • React采用的Virtual DOM会对渲染出来的结果做脏检查
  • Vue.js在模板中提供了指令，过滤器等，可以非常方便，快捷地操作Virtual DOM

相关文章：

Web前端面试之Vue—对Vue的理解

目录 一、web发展历程 二、vue是什么 三、Vue核心特性 组件化 数据驱动 指令 四、Vue与Angular以及React的区别 一、web发展历程 Web是World Wide Web的简称，中文译为万维网 我们可以将它规划成如下的几个时代来进行理解 静态网页：最早的网页是没…...

编程日记 2023/10/29 6:16:04

C/C++晶晶赴约会 2020年12月电子学会青少年软件编程（C/C++）等级考试一级真题答案解析

目录 C/C晶晶赴约会 一、题目要求 1、编程实现 2、输入输出 二、算法分析 三、程序编写 四、程序说明 五、运行结果 六、考点分析 C/C晶晶赴约会 2020年12月 C/C编程等级考试一级编程题 一、题目要求 1、编程实现 晶晶的朋友贝贝约晶晶下周一起去看展览&#xff0…...

编程日记 2023/10/29 6:15:04

js 解决 H 指数

给你一个整数数组 citations ，其中 citations[i] 表示研究者的第 i 篇论文被引用的次数。计算并返回该研究者的 h 指数。 根据维基百科上 h 指数的定义：h 代表“高引用次数” ，一名科研人员的 h 指数 是指他（她）至少发…...

编程日记 2023/10/29 6:14:02

在JS中，var 、let 、const 总结

let是英文单词"let"的缩写。在JavaScript中，let 关键字用来声明一个块级作用域 的变量，这意味着变量仅在声明它的代码块内有效，超出该代码块作用域时就无法访问该变量。与var不同的是，let不会被提升到函数作用域或全局作…...

编程日记 2023/10/29 6:12:01

关于网络安全运营工作与安全建设工作的一些思考

以下内容是个人成长过程中对于网络安全运营工作的理解和思考，希望通过这篇文章帮助大家更好的去做安全运营体系化建设，开始吧！ 文章目录 一、网络安全运营是什么？二、网络安全运营建设阶段第一阶段：设备限制阶段第二阶…...

编程日记 2023/10/29 6:11:00

【机器学习可解释性】4.SHAP 值

机器学习可解释性 1.模型洞察的价值2.特征重要性排列3.部分依赖图4.SHAP 值5.SHAP 值 高级使用 正文 理解各自特征的预测结果？ 介绍 您已经看到(并使用)了从机器学习模型中提取一般解释技术。但是，如果你想要打破模型对单个预测的工作原理? SHAP 值…...

编程日记 2023/10/29 6:09:57

OpenCV官方教程中文版 —— 直方图均衡化

OpenCV官方教程中文版 —— 直方图均衡化 前言一、原理二、 OpenCV 中的直方图均衡化三、 CLAHE 有限对比适应性直方图均衡化 前言 本小节我们要学习直方图均衡化的概念，以及如何使用它来改善图片的对比。 一、原理 想象一下如果一副图像中的大多是像素点的像素值…...

编程日记 2023/10/29 6:08:57

如何使用navicat图形化工具远程连接MariaDB数据库【cpolar内网穿透】

公网远程连接MariaDB数据库【cpolar内网穿透】 文章目录 公网远程连接MariaDB数据库【cpolar内网穿透】1. 配置MariaDB数据库1.1 安装MariaDB数据库1.2 测试局域网内远程连接 2. 内网穿透2.1 创建隧道映射2.2 测试随机地址公网远程访问3. 配置固定TCP端口地址3.1 保留一个固定的…...

编程日记 2023/10/29 6:07:56

【uniapp】uview1.x使用upload上传图片

和2.x不同的是，要用 action 来配置后端上传图片的接口地址； 再来一些配置项的命名有所不同，一般1.x的命名用 -，2.x的命名使用小驼峰； 1.x 的上传会自带删除时的提示框，2.x 没有； 重要的几个配置…...

编程日记 2023/10/29 6:06:55

基于nodejs+vue食力派网上订餐系统

目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 3 2.1 nodejs简介 4 2.2 express框架介绍 6 2.4 MySQL数据库 4 第3章 系统分析 5 3.1 需求分析 5 3.2 系统可行性分析 5 3.2.1技术可行性：…...

编程日记 2023/10/29 6:05:53

软件测试常用的8种功能测试类型有哪些？

软件测试常用的8种功能测试类型有哪些？ 单元测试 单元测试确保在一个段中编写的每一段代码都能产生最佳结果。开发人员在单元测试期间只看接口和确定部件。它提供了代码进展的文档，因为每个代码单元在继续下一个之前都经过了彻底的测试。 集成测试 至少对…...

编程日记 2023/10/29 6:04:52

动态规划之01背包问题

01背包问题 1. 【模板】01背包2. 分割等和子集3. 目标和4. 最后一块石头的重量 II 01背包问题是一种动态规划问题，用于求解在有限容量的背包中装入最大价值的物品组合。具体步骤如下： 定义一个二维数组dp[i][j]，表示从前i个物品中选择若干个…...

编程日记 2023/10/29 6:03:51

安防监控项目---boa服务器的移植

文章目录 前言一、boa服务器简介二、移植步骤三、测试结果四、A9平台移植BOA总结 前言 书接上期，在配置完成环境后，那么接下来呢还得移植两个非常关键的东西，一个呢时boa服务器，另一个呢时cgi接口，boa服务器能够使得我…...

编程日记 2023/10/29 6:02:50

Gson 字符串常用转换方式（集合转换为Json数组

数组转换为 Json 字符串&#xff1a; GsonUtils.toJson(itemListBean.getImgs())json 字符串转换为数组 Gson().fromJson(goodsDbBean.getImgs(), String[].class)Json 转换为已知实体类 GsonUtils.parseJSON(result, AFileInfoBean.class);Json 转换为已知实体类集合 List<…...

编程日记 2023/10/29 6:00:48

MyBatis的使用（XML映射文件）

MyBatis的使用&#xff08;XML映射文件&#xff09; MyBatis基于注解开发简单便捷&#xff0c;但是弊端是失去SQL语句的灵活性&#xff0c;不能根据实际情况产生不同的SQL语句 MyBatis除了支持注解开发以外&#xff0c;还支持一种开发方式&#xff1a;XML映射文件&#xff0c…...

编程日记 2023/10/29 5:59:46

localhost知识

文章目录 一、localhost是什么&#xff1f;二、localhost 在平时用到的地方三、 localhost 与 127.0.01 一、localhost是什么&#xff1f; localhost 是一个特殊的主机名&#xff0c;通常指代本机。它被用来进行本地开发和测试&#xff0c;也常被用作网络配置中的占位符&#…...

编程日记 2023/10/29 5:58:46

PyTorch入门学习（八）：神经网络-卷积层

目录 一、数据准备 二、创建卷积神经网络模型 三、可视化卷积前后的图像 一、数据准备 首先&#xff0c;需要准备一个数据集来演示卷积层的应用。在这个示例中&#xff0c;使用了CIFAR-10数据集&#xff0c;该数据集包含了10个不同类别的图像数据&#xff0c;用于分类任务。…...

编程日记 2023/10/29 5:57:45

【EI会议征稿】 2024年遥感、测绘与图像处理国际学术会议(RSMIP2024)

2024年遥感、测绘与图像处理国际学术会议(RSMIP2024) 2024 International Conference on Remote Sensing, Mapping and Image Processing 2024年遥感、测绘与图像处理国际学术会议(RSMIP2024)将于2024年1月19日-21日在中国厦门举行。会议主要围绕遥感、测绘与图像处理等研究领…...

编程日记 2023/10/29 5:56:43

MySQL 8 - 处理 NULL 值 - is null、=null、is not null、＜＞ null 、!= null

处理 NULL 值&#xff1a; IS NULL&#xff1a;IS NULL 用于检查一个列是否为 NULL。例如&#xff0c;如果查找一个表中某一列的值为 NULL 的行&#xff0c;可以使用以下语法&#xff1a; SELECT * FROM table_name WHERE column_name IS NULL;IS NOT NULL&#xff1a;IS NOT N…...

编程日记 2023/10/29 5:55:42

高教社杯数模竞赛特辑论文篇-2018年C题：大型百货商场会员画像描述（附获奖论文及MATLAB代码实现）

目录 摘 要 一、问题重述 1.1 问题背景 1.2 问题提出 二、问题分析 2.1 问题一的分析...

编程日记 2023/10/29 5:54:41

#力扣：2315. 统计星号@FDDLC

2315. 统计星号 - 力扣&#xff08;LeetCode&#xff09; 一、Java class Solution {public int countAsterisks(String s) {int cnt 0;boolean flag true;for(char c: s.toCharArray()) {if(c |) flag !flag;else if(c * && flag) cnt;}return cnt;} }...

编程日记 2023/10/29 5:53:40

设计模式——单例模式详解

目录 设计模式类型单例模式单例模式方式饿汉式静态常量方式静态代码块形式 懒汉式线程不安全&#xff08;不推荐&#xff09;懒汉式优化&#xff08;不推荐&#xff09; 双重检查&#xff08;推荐方式&#xff09;静态内部类&#xff08;推荐方式&#xff09;枚举方式&#xff…...

编程日记 2023/10/29 5:52:39

一、W5100S/W5500+RP2040树莓派Pico＜静态配置网络信息＞

文章目录 1. 前言2. 相关网络信息2.1 简介2.2 优点2.3 应用 3. WIZnet以太网芯片4. 静态IP网络设置示例讲解以及使用4.1 程序流程图4.2 测试准备4.3 连接方式4.4 相关代码4.5 编译烧录 5. 注意事项6. 相关链接 1. 前言 从本章开始我们将用WIZnet的W5100S/W5500以太网芯片结合RP…...

编程日记 2023/10/29 5:51:38

【C++的OpenCV】第十四课-OpenCV基础强化（二）：访问单通道Mat中的值

&#x1f389;&#x1f389;&#x1f389; 欢迎各位来到小白 p i a o 的学习空间&#xff01; \color{red}{欢迎各位来到小白piao的学习空间&#xff01;} 欢迎各位来到小白piao的学习空间&#xff01;&#x1f389;&#x1f389;&#x1f389; &#x1f496;&#x1f496;&…...

编程日记 2023/10/29 5:50:37

elementUI el-collapse 自定义折叠面板icon 和 样式 或文字展开收起

: :v-deep{.el-collapse-item__arrow {width: 40px;}.el-icon-arrow-right:before {content: "展开";font-size: 15px;font-family: heiti;color: #2295ff;font-weight: bold;}.el-collapse-item__arrow.is-active {transform: none;}.el-collapse-item__arrow.is-a…...

编程日记 2023/10/29 5:48:34

如何用个人数据Milvus Cloud知识库构建 RAG 聊天机器人？（上）

生成式人工智能时代，开发者可以借助大语言模型（LLM）开发更智能的应用程序。然而，由于有限的知识，LLM 非常容易出现幻觉。检索增强生成（RAG）https://zilliz.com/use-cases/llm-retrieval-augmented-generation 通过为 LLM 补充外部知识，有效地解决了这一问题。 在 Chat …...

编程日记 2023/10/29 5:47:29

2023年江西省“振兴杯”工业互联网安全技术技能大赛暨全国大赛江西选拔赛 Write UP

文章目录 一、协议分析 - modbus二、协议分析 - 异常的流量三、协议分析 - S7Error四、协议分析 - OmronAttack五、组态编程 - 工程的秘密六、组态编程 - 工程的秘密七、组态编程 - 简单的计算八、组态编程 - 交通灯九、组态编程 - 有趣的转盘十、应急处置 - 登录日志分析十一、…...

编程日记 2023/10/29 5:46:27

PostMan 之 Mock 接口测试

在测试的时候经常会碰到后端开发工程师的接口还没有开发完成&#xff0c;但是测试任务已经分配过来。没有接口怎么测试呢&#xff1f; 测试人员可以通过 mock server 自己去造一个接口来访问。mock server 可用于模拟真实的接口。收到请求时&#xff0c;它会根据配置返回对应的…...

编程日记 2023/10/29 5:45:26

LuatOS-SOC接口文档(air780E)--libgnss - NMEA数据处理

示例 -- 提醒: 本库输出的坐标,均为 WGS84 坐标系 -- 如需要在国内地图使用, 要转换成对应地图的坐标系, 例如 GCJ02 BD09 -- 相关链接: https://lbsyun.baidu.com/index.php?titlecoordinate -- 相关链接: https://www.openluat.com/GPS-Offset.html-- 方案1, 经lua层进行数…...

编程日记 2023/10/29 5:44:25

基于华为云 IoT 物联网平台实现家居环境实时监控

01 智能家居环境监测 智能家居环境监测采用 Ruff 开发板作为主控&#xff0c;串口线连接温湿度传感器 DHT11 和空气质量传感器 SDS011&#xff0c;每5分钟采集一次数据&#xff0c;通过 MQTT 协议发送到华为云 IoT 物联网平台&#xff0c;并基于数据分析服务实时计算出整个家庭…...

编程日记 2023/10/29 5:43:23