前端基础: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://xiahunao.cn/news/2660662.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

学习使用wps将ppt的页面保存为图片的方法

学习使用wps将ppt的页面保存为图片的方法 方案 方案 1、打开ppt&#xff0c;点击文件&#xff0c;另存为&#xff0c;选择文件类型为图片格式&#xff0c;jpg或者png&#xff0c;如下图&#xff1a; 2、点击每张幻灯片

springcloud中使用openfeign来优化接口调用

简单介绍在springcloud中使用openfeign来优化接口调用 目录 一、引入依赖二、为服务提供者编写openfeign接口三、服务消费者调用定义的openfeign接口四、项目结构五、日志级别配置1、通过配置类进行全局配置2、通过配置类进行局部配置3、通过配置文件配置 一、引入依赖 <!-…

Hive中支持毫秒级别的时间精度

实际上&#xff0c;Hive 在较新的版本中已经支持毫秒级别的时间精度。你可以通过设置 hive.exec.default.serialization.format 和 mapred.output.value.format 属性为 1&#xff0c;启用 Hive 的时间精度为毫秒级。可以使用以下命令进行设置&#xff1a; set hive.exec.defau…

音频修复和增强软件:iZotope RX 10 (Win/Mac)中文汉化版

iZotope RX 是一款专业的音频修复和增强软件&#xff0c;一直是电影和电视节目中使用的行业标准音频修复工具&#xff0c;iZotope能够帮助用户对音频进行制作、后期合成处理、混音以及对损坏的音频进行修复&#xff0c;再解锁更多功能之后还能够对电影、游戏、电视之中的音频进…

OSPF被动接口配置-新版(14)

目录 整体拓扑 操作步骤 1.基本配置 1.1 配置R1的IP 1.2 配置R2的IP 1.4 配置R4的IP 1.5 配置R5的IP 1.6 配置PC-1的IP地址 1.7 配置PC-2的IP地址 1.8 配置PC-3的IP地址 1.9 配置PC-4的IP地址 1.10 检测R1与PC3连通性 1.11 检测R2与PC4连通性 1.12 检测R4与PC1连…

unity学习笔记----游戏练习02

一、阳光值的展示和消耗 1.创建一个文本组件用于显示阳光的数值&#xff0c;然后在脚本中得到这个UI。 在SunManger中得到这个组件的引用 public TextMeshProUGUI sunPointText; 写一个用于更新显示的方法 public void UpdataSunPointText() { sunPointText.tex…

计算机网络(6):应用层

每个应用层协议都是为了解决某一类应用问题&#xff0c;而问题的解决又往往是通过位于不同主机中的多个应用进程之间的通信和协同工作来完成的。 应用层的具体内容就是规定应用进程在通信时所遵循的协议。 应用层的许多协议都是基于客户服务器方式。即使是对等通信方式&#x…

Grafana Loki 组件介绍

Loki 日志系统由以下3个部分组成&#xff1a; Loki是主服务器&#xff0c;负责存储日志和处理查询。Promtail是专为loki定制的代理&#xff0c;负责收集日志并将其发送给 loki 。Grafana用于 UI展示。 Distributor Distributor 是客户端连接的组件&#xff0c;用于收集日志…

uniapp:实现手机端APP登录强制更新,从本地服务器下载新的apk更新,并使用WebSocket,实时强制在线用户更新

实现登录即更新&#xff0c;或实时监听更新 本文介绍的是在App打开启动的时候调用更新&#xff0c;点击下方链接&#xff0c;查看使用WebSocket实现实时通知在线用户更新。 uniapp&#xff1a;全局消息是推送&#xff0c;实现app在线更新&#xff0c;WebSocket&#xff0c;ap…

《MySQL系列-InnoDB引擎01》MySQL体系结构和存储引擎

文章目录 第一章 MySQL体系结构和存储引擎1 数据库和实例2 MySQL配置文件3 MySQL数据库路径4 MySQL体系结构5 MySQL存储引擎5.1 InnoDB存储引擎5.2 MyISAM存储引擎5.3 NDB存储引擎5.4 Memory存储引擎5.5 Archive存储引擎5.6 Federated存储引擎 6 连接MySQL6.1 TCP/IP6.2 命名管…

