vue 新学习 06 js的prototype ,export暴露,vue组件,一个重要的内置关系

部分内容参考的这篇文章
原文链接:https://blog.csdn.net/harry5508/article/details/84025146
写的很好。
01
在js中:
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
原型链
在这里插入图片描述
注意:构造函数.prototype=实例化对象.__proto__,都是指向函数的原型。
export:

在这里插入图片描述
-export用于对外输出本模块(一个文件可以理解为一个模块)变量的接口
-import用于在一个模块中加载另一个含有export接口的模块。

有两种导出方式:
01.分别导出 (export + 数据类型/函数声明 + 变量名字/函数名字)

一个a.js文件有如下代码:

export var name="李四";

在其它文件里引用如下:(vue组件内部)

import { name } from "/.a.js" //路径根据你的实际情况填写
export default {
  data () {
    return { }
  },
  created:function(){
    alert(name)//可以弹出来“李四”
  }

上面的例子是导出单个变量的写法,如果是导出多个变量就应该按照下边的方法,用大括号包裹着需要导出的变量:

 var name1="李四";
 var name2="张三";
 export { name1 ,name2 }

在其他vue组件里引用如下:

import { name1 , name2 } from "/.a.js" //路径根据你的实际情况填写
export default {
  data () {
    return { }
  },
  created:function(){//create:打开文件默认执行的方法
    alert(name1)//可以弹出来“李四”
    alert(name2)//可以弹出来“张三”
  }
 }

如果导出的是个函数呢,那应该怎么用呢,其实一样,如下

function add(x,y){
   alert(x*y)
  //  想一想如果这里是个返回值比如: return x-y,下边的函数怎么引用
}
export { add }

在其他vue组件里引用如下:

import { add } from "/.a.js" //路径根据你的实际情况填写
export default {
  data () {
    return { }
  },
  methods:function(){
   add(4,6) //弹出来24
  }
 }
 

02.export与export default
export跟export default 有什么区别捏?如下:

1、export与export default均可用于导出常量、函数、文件、模块等
2、你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够对其进行使用
3、在一个文件或模块中,export、import可以有多个,export default仅有一个
4、通过export方式导出,在导入时要加{ },export default则不需要
这样来说其实很多时候export与export default可以实现同样的目的,只是用法有些区别。注意第四条,通过export方式导出,在导入时要加{ },export default则不需要。使用export default命令,为模块指定默认输出,这样就不需要知道所要加载模块的变量名。


var name="李四";
export { name }
//import { name } from "/.a.js" 
可以写成:
var name="李四";
export default name
//import name from "/.a.js" 这里name不需要大括号

内置关系:
在这里插入图片描述

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

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

相关文章

Popover气泡卡片(antd-design组件库)简单使用

1.Popover气泡卡片 点击/鼠标移入元素,弹出气泡式的卡片浮层。 2.何时使用 当目标元素有进一步的描述和相关操作时,可以收纳到卡片中,根据用户的操作行为进行展现。 和 Tooltip 的区别是,用户可以对浮层上的元素进行操作&#xff…

项目实战 — 消息队列(5){统一硬盘操作}

前面已经使用数据库管理了交换机、绑定、队列,然后又使用了数据文件管理了消息。 那么,这里就创建一个类,讲之前的两个部分整合起来,对上层提供统一的一套接口,表示硬盘上存储的所有的类的信息。 /* * 用这个类来管理…

【Linux】Linux下git的使用

文章目录 一、什么是git二、git发展史三、Gitee仓库的创建1.新建仓库2.复制仓库链接3.在命令行克隆仓库3.1仓库里的.gitignore是什么3.2仓库里的git是什么 三、git的基本使用1.将克隆仓库的新增文件添加到暂存区(本地仓库)2.将暂存区的文件添加到.git仓库中3.将.git仓库中的变化…

Flink正常消费一段时间后,大量反压,看着像卡住了,但又没有报错。

文章目录 前言一、原因分析二、解决方案 前言 前面我也有提到,发现flink运行一段时间后,不再继续消费的问题。这个问题困扰了我非常久,一开始也很迷茫。又因为比较忙,所以一直没有时间能够去寻找答案,只是通过每天重启…

如何设计一个自动化测试框架

在进行自动化框架设计之前我们先来看两个问题,什么是自动化框架,设计的时候应该注意什么原则,然后该怎么做?本文会以一个web端的UI自动化测试框架设计为例 Python自动化测试:2023最新合集Python自动化测试开发框架【全…

部署Tomcat和jpress应用

静态页面:静态页面是指在服务器上提前生成好的HTML文件,每次用户请求时直接返回给用户。静态页面的内容是固定的,不会根据用户的请求或其他条件进行变化。静态页面的优点是加载速度快,对服务器资源要求较低,但缺点是无…

fishing之踩坑篇捕获数据不齐全

文章目录 一、问题记录二、解决方法三、更新钓鱼模板四、进行点击邮件五、查看仪表盘免责声明 一、问题记录 通过点击邮件内的链接,提交数据,但是只记录密码,无法记录username 二、解决方法 对于需要被捕获的表单数据,除了inp…

faac内存开销较大,为方便嵌入式设备使用进行优化(valgrind使用)

faac内存开销较大,为方便嵌入式设备使用进行优化,在github上提了issues但是没人理我,所以就搞一份代码自己玩吧。 基于faac_1_30版本,原工程https://github.com/knik0/faac faac内存优化: faac内存开销较大,为方便嵌入…

自然语言处理学习笔记(三)————HanLP安装与使用

目录 1.HanLP安装 2.HanLP使用 (1)预下载 (2)测试 (3)命令行 (4)测试样例 3.pyhanlp可视化 4. HanLP词性表 1.HanLP安装 HanLP的 Python接口由 pyhanlp包提供,其安装…

Hyper实现git bash在windows环境下多tab窗口显示

1.电脑上安装有git bash 下载链接:https://gitforwindows.org/ 安装Hyper 下载链接:官网 https://hyper.is/ 或者在百度云盘下载: https://pan.baidu.com/s/1BVjzlK0s4SgAbQgsiK1Eow 提取码:0r1f 设置 打开Hyper,依次点左上角-&g…

从特斯拉FSD v11.4.6,看FSD入华

从特斯拉FSD v11.4.6,看FSD入华 1. 芝加哥城区a. 亮点b. 问题 2. 小镇中心a. 亮点b. 问题 3. FSD入华a. 技术路线b. 场景 4. 参考视频 FSD最近更新了v11.4.6,本文根据2个FSD城区测试视频,一起看一下有哪些亮点和问题。 FSD入华的消息也甚嚣尘…

图像快速傅里叶变换的工业应用案例简介:图像自相关,背景纹理去除,旋转矫正,划痕检测

快速傅里叶变换是非常重要的数学分析工具,同时也是一种非常重要的信号处理方法。 下面借助Halcon商业图像处理库,介绍些工业应用案例,我们可以通过案例理解图像快速傅里叶变换的一些应用场景。 案例1:图像自相关性确定芯片间距 …

springCache-缓存

SpringCache 简介:是一个框架,实现了基于注解的缓存功能,底层可以切换不同的cache的实现,具体是通过CacheManager接口实现 使用springcache,根据实现的缓存技术,如使用的redis,需要导入redis的依赖包 基于map缓存 …

AI编程工具Copilot与Codeium的实测对比

csdn原创谢绝转载 简介 现在没有AI编程工具,效率会打一个折扣,如果还没有,赶紧装起来. GitHub Copilot是OpenAi与github等共同开发的的AI辅助编程工具,基于ChatGPT驱动,功能强大,这个没人怀疑…

【100天精通python】Day27:文件与IO操作_CSV文件处理

目录 专栏导读 1. CSV文件格式简介 2 csv模块的使用方法 3 读写CSV文件的示例 3.1 读取CSV文件示例 3.2 写入CSV文件示例 4 CSV文件的常用数据处理 4.1 读取CSV文件的特定列 4.2 读取CSV文件的特定行 5 csv 文件的特殊处理 5.1 处理包含逗号、换行符、引号的字段 5.…

MySql之日志

Buffer Pool Buffer Pool (缓冲池)是 InnoDB 存储引擎中非常重要的内存结构,顾名思义,缓冲池其实就是类似 Redis 一样的作用,起到一个缓存的作用,因为我们都知道 MySQL 的数据最终是存储在磁盘中的&#xf…

如何通过 WordPress 数据库启用插件?【进不去后台可用】

如果您无法访问 WordPress 后台并需要激活插件以恢复访问权限,则可以通过 WordPress 数据库来实现。本文将向您展示如何使用数据库轻松激活 WordPress 插件。 何时使用数据库激活 WordPress 插件? 许多常见的 WordPress 错误会阻止网站所有者访问 WordP…

性能测试工具在提升软件质量和用户体验方面的关键作用

在当今的数字时代,软件应用的性能和响应速度对于用户体验和企业的成功至关重要。为了满足用户对高性能和卓越体验的期望,开发团队需要使用专业的性能测试工具来检测和改进应用程序的性能。本文将讨论性能测试工具在提升软件质量和用户体验方面的关键作用…

Python 模块 locust 性能测试

简介 locust 是 Python 的一个开源的负载测试工具,用于测试网络应用程序的性能和可伸缩性。它使用Python编写,并提供了一个简单易用的语法来定义和执行负载测试。locust模块允许用户模拟大量并发用户并观察系统在高负载下的响应情况。 目录 1. 基本用法…

Spring5.2.x 源码使用Gradle成功构建

一 前置准备 1 Spring5.2.x下载 1.1 Spring5.2.x Git下载地址 https://gitcode.net/mirrors/spring-projects/spring-framework.git 1.2 Spring5.2.x zip源码包下载,解压后倒入idea https://gitcode.net/mirrors/spring-projects/spring-framework/-/…