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的区别,先简单的记录一下基本概念,后续 ...
随机推荐
- 一款吊炸天的AI图片增强工具！
背景 如果你工作中需要制作文档,PPT,或者给文章配图,或者需要制作视频.一定会有在网上寻找图片素材的经历. 但网上的图质量参差不一,有时候找到了喜欢的图,但是质量不行,分辨率太低. 有的人就忍了,但 ...
- SpringBoot 居然有 44 种应用启动器
啥是应用启动器?SpringBoot集成了spring的很多模块,比如tomcat.redis等等.你用SpringBoot搭建项目,只需要在pom.xml引入相关的依赖,和在配置文件中简单的配置就可 ...
- Part 34 AngularJS controller as vs scope
There are 2 ways to expose the members from the controller to the view - $scope and CONTROLLER AS. T ...
- C#中OnLoad事件和Form1_Load事件的区别
在学习<GDI+高级编程>第二章的过程中遇到一个疑问,就是为何有的代码用的是覆写一个OnLoad事件,而平日里我用的一般是Form1_Load事件,这两个函数很相近,但是具体有什么关系呢? ...
- myeclipse自带tomcat
安装myeclipse自带的tomcat没有在myeclipse的安装目录下,是再myeclipse指定的工作空间下 的.metadata\.plugins\com.genuitec.eclipse. ...
- 一文了解Docker基本概念
一.何为Docker Docker 是一个用于开发.交付和运行应用程序的开放平台,Docker 使您能够将应用程序与基础环境分开,以便您可以快速交付软件.借用百度百科的话来说,Docker 是一个开源 ...
- [cf1491I]Ruler Of The Zoo
为了统一描述,下面给出题意-- 有$n$只动物,编号为$i$的动物有属性$a_{i,j}$($0\le i<n,0\le j\le 2$) 初始$n$只动物从左到右编号依次为$0,1,...,n ...
- [noi1760]SAM
建立SAM,求出每一个节点最左边的出现位置(即right集合中的最小元素,在树上dfs即可) 枚举左端点i和右端点j(保证j是最小的满足$s[i,j)$不是$s[0,i)$的子串),维护k表示$s[i ...
- [luogu3733]八纵八横
根据$[WC2011]XOR$的思路,每次暴力重构线性基,令$l'=\frac{l^{2}}{w}$,则有一个$nql'$的做法(这里线性基位数很多,所以要用bitset) 由于初始连通,因此每一个环 ...
- rm命令弱爆了！
大家好,我是良许. 创建.删除和修改文件是用户在 Linux 系统中执行的非常常见操作.大家都知道,在 Linux 系统里使用 rm 命令删除单个文件时,几乎一瞬间就完成了.但是如果文件数量很大,那么 ...