vue2 中的 export import
vue中组件的引用嵌套通过export import语法链接
Nodejs中的 export import
P1.js
export default {
name: 'P1'
}
index.js
import P1 from './P1.js' alert(P1.name);
P1.name的内容就是P1.js文件中name的值'P1'
/opt/wks/vue/01_webpack/node_modules/.bin/webpack-cli index.js --output build.js
$ cat index.html
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="build.js" charset="utf-8"></script>
</body>
</html>
打开index.html页面，就会出现一个弹框，内容就是P1
P1.js中export的是一个对象，对象有属性name，index.js文件中import P1相当于前面对外开放对象的一个“引用”，之所以叫“引用”，是因为P1.js中name的值发生变化时，index.js中P1.name也会跟着变化；
“引用”这两个字又加一个引号，是因为export是静态链接，在编辑阶段已经把所关联的内容整合到一体了，
P1.name这个属性在整合后的文件中就一份，它变化了，任何地方对它的访问，当然也能体现这种变化。
vue 中的export import
P1.js变成了P1.vue，文件后缀后变了，不再是纯粹一个JS文件，还可以加入HTML DOM 标签；不同的内容用不同的标签分开
.vue是VUE文件的后缀，视图放于views目录
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld' Vue.use(Router) alert(HelloWorld.name); export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
vue demo路由中首先import HelloWorld，HelloWorld.vue的JS部分如下
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
路由的效果是点击一个URL，能够跳转到一个vue页面，导出的对象本身没有包含vue文件的路径，个人猜测是Router对象会通过“component: HelloWorld” 找到“import HelloWorld from '@/components/HelloWorld'”这一句，然后定位“@/components/HelloWorld”这个文件；必须export的对象本身不包含页面信息，Router必须根据传入的对象参数找到页面
简单说，.vue视图中export与vue中的组件相关联的时候，最终最得的是一个包含JS与DOM的视图
vue2 中的 export import的更多相关文章
- ES6中的export,import ,export default
ES6模块主要有两个功能:export和importexport用于对外输出本模块(一个文件可以理解为一个模块)变量的接口import用于在一个模块中加载另一个含有export接口的模块.也就是说使用 ...
- （转）关于ES6的 模块功能 Module 中export import的用法和注意之处
关于ES6的 模块功能 Module 中export import的用法和注意之处 export default 的用法 export default命令用于指定模块的默认输出.显然,一个模块只能有一 ...
- 如何在Vue2中实现组件props双向绑定
Vue学习笔记-3 前言 Vue 2.x相比较Vue 1.x而言,升级变化除了实现了Virtual-Dom以外,给使用者最大不适就是移除的组件的props的双向绑定功能. 以往在Vue1.x中利用pr ...
- Vue2中实现微信分享支付功能
Vue2中实现微信分享支付功能 近期做了一个微信公众号前后分离项目,前端采用Vue2开发,后端SpringBoot,今天迫不及待的来给大家分享一下这次在开发中遇到的一些坑以及解决办法. 在这里,一些 ...
- 程序间数据共享与传递：EXPORT/IMPORT、SAP/ABAP Memory
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- PL/SQL developer export/import (转)
export/import图标为灰色:原因:相关应用程序没有关联菜单栏 --> Tools --> Import Tables... --> Oracle Import Export ...
- 自学Zabbix10.1 Configuration export/import 配置导入导出
自学Zabbix10.1 Configuration export/import 配置导入导出 通过导入/导出zabbix配置文件,我们可以将自己写好的模板等配置在网络上分享,我们也可以导入网络上分享 ...
- docker 学习（六） export/import/load/save images
export/import 是一对命令: load/save是一对命令 一: export / import使用 1: 查看镜像: docker ps -a 2:导出镜像:docker ex ...
- JavaScript ES6中，export与export default
自述: 本来是对new Vue()和export default比较懵的,查了一下,发现我理解错了两者的关系,也没意识到export与export default的区别,先简单的记录一下基本概念,后续 ...
随机推荐
- Java日期API
JDK8之前日期时间API java.util.Date类 表示特定的瞬间,精确到毫秒 构造器: Date():使用无参构造器创建的对象可以获取本地当前时间. Date(long date) 常用方法 ...
- 01 | let 和 const语法 | es6
01 | let 和 const语法 ES6新增了let命令,用来声明变量.它的用法类似于var,但也有区别 let 和 var 1.作用范围不同 var声明的变量在全局范围内都有效,所以全局只有一个 ...
- mysql批量修改某一列的值为另外的值
sql语句 UPDATE tb_info SET org_id = 2170 WHERE org_id = 815
- 2021中国能源网络信息安全大赛wp
FROM TEAM BINX Web ezphp CODE 将base64解了之后得到: $O0O000="rFqQmguebyiVTBwlWAJYRhsHXfpojxEndNGkZICDL ...
- Mac Python相关配置操作汇总
以下总结一下我在安装pytorch时用到的一些命令及操作,方便以后回顾 一.Which xxxx 直接查找到xxxx所在的路径.如下: which python python: aliased to ...
- vuex基础（vuex基本结构与调用）
import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const modulesA = { state:{//状态 count: ...
- [bzoj1037]生日聚会
dp,用f[i][j][x][y]表示i个男孩,j个女孩,以i+j为结尾的子序列男-女最多为x,女-男最多为y的合法方案数,转移到f[i+1][j][x+1][max(y-1,0)]和f[i][j+1 ...
- ES6学习 第五章 正则的扩展
前言 本章介绍正则的扩展.有些不常用的知识了解即可. 本章原文链接:正则的扩展 RegExp 构造函数 从 ES6 开始,如果RegExp构造函数第一个参数是一个正则对象,并且第二个标志存在且为标志参 ...
- 一些 tips
在本博客中,一般写题解的题都是我认为比较有价值的题,然而我还做过一些有一定价值,但并没有达到值得写一篇题解的程度,故将这些题目总结出的套路用一句话概括在这里: 当然如果看到我太久不更请在评论区里催我一 ...
- 洛谷 P5331 - [SNOI2019]通信（CDQ 分治优化建图+费用流）
题面传送门 首先熟悉网络流的同学应该能一眼看出此题的建模方法: 将每个点拆成两个点 \(in_i,out_i\),连一条 \(S\to in_i\),容量为 \(1\) 费用为 \(0\) 的边 连一 ...