ES6——import和export的用法(8种)
import和export的方法是基于服务器端环境方可使用可以启动服务器
下面是安装以及使用步骤:
1、安装php应用程序
安装包可自行从外面下载
2、提前安装了phpstudy 安装好之后会有一个www文件夹
3、把内容放入该文件夹中我的文件夹叫exportandimport
4、里面有一个index.js 和一个index.html
把下方的源代码粘贴到对应的文件中即可
使用方法:
输入网址: http://localhost/exportandimport即可打开
打开控制台查看是否成功:
下面是index.html 和 index.js 的八种用法
index.html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="module">
import {a} from './index.js'
console.log(a)
/*第二种情况: import {a,b,c} from './index.js'
console.log(a)
console.log(b)
console.log(c) */
/*第三种情况函数的导入: import {add} from './index.js'
console.log(add(1,2)) */
/*第四种不想暴露js中的变量名: import {x,y,z} from './index.js'
console.log(x)
console.log(y)
console.log(z) */
/*第五种联合导出1: import {a,add} from './index.js'
console.log(a)
console.log(add(1,2)) */
/* 第五种联合导出2: import {a,add} from './index.js'
console.log(a)
console.log(add(1,2)) */
/*第六种情况 export default : import a from './index.js'
console.log(a)
a可以使用别名b或者其他别名
import b from './index.js'
console.log(b) */
/* 第六种情况 export default复杂结构:import a from './index.js'
console.log(a.logo); */
/* 第七种方法:import {Person} from './index.js'
var p = new Person()
p.run()
import Person from './index.js'
var p = new Person()
p.run()*/
/*第八种方法: import * as aaa from './index.js'
console.log(aaa.flag)
console.log(aaa.name) */
</script>
</body>
</html>
index.js部分
// 第一种情况
export let a = 'Lee';
/*第二种情况 var a ='Lee';var b ='李';var c = 'web';
export {a,b,c} */
/*第三种情况函数的导出 export function add(a,b){
return a+b;
} */
/* 第四种不想暴露js中的变量名 var a ='Lee';var b ='李';var c = 'web';
export {
a as x,
b as y,
c as z
} */
/*第五种联合导出1 export var a ='Lee';
export function add(a,b){
return a+b;
} */
/*第五种联合导出2 var a ='Lee';
function add(a,b){
return a+b;
}
export {a,add} */
/* 第六种情况 export default :
var a = 'Lee';
export default a; */
/*第六种情况复杂结构 export default {
logo: 'UNI-ADMIN',
navBar: {
active: '0',
list: [{
name: "首页",
subActive: '0',
submenu: [{
icon: "el-icon-s-home",
name: "后台首页",
pathname:"index"
},
{
icon: "el-icon-picture",
name: "相册管理",
pathname:"image"
},
{
icon: "el-icon-s-claim",
name: "商品列表",
pathname:"shop_goods_list"
}
]
},
{
name: "商品",
subActive: '0',
submenu: [{
icon: "el-icon-s-claim",
name: "商品列表",
pathname:"shop_goods_list"
}]
},
{
name: "订单"
},
{
name: "会员"
},
{
name: "设置"
},
]
}
} */
/*第七种方法: export class Person{
run(){
console.log("奔跑");
}
}
class Person{
run(){
console.log("奔跑");
}
}
export default Person
*/
/* 第八种方法: let name = '小明'
var flag = true
export {
flag,name
} */
ha_lydms: 博主文章深度理解和清晰的表达方式使复杂的技术概念变得容易理解,值得收藏点赞。博主用心很有耐心,更有对知识的热忱和热爱,写了这么实用有效的分享,期盼博主能够光顾我的博客,给予宝贵的指导!
CSDN-Ada助手: 不知道 Vue入门 技能树是否可以帮到你:https://edu.csdn.net/skill/vue?utm_source=AI_act_vue
2401_86558329: 作者很强,强的一塌糊涂
我们的时光~: 我也发现了,看起来写的很详细。我还是翻出去看官方文档吧
Southern Wind: 可以加下我我给你地址