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

news2025/1/11 12:34:30

部分内容参考的这篇文章
原文链接: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不需要大括号

vue和vue组件的内置关系

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

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

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

相关文章

品牌宣传与媒体传播是声誉管理的主要方式之一

企业声誉是现如今影响品牌信任度、客户忠诚度的重要因素,也被视为企业的一种无形资,更影响着企业未来的发展。因此,企业声誉管理也日渐成为企业管理的重要课题之一,尤其在品牌营销管理领域。 什么是声誉管理?声誉管理有…

【果树农药喷洒机器人】Part1:研究现状分析以及技术路线介绍

本专栏介绍:付费专栏,持续更新机器人实战项目,欢迎各位订阅关注。 关注我,带你了解更多关于机器人、嵌入式、人工智能等方面的优质文章! 文章目录 一、项目背景二、国内外研究现状2.1 国内研究现状2.2 国外研究现状 三…

回归预测 | MATLAB实现POA-CNN-BiGRU鹈鹕算法优化卷积双向门控循环单元多输入单输出回归预测

回归预测 | MATLAB实现POA-CNN-BiGRU鹈鹕算法优化卷积双向门控循环单元多输入单输出回归预测 目录 回归预测 | MATLAB实现POA-CNN-BiGRU鹈鹕算法优化卷积双向门控循环单元多输入单输出回归预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 MATLAB实现POA-CNN-BiGRU鹈鹕…

kretprobe 和 fexit

kretprobe 孬,跟朋友简单讨论了相关主题,发现 fexit 高尚。 fexit 的把戏在 2020 年中那段走火入魔的时间玩过不少,没想到就是 fexit 的标准,看来多数人觉得正确的思路它就是正确的。 kretprobe 每次调用函数都要执行复杂的带锁…

从零构建深度学习推理框架-6 构建计算图

PNNX PNNX项目 PyTorch Neural Network eXchange(PNNX)是PyTorch模型互操作性的开放标准。PNNX为PyTorch提供了一种开源的模型格式,它定义了与Pytorch相匹配的数据流图和运算图,我们的框架在PNNX之上封装了一层更加易用和简单的计…

外网通过ipv6访问家里设备

想从公司访问家里的设备,比较轻松方便的,用向日葵也可以远程。但是家里电脑比较old的了,向日葵开起来,占用内存挺大的,想尝试windows自带的“mstsc”,所以硬着头皮搞ipv6. (重点提示&#xff1…

干草垛(Haystack)里找“`膝尖儿`(Kneedle)”: 算法复现

干草垛(Haystack)里找“膝尖儿(Kneedle)”: 算法复现 缘起 源 引用: Finding a “Kneedle” in a Haystack: Detecting Knee Points in System Behavior Ville Satopa † , Jeannie Albrecht† , David Irwin‡ , and Barath Raghavan †Williams College, Williamstown, MA …

Connection reset原因分析及解决思路

Connection reset原因分析及解决思路 我们在开发过程中经常会出现Connection reset问题,包括http调用,数据库连接等场景。出现Connection reset的原因很多,本文从tcp层面简单介绍下Connection reset出现的原因和问题,以及在实际开…

AJAX-笔记(持续更新中)

文章目录 Day1 Ajax入门1.AJAX概念和axios的使用2. 认识URL3.URL的查询参数4.常用的请求方法和数据提交5.HTTP协议-报文6.接口文档7.form-serialize插件8.案例用户登录 Day2 Ajax综合案bootstrap弹框图书管理图片上传更换背景个人信息设置 Day3 AJAX原理XMLHttpRequestPromise封…

【雕爷学编程】Arduino动手做(193)---移远 BC20 NB+GNSS模块7

37款传感器与模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的。鉴于本人手头积累了一些传感器和执行器模块,依照实践出真知(一定要动手做)的理念,以学习和交流为目的&#x…

springboot集成分布式任务调度系统xxl-job(调度器和执行器)

一、部署xxl-job服务端 下载xxl-job源码 下载地址: https://gitee.com/xuxueli0323/xxl-job 二、导入项目、创建xxl_job数据库、修改配置文件为自己的数据库 三、启动项目、访问首页 访问地址: http://localhost:8080/xxl-job-admin/ 账号&#xff1…

IO进程线程day9(2023.8.7)

一、Xmind整理: 消息队列的原理: 共享内存的原理: 二、课上练习: 练习1:用信号的方式回收僵尸进程(重点!) 1.子进程退出后,父进程会收到17)SIGCHLD信号。 2.父进程中捕获…

04-1_Qt 5.9 C++开发指南_常用界面设计组件_字符串QString

本章主要介绍Qt中的常用界面设计组件,因为更多的是涉及如何使用,因此会强调使用,也就是更多针对实例,而对于一些细节问题,需要参考《Qt5.9 c开发指南》进行学习。 文章目录 1. 字符串与普通转换、进制转换1.1 可视化U…

用i18n 实现vue2+element UI的国际化多语言切换详细步骤及代码

一、i18n的安装 这个地方要注意自己的vue版本和i1n8的匹配程度,如果是vue2点几,记得安装i18n的8版本,不然会自动安装的最新版本,后面会报错哦,查询了下资料,好像最新版本是适配的vue3。 npm install vue-…

2023年天猫除湿器行业数据分析(天猫数据分析软件)

除湿器是小家电的一种,随着人们生活品质的提升及健康意识的增强,人们对于除湿产品的观念也在不断改变,除湿器这一小家电也走入了越来越多消费者的家中。特别是在南方地区,全年的空气湿度都处于较高的水平,尤其是回南天…

PHP最简单自定义自己的框架创建目录结构(二)

1、mvc目录结构 2、目录解释 KJ&#xff1a;项目名称 core&#xff1a;框架核心目录 KJ.php 框架运行入口 index: 框架模块 controller:模块控制器 model:模块模型数据库操作 view:页面显示html index.php:index模块框架入口 3、index.php框架入口文件引入框架 <?php r…

FPGA学习——Altera IP核调用之PLL篇

文章目录 一、IP核1.1 IP核简介1.2 FPGA中IP核的分类1.3 IP核的缺陷 二、PLL简介2.1 什么是PLL2.2 PLL结构图2.3 C4开发板上PLL的位置 三、IP核调用步骤四、编写测试代码五、总结 一、IP核 1.1 IP核简介 IP核&#xff08;知识产权核&#xff09;&#xff0c;是在集成电路的可…

ReSharper C++ 2023 Crack

ReSharper C 2023 Crack ReSharper的AI助手会考虑项目中使用的语言和技术。这种上下文感知可以一开始就调整其响应&#xff0c;为您节省时间和精力。 您可以在查询中包含部分源代码。ReSharper将检测你发送或粘贴到聊天中的代码&#xff0c;并正确格式化&#xff0c;而人工智能…

Redis 加入服务列表自启动

1、下载reids windows版本&#xff0c;选择zip格式下载 2、解压zip&#xff0c;并进入路径&#xff1b; 3、命令提示符&#xff08;cmd&#xff09; 进入解压后的路径后&#xff0c;输入指令&#xff1a;redis-server --service-install redis.windows.conf&#xff1b; 4、如…

Gumbel-Softmax简介

一、Gumbel Softmax trick的使用场景 1. argmax简介 在NLP领域的强化学习或者对抗学习中&#xff0c;token的生成是离散的。比如&#xff0c;一个token的产生是一个大小为vocab size的one-hot向量。比如&#xff0c;对于character level的token&#xff1a; [ 1 , 0 , 0 , 0 …