前端基础:Vue搞笑白话文(工作之余瞎写)

1、data:{}与data(){return{}}这两个是个什么鬼?

vue实例

new Vue({el:'#app',data:{name:'李四'}})

组件实例

const aaa = Vue.extent({data(){return {name:''}}
})

为什么Vue实例可以那么写而组件实例就不行了?原因就是因为在底层原理上,组件是可以复用的,如果你把组件搞成相互可以变化就完了,看一下下边这些代码。

 let x1 = {a:1,b:2}let x2 = {}x2 = x1x1.a = 99console.log('获取内容', x1, x2)

这是为什么呢?这个牵扯到我们引用类型的变量直接给另外一个人相当于地址给了其他人,你把门的钥匙给了其他人这怎么能行呢?咱们改造一下。

function x1() {return {a:1,b:2}}let x2 = x1()let x3 = x1()x3.a = 99console.log('获取内容', x3, x2)

 

可以了, 这么神奇呢,其实就是相当于把主人通过一个函数给,而非像之前的直接自己给,所以在it的世界中,我们想要复用,用function return就是可以了

所以有了

new Vue({router,store,render: h => h(App)
}).$mount('#app')

2、数组方法push()和unshift()实现原理是个什么鬼?

push()末尾加,unshift()头加,常说的置顶

function pushDemo(arr,val) {arr[arr.length] = valreturn arr}

 那么我们如果在头部加的话就需要做一件事情需要把所有的元素往后边移动一位

function unshiftDemo(arr,val) {for (let i = arr.length;i>=0;--i) {arr[i] = arr[i-1]}arr[0] = valreturn arr}

3、写一个函数打印出来学生的平均成绩(二维数组)

 function average() {let arr = [[1,2,3],[4,5,6],[7,8,9]]let total = 0let avergeNum = 0.0for(let row = 0;row<arr.length;row++) {for(let i = 0;i<arr[row].length;i++){total += arr[row][i]}avergeNum = total/arr[row].lengthconsole.log('student' + parseInt(row+1) + 'averageNum' + avergeNum.toFixed(2))total = 0avergeNum = 0.0}}

4、VueComponent.prototype._proto_ === Vue.prototype 这个Vue的内置关系什么鬼?

其实VueComponent.prototype找到自己的原型再继续往上_proto_,Vue构造函数的原型,这两个指向同一个,我们想一想,一般原型最终会找到最终的Object,但是把VueComponent.prototype._proto_指向了Vue.prototype,这个有个好处就是所有Vue原型上边的方法,VueComponent都能够找到。乖乖,这就是最有灵感的地方。

稍微提一下,我们如何产生VueComponent,需要通过Vue.extend()来产生这个构造函数。

也就是说Vue的方法

  5、为啥Vue.config.js里边使用module.exports暴漏?

作为一个前端人员,整天敲啊敲,整天用的是import 用的是 exfort default,但是module.exoprts不常用,首先我们需要理解的是配置文件是管理整个项目的,而webpack是由common.js来开发的,这个Vue.config.js如果你配置了,那么这个就会跟webpack进行合并,进行覆盖按照你写的走,做到项目个性化。

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

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

相关文章

k8s集群通过helm部署skywalking

1、安装helm 下载脚本安装 ~# curl -fsSL -o get_helm.sh https://raw.githubusercontent.com/helm/helm/master/scripts/get-helm-3 ~# chmod 700 get_helm.sh ~# ./get_helm.sh或者下载包进行安装 ~# wget https://get.helm.sh/helm-canary-linux-amd64.tar.gz ~# mv helm …

python使用openpyxl为excel模版填充数据,生成多个Sheet页面

目标&#xff1a;希望根据一个给定的excel模版&#xff0c;生成多个Sheet页面&#xff0c;比如模版&#xff1a; 示例程序 import openpyxlexcel_workbook openpyxl.load_workbook("模版.xlsx") for _i in range(3): # 比如填充3个页面# 复制模版sheet页&#x…

基于NXP I.MX8 + Codesys的工业软PLC解决方案

全新i.MX 8M Plus是一个混合人工智能SoC&#xff0c;将先进的嵌入式SoC与最新的人工智能/机器学习硬件NPU技术相结合&#xff0c;通过神经网络加速器&#xff0c;为边缘计算提供强大的机器学习能力&#xff0c;是i.MX 8M Plus一个最为突出的优势。WEC-IMX8P核心板特别适合在机器…

SpringBoot+拦截器(Interceptor)

记录一下SpringBoot的拦截器(Interceptor)使用 拦截器(Interceptor)是AOP面向切面编程的思想来实现的&#xff0c;对于只写代码的来说&#xff0c;具体如何实现不需要多关心&#xff0c;只需要关心如何去使用&#xff0c;会用在那些地方。 当http请求进入Springboot应用程序后…

GBASE南大通用-一文读懂如何用Zabbix监控GBase 8c

南大通用GBase 8c是基于openGauss3.0构建的一款多模多态的分布式数据库&#xff0c;支持行存、列存、内存等多种存储模式和单机、主备式、分布式等多种部署形态&#xff0c;具备多模多态、极高性能、极高可用、极致弹性、极致安全等特性&#xff0c;为金融、政务、互联网等行业…

CGAL的主成分分析

此软件包提供了分析二维和三维对象集的功能。它提供了所有有界对象的轴对齐边界框、质心和主成分分析的计算&#xff0c;以及加权点集的重心。请注意&#xff0c;与大多数CGAL软件包不同&#xff0c;该软件包使用近似方法&#xff08;特别是线性最小二乘拟合&#xff09;&#…

数据采集遇到验证码校验的一般破解方式简述

