前端基础: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 = x1
   x1.a = 99
   console.log('获取内容', x1, x2)

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

function x1() {
      return {
        a:1,
        b:2
      }
    }
   let x2 = x1()
    let x3 = x1()
   x3.a = 99
   console.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] = val
      return arr
    }

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

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

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

 function average() {
      let arr = [[1,2,3],[4,5,6],[7,8,9]]
      let total = 0
      let avergeNum = 0.0
      for(let row = 0;row<arr.length;row++) {
        for(let i = 0;i<arr[row].length;i++){
          total += arr[row][i]
        }
        avergeNum = total/arr[row].length
        console.log('student' + parseInt(row+1) + 'averageNum' + avergeNum.toFixed(2))
        total = 0
        avergeNum = 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进行合并,进行覆盖按照你写的走,做到项目个性化。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

七:Day06_redis高级01

第一章 Redis入门 1.1 节 什么是NoSql型数据库 NoSQL ,泛指非关系型的数据库, NoSQL Not Only SQL,它可以作为关系型数据库的良好补充。NoSQL 不依赖业务逻辑方式存储&#xff0c;而以简单的key-value模式存储。因此大大的增加了数据库的扩展能力。 SQLNoSQL数据结构结构化非…

DevChat助手:在数据库及数据分析上面的应用实践

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;CSDN领军人物&#xff0c;全栈领域优质创作者✌&#xff0c;CSDN博客专家&#xff0c;阿里云社区专家博主&#xff0c;2023年6月CSDN上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师…

Vue 中的 ref 与 reactive:让你的应用更具响应性(下)

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

uniapp选择android非图片文件的方案踩坑记录

这个简单的问题我遇到下面6大坑&#xff0c;原始需求是选择app如android的excel然后读取到页面并上传表格数据json 先看看效果 uniapp 选择app excel文件读取 1.uniapp自带不支持 uniapp选择图片和视频非常方便自带已经支持可以直接上传和读取 但是选择word excel的时候就出现…

【每日一题】466. 统计重复个数-2024.1.2

题目&#xff1a; 466. 统计重复个数 定义 str [s, n] 表示 str 由 n 个字符串 s 连接构成。 例如&#xff0c;str ["abc", 3] "abcabcabc" 。 如果可以从 s2 中删除某些字符使其变为 s1&#xff0c;则称字符串 s1 可以从字符串 s2 获得。 例如&…

javascript中location对象的属性与方法

前言 本章介绍js中的location中的属性和方法。 文章目录 前言什么是location为什么要用locationlocation对象属性location对象方法总结 什么是location 在JavaScript中&#xff0c;location 是一个包含当前页面的URL信息的对象。它允许你获取和操作当前页面的URL&#xff0c;比…

数字IC设计——数字电路基本元器件

现代数字集成电路基本由CMOS晶体管构成&#xff0c;而CMOS门电路由PMOS场效应管和NMOS场效应管以对称互补的形式组成&#xff0c;所谓“互补”&#xff0c;即利用互补型MOSFET&#xff0c;即pMOS和nMOS&#xff0c;二者成对出现构成互补电路。 这种电路具有高的电路可靠性和抗干…

向日葵远程控制软件MySQL5.7的安装与配置

目录 一. 向日葵远程控制软件 1.1 简介 1.2 选择原因 1.3 安装及使用 1.4 使用场景 二. MySQL5.7 安装与配置 2.1 什么是MySQL 2.2 安装 MySQL5.7 2.2.1 安装步骤 2.2.2 内部连接 2.2.3 外部连接 三. 思维导图 一. 向日葵远程控制软件 1.1 简介 向日葵电脑版是一款拥有多年…

Mybatis获取参数值得两种方式:${}和#{},${}和#{}区别是什么?

${}的本质是字符串拼接&#xff0c;#{}的本质是占位符赋值 ${} 使用字符串拼接的方式拼接sql&#xff0c;若为字符串类型或日期类型的字段进行赋值时&#xff0c;需要手动加单引号&#xff1b; #{} 使用占位符赋值的方式拼接sql&#xff0c;此时为字符串类型或日期类型的字段…

Halcon顶帽运算与底帽运算的应用

Halcon顶帽运算与底帽运算的应用 文章目录 Halcon顶帽运算与底帽运算的应用1. 提取小的物件2. 校正非均匀光照 正如上文所说的&#xff0c;顶帽运算返回的像素部分是尺寸比结构元素小的&#xff0c;并且比较亮的局部小区域&#xff1b;底帽运算返回的像素部分是尺寸比结构元素小…

陆面过程模式CLM、地球系统模式CESM安装及快速运行

目录 专题一 CESM、CLM运行条件及Linux编译基础 专题二 CESM、CLM基础 专题三 CLM程序获取、结构及其功能 专题四 CLM移植、安装及快速运行 专题五 CLM配置选项及数据文件制备 专题六 CLM单点或区域运行 专题七 CLM结果处理、分析及可视化 专题八 CLM代码修改、发展及改…

旧电脑搭建NAS

旧电脑可以搭建NAS吗&#xff1f; 可以&#xff01; 性能好吗&#xff1f; 完全没问题&#xff01; 简单吗&#xff1f; 轻松上手&#xff01; 怎吗搭建&#xff1f; 这里&#xff1a;用旧电脑搭建NAS在您的家庭中&#xff0c;通过将旧 PC 转变为NAS服务器&#xff0c;您…

纯css实现三等分饼图

实现原理&#xff0c;先绘制一个圆&#xff0c;然后把圆分成两份&#xff0c;在绘制一个菱形&#xff0c;最下面的角是120&#xff0c;这样就可以实现三等分啦 关键代码是一个css很少见的属性clip-path clip-path: polygon(24rem 36rem, 48rem 18rem, 24rem 0, 0 18rem); &…

【一文入门】Git常用命令集锦--分支操作和版本管理篇

前言 Git 是一种分布式版本控制系统&#xff0c;可以帮助团队协作开发、管理和维护代码&#xff0c;提高代码质量和效率&#xff0c;掌握常用版本管理命令可以帮助我们更好地管理代码变更和历史记录。下面我将介绍开发中常用的一些Git分支操作和版本管理命令 1 分支操作 1.1 …

MySQL——事物

目录 一.发现问题 二.什么时事物 三.事务提交方式 四.事物的常规操作方式 五. 事务隔离级别 1.如何理解隔离性 2.隔离级别 3.查看与设置隔离性 4.读未提交【Read Uncommitted】 5.读提交【Read Committed】 6.可重复读【Repeatable Read】 7.串行化【serializabl…

什么是 NAS?

一、什么是 NAS&#xff1f; 在数字化时代&#xff0c;小型企业面临着日益增长的数据存储需求。为了应对这一挑战&#xff0c;网络附加存储&#xff08;NAS&#xff09;系统成为了许多企业的首选解决方案。NAS系统是一种连接到网络的存储设备&#xff0c;允许授权网络用户和异…

声明式的管理方法文件

1.声明式管理方法&#xff08;yaml&#xff09;文件 1.适合对资源的修改操作 2.声明式管理依赖于已有yaml文件&#xff0c;所有的内容都在yaml文件中声明 3.编辑好的yaml文件还是要依靠陈述式的命令发布到k8s集群当中 2.声明式的三种格式 1.deployment的yaml文件 demonset…

在pbootcms中制作静态化的TAG标签列表

如果你使用pbootcms来管理你的网站&#xff0c;你可能会遇到这样的需求&#xff1a;将TAG标签列表改成静态化的类似于栏目结构的需求。下面是实现这个需求的步骤。 步骤1 修改PHP文件 打开 apps/home/controller/ParserController.php 并找到大约在1852行左右的代码段&#x…

cesium冷知识——矩阵使用的小技巧

1、查看矩阵的最好方式是&#xff1a; 在js代码中输出tileset.modelMatrix.toString()的值 或者 在devTools的console中输入 console.log(tileset.modelMatrix.toString()) &#xff08;一定要带着console.log&#xff09; 得到的结果如下&#xff1a; 上述形式更方便查看…

AI的明天从这里开始:OJAC近屿智能带您探索AIGC星辰大海的无限可能!

你是对人工智能充满好奇的编程小白&#xff0c;还是渴望工作赋能的白领&#xff1f;或者是想投身AIGC浪潮的创业者&#xff1f;无论你的背景如何&#xff0c;只要你对AI世界充满热情&#xff0c;我们OJAC近屿智能AIGC星辰大海大模型工程师和产品经理启航班以及系列课程都欢迎您…