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的区别,先简单的记录一下基本概念,后续 ...
随机推荐
- 负载均衡算法WRR介绍
一.负载均衡 负载均衡是一个很大的概念,既有从硬件层面来解决问题的,又有从软件层面解决的,有关负载均衡的介绍,推荐阅读: http://os.51cto.com/art/201108/285359.h ...
- 手把手从0到1：搭建Kubernetes集群
搭建 k8s 集群网上很多教程,如果是手工部署或者实验环境可以直接使用 MiniKube 或者 Kind,来在本地启动简单的 Kubernetes 集群进行后面的学习即可.如果是使用 MiniKube ...
- go输入Hello word
package main import "fmt" func main() { fmt.Println("hello word") } 输入hello ...
- VMware Workstation 无法连接到虚拟机。请确保您有权运行该程序、访问该程序使用的所有目录以及访问所有临时文件目录。 VMware Authorization Service 当前未运行
VMware Workstation 无法连接到虚拟机.请确保您有权运行该程序.访问该程序使用的所有目录以及访问所有临时文件目录. VMware Authorization Service 当前未运行 ...
- MyScript 开发文档
一.IInk SDK runtime 1.1 引擎创建 1.2 对象释放 1.3 获取并设置配置 配置 访问配置 配置识别 二.文件存储 2.1 支持的内容的类型 2.2 模型结构 2.3 Conte ...
- 大爽Python入门教程 3-5 习题
大爽Python入门公开课教案 点击查看教程总目录 1 求平方和 使用循环,计算列表所有项的平方和,并输出这个和. 列表示例 lst = [8, 5, 7, 12, 19, 21, 10, 3, 2, ...
- m3u8 ts 视频流爬取思路，合成
.... 先开调试,输入查找一下有没有 m3u8 文件 然后下下来用Notepad++ 打开一下 (以下的样子) 这里就是整个视频的视频流, .ts 的都是文件,都下下来, ------------ ...
- InnoDB 索引详解
1.什么是索引 索引是存储引擎用于快速找到记录的一种数据结构. 2.索引有哪些数据结构 顺序查找结构:这种查找效率很低,复杂度为O(n).大数据量的时候查询效率很低. 有序的数据排列:二分查找法又称折 ...
- 细说ThreadLocal(一)
前言 java虚拟机在执行Java程序的过程中会把它所管理的内存划分为若干个不同的数据区域.如下图所示: 其中堆是占虚拟机中内存最大的,堆被所有线程所共享,其最主要的便是存放实例对象.也因为堆内存是共 ...
- [bzoj4943]蚯蚓排队
询问相当于要求长度为k的公共子串个数,很容易联想到hash,由于询问是对全局的,因此对全局开一个hash的桶对于合并/删除操作,将中间新产生/需要删除的字符串暴力修改即可,单次复杂度最坏为$o(k^{ ...