docker compose 部署 grafana + loki + vector 监控kafka消息

Centos7 随笔记录记录 docker compose 统一管理 granfana loki vector 监控kafka 信息。 当然如果仅仅是想通过 Grafana 监控kafka&#xff0c;推荐使用 Grafana Prometheus 通过JMX监控kafka 目录 1. 目录结构 2. 前提已安装Docker-Compose 3. docker-compose 自定义服…

关于java选择结构switch及反编译

关于java选择结构switch及反编译 在上一篇文章中&#xff0c;我们了解了选择结构中的if else等&#xff0c;本章内容让我们说明一下上一篇文章中的伏笔&#xff0c;switch选择结构&#x1f914; switch多选择结构 多选择结构&#xff1a;多选择结构除了else if &#xff0c;…

Codeforces Round 918 (Div. 4)(AK)

A、模拟 B、模拟 C、模拟 D、模拟 E、思维&#xff0c;前缀和 F、思维、逆序对 G、最短路 A - Odd One Out 题意&#xff1a;给定三个数字&#xff0c;有两个相同&#xff0c;输出那个不同的数字。 直接傻瓜写法 void solve() {int a , b , c;cin >> a >>…

YOLOv5改进 | 2023主干篇 | 华为最新VanillaNet主干替换Backbone实现大幅度长点

一、本文介绍 本文给大家来的改进机制是华为最新VanillaNet网络&#xff0c;其是今年最新推出的主干网络&#xff0c;VanillaNet是一种注重极简主义和效率的神经网络架构。它的设计简单&#xff0c;层数较少&#xff0c;避免了像深度架构和自注意力这样的复杂操作(需要注意的是…

鸿蒙Harmony(十一)Stage模型

Stage模型&#xff1a;HarmonyOS 3.1 Developer Preview版本开始新增的模型&#xff0c;是目前主推且会长期演进的模型。在该模型中&#xff0c;由于提供了AbilityStage、WindowStage等类作为应用组件和Window窗口的“舞台”&#xff0c;因此称这种应用模型为Stage模型。 UIAb…

verilog rs232串口模块

前面发了个发送模块&#xff0c;这次补齐&#xff0c;完整。 串口计数器&#xff0c;波特率适配 uart_clk.v module uart_clk(input wire clk,input wire rst_n,input wire tx_clk_en,input wire rx_clk_en,input wire[1:0] baud_sel,output wire tx_clk,output wire rx_clk )…

js遍历后端返回的集合将条件相同的放入同一个数组内

项目场景&#xff1a; echarts折线图需要根据条件动态展示多条不同曲线 解决方案&#xff1a; 后端直接将使用sql将数据查询出来返回即可,因为我这里不是Java使用的C#不是很熟练后台不好写逻辑,所以在前端js完成的 代码如下: function createline(villagename, buildingname…

Centos7:Jenkins+gitlab+node项目启动(3)

Centos7&#xff1a;Jenkinsgitlabnode项目启动(1) Centos7&#xff1a;Jenkinsgitlabnode项目启动(1)-CSDN博客 Centos7&#xff1a;Jenkinsgitlabnode项目启动(2) Centos7&#xff1a;Jenkinsgitlabnode项目启动(2)-CSDN博客 Centos7&#xff1a;Jenkinsgitlabnode项目启…

Java ArrayList在遍历时删除元素

文章目录 1. Arrays.asList()获取到的ArrayList只能遍历&#xff0c;不能增加或删除元素2. java.util.ArrayList.SubList有实现add()、remove()方法3. 遍历集合时对元素重新赋值、对元素中的属性赋值、删除元素、新增元素3.1 普通for循环3.2 增强for循环3.3 forEach循环3.4 str…

116基于matlab的盲源信号分离

基于matlab的盲源信号分离。FASTICA方法&#xff0c;能够很好的将信号解混&#xff0c;可以替换数据进行分析。具有GUI界面&#xff0c;可以很好的进行操作。程序已调通&#xff0c;可直接运行。 116matlab盲源信号分离FASTICA (xiaohongshu.com)