背景 百度自动采集是一种高效的数据采集方法&#xff0c;但是在采集过程中经常会遇到图片验证码的问题&#xff0c;从而导致采集失败。那么有没有什么方法可以绕过图片验证呢&#xff1f;本文将为您详细介绍。 解决方案 一、使用OCR技术识别验证码 OCR技术可以识别图片中的…

vue实现滑动切换:切换选项时滑块有滑动过渡的效果

效果图 思路&#xff1a; 1. 高亮的色块是独立的一个盒子&#xff0c;需要插入当前激活的内容用来撑开色块盒子的宽度&#xff0c;这样色块的宽度就会和当前激活的内容宽度一致&#xff0c;色块的字体颜色设置透明即可 2. 色块滑动的距离是读当前激活元素的offsetLeft&#x…

文献阅读:LoRA: Low-Rank Adaptation of Large Language Models

文献阅读&#xff1a;LoRA: Low-Rank Adaptation of Large Language Models 1. 文章简介2. 方法介绍3. 实验 & 结论 1. 基础实验 1. Bert系列模型2. GPT系列模型 2. 消解实验 1. 作用矩阵考察2. 中间维度考察3. 扰动程度分析 4. 总结 & 思考 文献链接&#xff1a;htt…

SLAM学习入门--机器学习

文章目录 机器学习逻辑回归&#xff08;LR&#xff09;基本原理为什么 LR 要使用 sigmoid 函数&#xff1f;LR 可以用核函数么&#xff1f;为什么 LR 用交叉熵损失而不是平方损失&#xff1f;LR 能否解决非线性分类问题&#xff1f;LR为什么要离散特征&#xff1f;逻辑回归是处…

Linux文件系统结构及相关命令2 什么是Shell? help cd cd的用法 ls 的用法

Shell 是一种用于与操作系统进行交互的命令行解释器。它是用户与操作系统内核之间的接口&#xff0c;接受用户的命令并将其传递给操作系统进行执行。 在大多数的 Unix-like 操作系统&#xff08;如 Linux 和 macOS&#xff09;以及类 Unix 系统中&#xff0c;Shell 是默认的命…

如何开发一个google插件(二)

前言 在上一篇文章如何开发一个google插件(一)里主要介绍了google插件的基本结构。 在这篇文章中主要结合reactwebpack进行一个代码演示&#xff0c;源码地址&#xff1a;源码地址 下载源码后打开浏览器的扩展程序管理->加载已解压的扩展程序&#xff0c;即可调试插件 此…

在线客服选择要点分析:如何挑选适合您需求的客服解决方案

选择一款好的在线客服系统&#xff0c;可以帮助企业多渠道的触达客户&#xff0c;与客户进行高效的沟通&#xff0c;最终达成转化的目的。 市面上现在成熟的客服系统产品有很多&#xff0c;企业在进行选择时要考虑以下几点&#xff1a; 1、企业需求 市场上的客服系统产品主要…

ArkTS - 组件生命周期

一、先说下自定义组件 在arkTs中&#xff0c;自定义组件分为两种&#xff08;我的总结&#xff09;&#xff1a; 一种是&#xff1a;根组件&#xff0c;就是被装饰器Entry装饰的入口组件&#xff0c;这也是自定义组件(父组件)。 另一种是&#xff1a;没有被Entry装饰的自定义…

分布式存储考点梳理 + 高频面试题

欢迎来到分布式存储模环节&#xff0c;本文我将和你一起梳理面试中分布式系统的数据库的高频考点&#xff0c;做到温故知新。 面试中如何考察分布式存储 广义的分布式存储根据不同的应用领域&#xff0c;划分为以下的类别&#xff1a; 分布式协同系统 分布式文件系统 分布式…

Xline command 去重机制(一)—— RIFL 介绍

为什么要对 command 去重&#xff1f; 在一个接收外部 command 的系统中&#xff0c;通常一个 command 至少要执行一次&#xff0c;我们称其为 at-least-once semantics。如果一个 command 执行失败&#xff0c;系统内部经常会实现一套重试结构来尝试恢复这个问题&#xff0c;…

HTML 基础

文章目录 01-标签语法标签结构 03-HTML骨架04-标签的关系05-注释06-标题标签07-段落标签08-换行和水平线09-文本格式化标签10-图像标签图像属性 11-路径相对路径绝对路径 12-超链接标签13-音频14-视频 01-标签语法 HTML 超文本标记语言——HyperText Markup Language。 超文本…

【分布式配置中心】聊聊Apollo的安装与具体配置变更的原理

【管理设计篇】聊聊分布式配置中心 之前就写过一篇文章&#xff0c;介绍配置中心&#xff0c;但是也只是简单描述了下配置中心的设计点。本篇从apollo的安装到部署架构到核心原理进一步解读&#xff0c;大概看了下apollo的原理&#xff0c;感觉没有必要深究&#xff0c;所以就…

2023年“中银杯”四川省职业院校技能大赛“云计算应用”赛项样题卷③

2023年“中银杯”四川省职业院校技能大赛“云计算应用”赛项&#xff08;高职组&#xff09; 样题&#xff08;第3套&#xff09; 目录 2023年“中银杯”四川省职业院校技能大赛“云计算应用”赛项&#xff08;高职组&#xff09; 样题&#xff08;第3套&#xff09; 模块…

【北亚数据恢复】mysql表被truncate,表数据被delete的数据恢复案例

云服务器数据恢复环境&#xff1a; 华为ECS云服务器&#xff0c;linux操作系统&#xff0c;mysql数据库&#xff08;innodb引擎&#xff09;。作为网站服务器使用。 云服务器故障&#xff1a; 在执行mysql数据库版本更新测试时&#xff0c;误将本应该在测试库上执行的sql脚本执…