当前位置：首页 > news >正文

前端开发(HTML,CSS,VUE,JS)从入门到精通！第七天(Vue)(二)

news 2025/8/8 7:14:34

八、Vue 样式绑定

1．class 和 style 都是 HTML 元素的属性，用于设置元素的样式，我们可以使用 v-bind 来设置样式属性，v-bind 在处理 class 和 style 时，进行了增强，表达式除了可以使用字符串之外，还可以使用对象和数组。

（1）v-bind:class 设置一个 Vue 属性，从而可以动态的切换 class

示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo22</title>
<script src="js/vue.min.js"></script>
<style>
.cls{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div id="vm">

<label for="c1">修改颜色：</label>

<input type="checkbox" v-model="use" id="c1">

<div :class="{'cls':use}"></div>
</div>
<script>
//调用 Vue 的构造函数，产生一个 Vue 对象 vm
var vm = new Vue({
//el 定义 Vue 的挂载点，挂载到 #vm 上，那么整个 #vm 包括其后辈元素都被 Vue 管理起来，就可以使用 Vue 了
el:"#vm",
data: {//data 用于定义 Vue 对象(vm)的属性，由于 Vue 属于响应式框架，一旦这里的属性发生变化，界面上面的 Vue 的表达式页面跟着变
use: false
}
})
</script>
</body>
</html>

当然，我们也可以一次性添加多个属性来动态切换 class，例如：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo22</title>
<script src="js/vue.min.js"></script>
<style>
.active{
width: 200px;
height: 200px;
background-color: blue;
}
.text-waring{
color: red;
}
</style>
</head>
<body>
<div id="vm">

<input type="checkbox" v-model="flag1">点我
<input type="checkbox" v-model="flag2">点我

<div :class="{'active':flag1,'text-waring':flag2}">我是 DIV</div>
</div>
<script>
//调用 Vue 的构造函数，产生一个 Vue 对象 vm
var vm = new Vue({
//el 定义 Vue 的挂载点，挂载到 #vm 上，那么整个 #vm 包括其后辈元素都被 Vue 管理起来，就可以使用 Vue 了
el:"#vm",
data: {//data 用于定义 Vue 对象(vm)的属性，由于 Vue 属于响应式框架，一旦这里的属性发生变化，界面上面的 Vue 的表达式页面跟着变
flag1: false,
flag2: false
}
})
</script>
</body>
</html>

我们还可以绑定一个对象，例如：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo24</title>
<script src="js/vue.min.js"></script>
<style>
.active{
width: 200px;
height: 200px;
background-color: blue;
}
.text-waring{
color: red;
}
</style>
</head>
<body>
<div id="vm">

<div :class="classObject">我是 DIV</div>
</div>
<script>
//调用 Vue 的构造函数，产生一个 Vue 对象 vm
var vm = new Vue({
//el 定义 Vue 的挂载点，挂载到 #vm 上，那么整个 #vm 包括其后辈元素都被 Vue 管理起来，就可以使用 Vue 了
el:"#vm",
data: {//data 用于定义 Vue 对象(vm)的属性，由于 Vue 属于响应式框架，一旦这里的属性发生变化，界面上面的 Vue 的表达式页面跟着变
classObject:{
'active': true,
'text-waring': true
}
}
})
</script>
</body>
</html>

我们还可以把一个数组传给 v-bind:class，例如：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo25</title>
<script src="js/vue.min.js"></script>
<style>
.active{
width: 200px;
height: 200px;
background-color: blue;
}
.text-waring{
color: red;
}
</style>
</head>
<body>
<div id="vm">

<div :class="[activeClass,waringClass]">我是 DIV</div>
</div>
<script>
//调用 Vue 的构造函数，产生一个 Vue 对象 vm
var vm = new Vue({
//el 定义 Vue 的挂载点，挂载到 #vm 上，那么整个 #vm 包括其后辈元素都被 Vue 管理起来，就可以使用 Vue 了
el:"#vm",
data: {//data 用于定义 Vue 对象(vm)的属性，由于 Vue 属于响应式框架，一旦这里的属性发生变化，界面上面的 Vue 的表达式页面跟着变
activeClass:'active',
waringClass:'text-waring'
}
})
</script>
</body>
</html>

（2）我们还可以使用 v-bind:style 直接设置样式

示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo26</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="vm">

<div :style="{color:textColor,fontSize:fontSize}">我是 DIV</div>
</div>
<script>
//调用 Vue 的构造函数，产生一个 Vue 对象 vm
var vm = new Vue({
//el 定义 Vue 的挂载点，挂载到 #vm 上，那么整个 #vm 包括其后辈元素都被 Vue 管理起来，就可以使用 Vue 了
el:"#vm",
data: {//data 用于定义 Vue 对象(vm)的属性，由于 Vue 属于响应式框架，一旦这里的属性发生变化，界面上面的 Vue 的表达式页面跟着变
textColor:'blue',
fontSize:'30px'
}
})
</script>
</body>
</html>

我们还可以将样式直接绑定一个对象，让模板更清晰，例如：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo27</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="vm">

<div :style="styleObject">我是 DIV</div>
</div>
<script>
//调用 Vue 的构造函数，产生一个 Vue 对象 vm
var vm = new Vue({
//el 定义 Vue 的挂载点，挂载到 #vm 上，那么整个 #vm 包括其后辈元素都被 Vue 管理起来，就可以使用 Vue 了
el:"#vm",
data: {//data 用于定义 Vue 对象(vm)的属性，由于 Vue 属于响应式框架，一旦这里的属性发生变化，界面上面的 Vue 的表达式页面跟着变
/*
动态绑定 style 样式，此时的样式名和 DOM 中的样式名一致：即一个单词全部小写，两个单词以上第一个单词首字母小写，
第二个单词首字母大写
*/
styleObject:{
color:'#fff',
fontSize:'30px',
width:'200px',
height:'200px',
backgroundColor:'blue'
}
}
})
</script>
</body>
</html>

当然，我们也可以使用数组将多个样式应用在一个元素上，例如：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo27</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="vm">

<div :style="[styleObject1,styleObject2]">我是 DIV</div>
</div>
<script>
//调用 Vue 的构造函数，产生一个 Vue 对象 vm
var vm = new Vue({
//el 定义 Vue 的挂载点，挂载到 #vm 上，那么整个 #vm 包括其后辈元素都被 Vue 管理起来，就可以使用 Vue 了
el:"#vm",
data: {//data 用于定义 Vue 对象(vm)的属性，由于 Vue 属于响应式框架，一旦这里的属性发生变化，界面上面的 Vue 的表达式页面跟着变
/*
动态绑定 style 样式，此时的样式名和 DOM 中的样式名一致：即一个单词全部小写，两个单词以上第一个单词首字母小写，
第二个单词首字母大写
*/
styleObject1:{
color:'#fff',
fontSize:'30px',
width:'200px',
height:'200px',
backgroundColor:'blue'
},
styleObject2:{
border:'2px solid #ccc',
borderRadius:'20px' //驼峰命名法，对应 border-radius
}
}
})
</script>
</body>
</html>

九、事件处理

1．Vue 的事件处理通过 v-on 指令来监听事件

示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo29</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="vm">
<div style="width: 200px;height: 200px;border: 1px solid #ccc;" @click="show"></div>
</div>
<script>
//调用 Vue 的构造函数，产生一个 Vue 对象 vm
var vm = new Vue({
//el 定义 Vue 的挂载点，挂载到 #vm 上，那么整个 #vm 包括其后辈元素都被 Vue 管理起来，就可以使用 Vue 了
el:"#vm",
data: {//data 用于定义 Vue 对象(vm)的属性，由于 Vue 属于响应式框架，一旦这里的属性发生变化，界面上面的 Vue 的表达式页面跟着变
name: 'Vue'
},
methods: {
show: function (e) {//这里的参数 e 和 DOM 事件中的事件对象(Event)一致
console.log("您好" + this.name);//this 指的是当前的 Vue 对象,this.name 指上面定义的 Vue 的属性
console.log(e.clientX + ":" + e.clientY);
}
}
});
</script>
</body>
</html>

除了直接绑定一个方法之外，还可以使用内联的 JavaScript 语句：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo29</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="vm">
<button @click="show('您好')">点我</button>
</div>
<script>
//调用 Vue 的构造函数，产生一个 Vue 对象 vm
var vm = new Vue({
//el 定义 Vue 的挂载点，挂载到 #vm 上，那么整个 #vm 包括其后辈元素都被 Vue 管理起来，就可以使用 Vue 了
el:"#vm",
data: {//data 用于定义 Vue 对象(vm)的属性，由于 Vue 属于响应式框架，一旦这里的属性发生变化，界面上面的 Vue 的表达式页面跟着变
name: 'Vue'
},
methods: {
show: function (msg) {//事件函数
alert(msg);
}
}
});
</script>
</body>
</html>

2．事件的修饰符

（1）v-on 提供了事件修饰符来处理 DOM 事件的细节，比如 event.preventDefault() 或event.stopPropagation()，在 Vue 中都可以使用事件修饰符来完成，Vue 通过”.”操作符指定事件修饰符来完成事件的修饰，事件修饰符有：

① .stop：阻止冒泡

② .prevent：阻止事件的默认行为

③ .capture：阻止捕获

④ .self：只监听触发该元素的事件

⑤ .once：只触发一次

⑥ .left：鼠标左键事件

⑦ .right：鼠标右键事件

⑧ .middle：鼠标中间滚轮事件

示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo31</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="vm">
<div class="p" style="width: 300px;height: 300px;background-color: blue;" @click="show1">
<div class="s" style="width: 200px;height: 200px;background-color: red;" @click="show2">
<div class="ss" style="width: 100px;height: 100px;background-color: yellow;" @click.stop="show3">

</div>
</div>
</div>
</div>
<script>
//调用 Vue 的构造函数，产生一个 Vue 对象 vm
var vm = new Vue({
//el 定义 Vue 的挂载点，挂载到 #vm 上，那么整个 #vm 包括其后辈元素都被 Vue 管理起来，就可以使用 Vue 了
el:"#vm",
data: {//data 用于定义 Vue 对象(vm)的属性，由于 Vue 属于响应式框架，一旦这里的属性发生变化，界面上面的 Vue 的表达式页面跟着变
name: 'Vue'
},
methods: {
show1: function () {//事件函数
console.log("父元素被点击");
},
show2: function () {//事件函数
console.log("子元素被点击");
},
show3: function () {//事件函数
console.log("孙子元素被点击");
}
}
});
</script>
</body>
</html>

示例2：

<form @submit.prevent=”submit”>：阻止表单提交

<a @click.stop.prevent=”doThis”>：事件修饰符串联，阻止冒泡并阻止默认行为

<form v-on:submit.prevent>：只有修饰符

<div v-on:click.capture=”doThis”>：阻止捕获

<div v-on:click.self=”doThat”>：在当前元素本身（而不是子元素）触发时触发

<a v-on:click.once=”doThis”>：只触发一次

2．按键修饰符

（1）可以给按键事件添加修饰符，例如：<input v-on:keyup.13="submit">：当按键值是 13 的时候调用 submit方法，记住按键的 keyCode 比较困难，Vue 提供了常用的按键的别名：

① .enter：回车键

② .tab：制表符键

③ .delete：包含 del 键和 backspace 键

④ .esc：ESC键

⑤ .space：空格键

⑥ .up：向上键

⑦ .down：向下键

⑧ .left：向左键

⑨ .right：向右键

⑩ .ctrl：Ctrl键

⑪ .alt：Alt键

⑫ .shift：Shift键

⑬ .meta：Meta键

例如：<input @keyup.enter=”submit”>：当回车键松开的时候触发事件函数submit。

十、表单

1．Vue 的表单可以使用 v-model 指令在表单元素上进行双向数据绑定

示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo11</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="vm">

ViewModel/VM：<input type="text" v-model="msg"> <br>
View/V：视图：{{msg}}
</div>
<script>
//调用 Vue 的构造函数，产生一个 Vue 对象 vm
var vm = new Vue({
//el 定义 Vue 的挂载点，挂载到 #vm 上，那么整个 #vm 包括其后辈元素都被 Vue 管理起来，就可以使用 Vue 了
el:"#vm",
data: {//data 用于定义 Vue 对象(vm)的属性，由于 Vue 属于响应式框架，一旦这里的属性发生变化，界面上面的 Vue 的表达式页面跟着变
msg: ""//Model/M：数据
}
});
</script>
</body>
</html>

(1) 对于复选框，如果是一个复选框，则绑定一个逻辑值(true或false)，如果是多个复选框，则绑定到一个数组，例如：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo10</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="vm">
<h3>单个复选框</h3>
<input type="checkbox" v-model="checked"> 单个复选框 <br>
<p>单个复选框：{{checked}}</p>
<hr>
<h3>多个复选框</h3>
<input type="checkbox" value="Baidu" v-model="names"> 百度
<input type="checkbox" value="Google" v-model="names"> 谷歌
<input type="checkbox" value="Huwwei" v-model="names"> 华为
<p>多个复选框：{{names}}</p>
</div>
<script>
//调用 Vue 的构造函数，产生一个 Vue 对象 vm
var vm = new Vue({
//el 定义 Vue 的挂载点，挂载到 #vm 上，那么整个 #vm 包括其后辈元素都被 Vue 管理起来，就可以使用 Vue 了
el:"#vm",
data: {//data 用于定义 Vue 对象(vm)的属性，由于 Vue 属于响应式框架，一旦这里的属性发生变化，界面上面的 Vue 的表达式页面跟着变
checked: false, //单个复选框绑定的是一个逻辑值
names: [] //多个复选框需要绑定到一个数组
}
});
</script>
</body>
</html>

(2) select 列表的双向数据绑定：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo33</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="vm">
<select name="sites" id="sites" v-model="site">
<option value="www.baidu.com">百度</option>
<option value="www.google.com">谷歌</option>
<option value="www.huawei.com">华为</option>
</select>
<br>
<p>您的选择是：{{site}}</p>
</div>
<script>
//调用 Vue 的构造函数，产生一个 Vue 对象 vm
var vm = new Vue({
//el 定义 Vue 的挂载点，挂载到 #vm 上，那么整个 #vm 包括其后辈元素都被 Vue 管理起来，就可以使用 Vue 了
el:"#vm",
data: {//data 用于定义 Vue 对象(vm)的属性，由于 Vue 属于响应式框架，一旦这里的属性发生变化，界面上面的 Vue 的表达式页面跟着变
site:'www.huawei.com'
}
});
</script>
</body>
</html>

绑定是 option 的 value 值。

(3) 单选按钮双向数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo33</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="vm">
<input type="radio" value="boy" v-model="sex"> 男
<input type="radio" value="girl" v-model="sex"> 女
<br>
<p>您的选择是：{{sex}}</p>
</div>
<script>
//调用 Vue 的构造函数，产生一个 Vue 对象 vm
var vm = new Vue({
//el 定义 Vue 的挂载点，挂载到 #vm 上，那么整个 #vm 包括其后辈元素都被 Vue 管理起来，就可以使用 Vue 了
el:"#vm",
data: {//data 用于定义 Vue 对象(vm)的属性，由于 Vue 属于响应式框架，一旦这里的属性发生变化，界面上面的 Vue 的表达式页面跟着变
sex:''
}
});
</script>
</body>
</html>

radio 也是绑定的 value 值。

2．表单元素的修饰符

（1）.lazy：默认情况下，v-model 绑定的表单元素会在 input 事件中同步输入框的值与属性数据，但是可以加上修饰符 .lazy，从而转为 change 事件（当表单元素失去焦点的时候才同步）。

（2）.trim：自动过滤掉用户输入的首尾的空格，例如：

（3）.number：自动转换为数字

十一、Vue 的组件

1．组件（component）是 Vue 强大功能之一，组件可以扩展HTML 元素，封装可用的代码，组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用界面都可以抽象成一颗组件树。

2．注册全局组件

（1）语法：

全局组件可以在任意多个 Vue 实例中使用

注册组件之后，就可以像使用普通的 HTML 标签一样使用组件，例如：

示例：创建一个全局组件，并使用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo35</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="app">

<usercomp></usercomp>
</div>
<div id="vm">

<usercomp></usercomp>
</div>
<script>
/**
* 注册全局组件，第一个参数是组件的名称，第二个参数是选项，全局组件可以在任何一个 Vue 实例中使用
*/
Vue.component("usercomp",{
//template 表示组件的模板，也就是该组件要展示的 HTML 内容，注意，如果模板中包含多条 HTML 语句，需要使用 div 包裹起来
template: "<div><h1>自定义的全局组件</h1><p>一个段落</p></div>"
});
//调用 Vue 的构造函数，产生一个 Vue 对象 app
var app = new Vue({
//el 定义 Vue 的挂载点，挂载到 #app 上，那么整个 #app 包括其后辈元素都被 Vue 管理起来，就可以使用 Vue 了
el:"#app"
});
//调用 Vue 的构造函数，产生一个 Vue 对象 vm
var vm = new Vue({
//el 定义 Vue 的挂载点，挂载到 #vm 上，那么整个 #vm 包括其后辈元素都被 Vue 管理起来，就可以使用 Vue 了
el:"#vm"
});
</script>
</body>
</html>

3．我们也可以定义局部组件，局部组件只能在当前的 Vue 实例中使用

示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo36</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="vm">

<localcomp></localcomp>
</div>
<script>
//调用 Vue 的构造函数，产生一个 Vue 对象 vm
var vm = new Vue({
//el 定义 Vue 的挂载点，挂载到 #vm 上，那么整个 #vm 包括其后辈元素都被 Vue 管理起来，就可以使用 Vue 了
el:"#vm",
components: {//局部组件，仅限于当前 Vue 实例能使用，可以定义多个这样的局部组件
//局部组件名
"localcomp":{//选项
template:"<div><h1>我是一个局部组件</h1></div>"
}
}
});
</script>
</body>
</html>

4．父组件向子组件传值，可以通过组件 props 选项来处理，父组件的数据需要通过属性的方式把数据传递给子组件，子组件需要显式的使用 props 选项来声明属性

示例：将父组件的属性值动态的传给子组件，父组件的属性值发生变化时，子组件对应的属性值跟着变化

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo37</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="vm">
<input type="text" v-model="parentMsg">


<usercomp :message="parentMsg"></usercomp>
</div>
<script>
/**
* 注册全局组件，第一个参数是组件的名称，第二个参数是选项，全局组件可以在任何一个 Vue 实例中使用
*/
Vue.component("usercomp",{
/**
* 子组件是通过 props 选项来接收父组件传递过来的属性值，这个属性名是写在一个数组里面，例如：["message"]，可以
* 有多个这样的属性值，这个属性传到子组件之后就作为子组件 Vue 实例的属性，可以用表达式输出 {{message}}
*/
props:["message"],
//template 表示组件的模板，也就是该组件要展示的 HTML 内容，注意，如果模板中包含多条 HTML 语句，需要使用 div 包裹起来
template: "<div><h1>自定义的子组件</h1><p>父组件传过来的属性值：{{message}}</p></div>"
});
//调用 Vue 的构造函数，产生一个 Vue 对象 vm
var vm = new Vue({
//el 定义 Vue 的挂载点，挂载到 #vm 上，那么整个 #vm 包括其后辈元素都被 Vue 管理起来，就可以使用 Vue 了
el:"#vm",
data: {
parentMsg: ''
}
});
</script>
</body>
</html>

十二、补充 ES6 语法

1. ES6 模块

（1）export 命令

① 模块功能主要由两个命令构成：export 和 import，export 用于规定模块对外接口，import 命令用于输入其他模块提供的功能

② 一个模块就是一个独立的文件，该文件内部的所有变量，外部无法获取，如果你希望外部能够读取模块内部的某个变量，就必须使用 export 关键字输出该变量，如下：

//profile.js:

export var firstName=”Michael”;

export var lastName=”Jackson”;

export var year = 1958;

export 的写法，除了像上面这样，还有另外一种写法：

//profile.js:

var firstName=”Michael”;

var lastName=””Jackson”;

var year = 1958;

export{ firstName, lastName, year};

应该优先考虑这种写法，因为这样就可以在脚本的尾部，一眼就看清楚输出了哪些变量

③ export 除了可以输出变量之外，还可以输出函数或类

export function multiply(x,y){

return x*y;

}

通常情况下，export 输出的变量就是本来的名字，但是可以使用关键字as重命名

function v1(){...}

function v2(){...}

export {

v1 as streamV1,

v2 as streamV2

}

（2）import 命令

① 使用 export 命令定义了模块对外接口以后，其他 JS 文件就可以通过 import 命令加载这个模块

//main.js

import {firstName,lastName,year} from “./profile.js”;

function setName(ele){

ele.textContent = firstName+”.”+lastName;

}

② 如果想为输入的变量重新取一个名字，import 命令要使用 as 关键字，将输入的变量重命名

import {lastName as surName} from ‘./profile.js’;

③ import 命令输入的变量都是只读的，因为它本质是输入接口，也就是说，不允许在加载模块的脚本里面，修改接口：

import {a} from ‘./xxx.js’;

a = {};//错误

但是，如果a是一个对象，改写a的属性是可以的：

import {a} from ‘./xxx.js’;

a.foo = ‘hello’;

④ 模块的整体加载

除了指定加载某个输出，还可以使用整体加载，即用星号（*）指定一个对象，所有的输出值都加载在这个对象上。

//circle.js

export function area(r){

return Math.PI*r*r;

}

export function cirumference(r){

return 2*Math.PI*r;

}

现在加载这个模块

import {area,cirumference} from ‘./circle’;

console.log(‘圆面积：’+area(4));

console.log(‘圆周长：’+cirumference(4));

上面的写法是逐一加载的方法，整体加载的方法如下：

import * as circle from ‘./circle’;

console.log(‘圆面积：’+circle .area(4));

console.log(‘圆周长：’+circle .cirumference(4));

（3）export default 命令

① 从前面的例子我们可以看出，使用 import 命令的时候，用户需要知道加载的变量的名和函数名，否则无法加载，但是，由于我们希望快速上手，未必愿意阅读文档，去了解有哪些属性和方法，为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到 export default 命令，为模块指定默认输出。

//export-default.js

export default function(){

console.log(“foo”);

}

export default { //导出一个JSON对象

}

上面的代码是一个模块文件 export-default.js，它的默认输出是一个函数，其他模块在加载该模块的时候，import 命令可以为该匿名函数指定名称：

//import-default.js

import customName from ‘./export-default’;

customName();//调用函数，输出foo

② export default 命令除了可以用在匿名函数前，也可以用在非匿名函数前。

查看全文