【每日前端面经】2023-02-24

题目来源: 牛客

对Vue的理解

Vue是一款流行的JS前端框架,关注的核心是MVC模式的视图层,能够简化数据更新
Vue的核心是数据驱动、组件化和指令系统

  • 数据驱动: 分为模型层、视图层和视图模型层
  • 组件化: 可以把各种逻辑封装进统一组件进行复用
  • 指令系统: 当表达式产生改变时,响应式地对DOM产生作用

如何实现一个v-model自定义组件

v-model本质上就是一个v-bind和emit的语法糖

// 父组件
<template><Chind v-model:name="nameValue" @update:name="updateValue" />
</template>
<script>const nameValue = ref<String>("hyq");const updateName = (val) => nameValue.value = val;
</script>// 子组件
<script setup lang="ts">
const props = defineProps<{name: String;
}>();
const emits = defineEmits(["update:name"]);
watch(name, (newVal, _oldVal) => emits("updatea:name", newVal));
</script>

组件通信

  • props/$emit
  • p a r e n t / parent/ parent/children
  • a t t r s / attrs/ attrs/listeners
  • provide/inject
  • ref/$refs
  • eventBus
  • VueX
  • storage

实现EventBus

直接在全局实例挂载一个eventBus,通过 e v e n t B u s . eventBus. eventBus.on监听事件, e v e n t B u s . eventBus. eventBus.emit触发事件

JS数据类型

  • Number
  • String
  • Boolean
  • Object
  • Null
  • Undefined
  • Symbol
  • BigInt

==是如何将空和0判断相等的

JS会先进行类型转换,将空转换成0,这是两个类型相同,进行比较,结果为true

面试官:说说你对vue的理解?
Vue3.0 自定义组件实现v-model
vue3 属性传值和自定义事件(composition API属性和上下文对象)
vue3加ts的组合式api中怎么使用watch侦听器
js中==和===的区别
Vue中 EventBus 的使用,如何实现Vue中的EventBus
超详细vue组件间通信的12种方式

新手发文,礼貌求关❤️

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

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

相关文章

【VSCode】SSH Remote 通过跳板机连开发机提示“bash行1 powershell未找到命令”

需求背景 因为需要&#xff0c;在家我需要挂上公司VPN然后SSH连到跳板机&#xff0c;然后再从跳板机SSH进开发机。 问题背景 跳板机进开发机输入完密码显示 bash行1 powershell未找到命令VSCode SSH Remote跳板机配置请自行搜素其他文章config配置 注意其中ssh.exe地址请根据…

Microsoft Edge 越用越慢、超级卡顿?网页B站播放卡顿?

记录10个小妙招 Microsoft Edge 启动缓慢、菜单导航卡顿、浏览响应沉闷&#xff1f;这些情况可能是由于系统资源不足或浏览器没及时更新引起的。接下来&#xff0c;我们将介绍 10 种简单的方法&#xff0c;让 Edge 浏览器的速度重新起飞。 基础检查与问题解决 如果 Microsoft…

基于Python爬虫河南开封酒店数据可视化系统设计与实现(Django框架) 研究背景与意义、国内外研究现状

博主介绍&#xff1a;黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者&#xff0c;CSDN博客专家&#xff0c;在线教育专家&#xff0c;CSDN钻石讲师&#xff1b;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程&#xff…

并发编程(5)共享模型之不可变

7 共享模型之不可变 本章内容 不可变类的使用不可变类设计无状态类设计 7.1 日期转换的问题 问题提出 下面的代码在运行时&#xff0c;由于 SimpleDateFormat 不是线程安全的, 有很大几率出现 java.lang.NumberFormatException 或者出现不正确的日期解析结果&#xff0c;…

规则持久化(Sentinel)

规则持久化 基于Nacos配置中心实现推送 引入依赖 <dependency><groupId>com.alibaba.csp</groupId><artifactId>sentinel-datasource-nacos</artifactId> </dependency> 流控配置文件 [{"resource":"/order/flow",…

ubuntu压缩和解压

-c 创建 -x 解压 -v 显示过程 -f 文件名 xz格式 tar -tf arm-linux-gnueabi-5.4.0.tar.xz 查看压缩包的内容 tar -xf arm-linux-gnueabi-5.4.0.tar.xz -C / 解压 gz格式 t…

六、Vuex

六、Vuex 6.1 Vuex是什么 概念&#xff1a;专门在 Vue 中实现集中式状态&#xff08;数据&#xff09;管理的一个 Vue 插件&#xff0c;对 vue 应 用中多个组件的共享状态进行集中式的管理&#xff08;读/写&#xff09;&#xff0c;也是一种组件间通信的方 式&#xff0c;且…

vue3获取环境变量import.meta.env

vitevue的时候环境变量的获取方式变成如下&#xff1a; console.log(import.meta.env)

MongoDB之角色与权限及创建用户与授权操作详解

MongoDB之角色与权限及创建用户与授权操作详解 文章目录 MongoDB之角色与权限及创建用户与授权操作详解1. 角色与权限1. 角色分类2. 权限说明 2. MongDB创建用户及删除用户1. 创建用户2. 查看用户信息3. 修改用户密码 3. db.runCommand创建用户与授权1. 创建用户2. 更改用户权限…

ARMv8-AArch64 的异常处理模型详解之异常向量表vector tables

目录 一&#xff0c;AArch64 异常向量表 二&#xff0c;栈指针以及SP寄存器的选择 三&#xff0c;从异常返回 一&#xff0c;AArch64 异常向量表 异常向量表&#xff08;vector tables&#xff09;是一组存放于普通内存&#xff08;normal memory&#xff09;空间的&#xf…

【机器学习科学库】全md文档笔记:Jupyter Notebook和Matplotlib使用(已分享,附代码)

本系列文章md笔记&#xff08;已分享&#xff09;主要讨论人工智能相关知识。主要内容包括&#xff0c;了解机器学习定义以及应用场景&#xff0c;掌握机器学习基础环境的安装和使用&#xff0c;掌握利用常用的科学计算库对数据进行展示、分析&#xff0c;学会使用jupyter note…

vue从flask获取数据并显示

记录一个前后端分离遇到的问题&#xff0c;即vue前端从flask后端获取数据。具体描述如下&#xff1a;flask只负责连接数据库并获取数据库的数据&#xff0c;并返回给前端vue&#xff1b;vue则需要获取后端返回的数据并显示。 方法如下&#xff0c;分别用一个vue组件和一个flas…

跟着爱学习的饲养员做题记录之两个数之和,力扣1

题目要求在给定的整数数组中找到两个数的索引&#xff0c;使它们的和等于一个特定的目标值。 import java.util.Hashtable;/*** 开发人员&#xff1a; * 时间&#xff1a;2024/2/24*/ //两数之和 public class leecode1 {public static void main(String[] args) {int[] nums …

npm install报错,如何解决

npm install报错可能有多种原因&#xff0c;以下是一些常见的解决方法&#xff1a; 检查网络连接&#xff1a;确保你的网络连接正常&#xff0c;有时候网络不稳定会导致npm install失败。 清除npm缓存&#xff1a;运行命令npm cache clean --force清除npm的缓存&#xff0c;然…

【网站项目】488服装店销售管理系统

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

【CMake】(9) 日志

message 函数被用于向用户显示信息。这个函数可以在 CMake 运行时输出各种级别的消息,包括状态消息、警告、错误等。 message 函数的语法 message([<mode>] "message to display" ...)<mode> 可选的参数,指定消息的类型。可能的值包括: STATUS: 显示…

迷你世界之建筑生成球体

local x0,y0,z00,30,0--起点坐标 local dx,dy,dz60,60,60--外切长方体横纵竖长度 local count,all0,dx*dy*dz--计数&#xff0c;总数 local m,k10000,0--单次生成方块数&#xff0c;无用循环值 local x,y,z0,0,0--当前坐标 local demath.random(2,19)/2 local id600--方块…

评估测试接口软件与网站的使用方法及优劣势比较

评估测试接口软件与网站的使用方法及优劣势比较 导言 在软件开发和测试过程中&#xff0c;对接口进行测试是至关重要的一步。测试接口的软件和网站提供了各种工具和方法&#xff0c;以便开发人员和测试人员能够有效地测试他们的应用程序接口。本文将探讨几种常见的测试接口软…

小米标准模组+MCU 快速上手开发(二)——之模组串口调试

小米标准模组+MCU 开发笔记之固件调试 背景技术名词简介● 小米IoT开发者平台● 小米IoT 模组● 固件● OTA● CRC32固件双串口调试● MHCWB6S-IB 模组资料下载● MHCWB6S-IB 模组管脚图● 上电调试背景 小米标准模组+MCU的开发过程中,由于部分官方资料较为古早,踩了很多的坑…

单片机上电后不工作,应该检查什么

当单片机上电后不工作&#xff0c;应该按照以下步骤进行检查&#xff1a; 1.电源检查。使用电压表测量单片机的电源电压是否正常&#xff0c;确保电压在规定的范围内&#xff0c;如常见的5V。 2.复位检查。检查复位引脚的电压是否正常&#xff0c;在单片机接通电源时&#xff…