一、Vue
1 快速入门
1.1、什么是Vue
官网：https://cn.vuejs.org/(尤雨溪) 文档：https://cn.vuejs.org/v2/guide/
Vue是一套构建用户界面的渐进式前端框架。
“渐进式框架”就是Vue不强求你一次性接受并使用它的全部功能特性。假如你有一个项目，你可以使用Vue的部分功能来增加更丰富的交互体验，或者你希望将更多的业务逻辑放到前端来实现，Vue都可以满足你的需求。
Vue优点：
1.2、Vue快速入门
文档：https://cn.vuejs.org/v2/guide/
学习新语言，新技术都都喜欢先来个HelloWorld！我们先来个使用Vue显示HelloWorld！
你可以使用Vue快速，便捷的对我们Html视图填充数据。
开发步骤
下载和引入vue.js文件（见课程资料）。 :::success 附件：vue.js :::
编写入门程序。
我们要编写两部分内容，视图，脚本。
视图：负责页面渲染，主要由HTML+CSS构成。
脚本：负责业务数据模型（Model）以及数据的处理逻辑。
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>快速入门</title>
</head>
<body>
<!--
1). 编写视图
-->
<div id="myDiv">
{{msg}}
</div>
</body>
<!--
编写vue程序
1. 导入vue.js
2. 编写代码
1). 编写视图
2). 编写脚本
-->
<script src="js/vue.js"></script>
<script>
new Vue({
el : "#myDiv",
data : {
msg : "Hello Vue"
}
})
</script>
</html>
1.3、Vue快速入门详解
1）Vue对象
每一个 Vue 程序都是从一个 Vue 核心对象开始的。可以用一个变量去接收Vue对象。
let app = new Vue({
el : "选择器", //常用id选择器
data : { //数据
msg : "hello vue"
},
methods:{ //方法【就是函数】
fun1:function(){
//方法
}
}
})
Vue对象构建时需要传入一个Json对象，Json对象中的el，data，methods官方称为选项，他们各自含义如下： :::info
- el (element)：元素，用来指定Vue作用范围 ，值是选择器(一般写id选择器)
- data：表示数据，用于保存当前Vue对象中的数据，值也是一个Json对象。常用来保存在视图中要用的数据。
- methods：用于定义方法（下个案例会讲到）。
方法可以直接通过对象名调用，或者用this来调用(this代表当前Vue对象)。 :::
2）视图中绑定数据
视图中的{{msg}} , 叫插值表达式。它可以直接引用Vue对象中data里的数据，格式：**{{变量名}}**
<div id="myDiv">
{{msg}}
</div>
1.4、Vue快速入门的升级
这个案例中，你可以学习到Vue中方法该怎么使用，Vue对象中的方法怎么去修改data中的数据。
我们先学习Vue中方法的定义格式，有两种格式，请看下面：
let app = new Vue({
el : "#myDiv", //常用id选择器
data : { //数据
name : "张三",
classRoom : "黑马123"
},
methods:{ //定义方法【就是函数】，注意不要写错单词了 methods 后面有s
//第一种方法定义格式
方法名1:function(参数列表){
xxx
}, //多个方法之间用逗号分开
//第二种方法定义格式
方法名2(参数列表){
xxx
}
}
})
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>快速入门升级</title>
</head>
<body>
<!-- 视图 -->
<div id="app">
<div>姓名：{{name}}</div>
<div>班级：{{classRoom}}</div>
<button onclick="hi()">打招呼</button>
<button onclick="update()">修改班级</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data: {
name: "张三",
classRoom: "111"
},
methods: {
fun1: function () {
//这里改变data中的数据，html视图也会跟着变
//this代表当前view对象
this.name = "李四"
},
fun2() {
//这里改变data中的数据，html视图也会跟着变
this.classRoom = "黑马234"
}
}
})
function hi() {
//调用vue对象的fun1方法，实现修改功能
app.fun1()
}
function update() {
//调用vue对象的fun2方法，实现修改功能
app.fun2()
}
</script>
</html>
1.5、Vue小结
Vue是一套构建用户界面的渐进式前端框架。
Vue的程序包含视图和脚本两个核心部分。
- 脚本部分
Vue核心对象，包含下面成分：
- el：接收获取的元素。
- data：保存数据。
- methods：定义方法。
- 视图部分
- 数据绑定：
{{变量名}}
2、Vue 常用指令
2.1、什么是Vue指令
Vue指令是指Vue提供的带有 v- 前缀的特殊html标签属性，这些指令可以帮我们快速，便捷的完成一些功能。指令很多，我们学习一些常用指令如下：
2.2、文本插值指令(v-text,v-html)
我们学习元素JS的时候，会用如下代码去改变元素中的文本：
let myDiv = document.getElementById('myDiv');
//设置普通文本
myDiv.innerText="Hello"
//设置HTML
myDiv.innerHTML="<h1>Hello</h1>"
要实现相同的功能，我们用Vue指令非常容易实现：
- v-html：把文本解析为 HTML 代码，等效与 innerHTML的作用
- v-text ：把文本解析为普通文本，等效与 innerText的作用 ，也等效于入门案例中 {{属性名}} 语法
指令使用案例（要是Vue对象中msg的值）：
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本插值</title>
</head>
<body>
<!-- HTML视图 -->
<div id="div">
<div>{{msg}}</div>
<div v-text="msg"></div>
<div v-html="msg"></div>
</div>
</body>
<!-- 引入Vue -->
<script src="js/vue.js"></script>
<script>
// Vue对象初始化
new Vue({
el: "#div",
data: {
msg: "<h1> Hello Vue</h1>" //要显示到视图的数据
}
});
</script>
</html>
2.3、绑定属性指令(v-bind)
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绑定属性</title>
<style>
.my {
border: 1px solid red;
font-size: 24px;
color: deeppink;
}
</style>
</head>
<body>
<div id="div">
<!--
插值表达式不能写在属性中!
-->
<a href="{{url}}">百度一下</a>
<br>
<!--
v-bind：为 HTML 标签绑定属性值
-->
<a v-bind:href="url">百度一下</a>
<br>
<!--
v-bind 可以省略不写 !!!
-->
<a :href="url">百度一下</a>
<br>
<!--
也可以绑定其他属性
-->
<div :class="cls">乾坤未定，你我皆是黑马</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#div",
data:{
url:"https://www.baidu.com",
cls:"my"
}
});
</script>
</html>
2.4、条件渲染(v-if …)
- v-if：条件性的渲染某元素，判定为真时渲染（显示元素），否则不渲染（不显示元素）。
- v-else-if：条件性的渲染。
- v-else：条件性的渲染。
- v-show：根据条件展示某元素，区别在于它只是简单地切换元素的 CSS 属性 display。
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>条件渲染</title>
</head>
<body>
<div id="div">
<!-- 判断num的值，对3取余
余数为0显示div1
余数为1显示div2
余数为2显示div3
v-if : 条件渲染指令 (满足条件的标签才会被浏览器渲染出来)
v-show : 要么显示,要么不显示
-->
<div v-if="num%3==0">div1</div>
<div v-else-if="num%3==1">div2</div>
<div v-else>div3</div>
<div v-show="flag">div4</div>
<!--
v-if v-show 他们俩虽然都是控制元素是否显示，但是底层的原理不一样
v-if 如果条件为false，页面中根本没有这个元素
v-show如果条件为false，页面中有这个元素只不过它的display属性值为none
-->
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#div",
data:{
num:2,
flag:false
}
});
</script>
</html>
2.5、列表渲染（v-for）
v-for：列表渲染，遍历容器的元素或者对象的属性。支持Array | Object | number | string
用法：基于源数据多次渲染元素或模板块。
此指令之值，必须使用特定语法 alias in expression ，为当前遍历的元素提供别名：
<div v-for="item in items">
{{ item.text }}
</div>
另外也可以为数组索引指定别名 (或者用于对象的键)：
<div v-for="(item, index) in items"> </div>
<div v-for="(val, key) in object"> </div>
<div v-for="(val, key, index) in object"> </div>
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表渲染</title>
</head>
<body>
<div id="div">
<ul>
遍历Vue数据中的names数组，取出元素生成列表项:
<li v-for="name of names">
{{name}}
</li>
<hr>
遍历Vue数据中的names数组，取出元素和对应索引:
<li v-for="(name,index) of names">
{{name}}, {{index}}
</li>
<hr>
遍历Vue数据中的student对象，取出对象中的属性值:
<li v-for="proValue of student">
{{proValue}}
</li>
<hr>
遍历Vue数据中的student对象，取出对象中的属性值:
<li v-for="(proValue,proName) of student">
{{proName}}, {{proValue}}
</li>
<hr>
</ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#div",
data: {
names: ["张三", "李四", "王五"],
student: {
name: "张三",
age: 23
}
}
});
</script>
</html>
2.6、事件绑定(v-on)
v-on：为 HTML 标签绑定事件。
1). 完整语法 -> v-on:事件名 = “methods中的函数” 2). 简略语法 -> @事件名 = “methods中的函数” 注意：事件名onxxxx，我们写的时候要把on去掉 比如绑定 onclick 点击事件 v-on:click =”方法()”
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件绑定</title>
</head>
<body>
<div id="div">
<div>{{name}}</div>
<!--
v-on：为 HTML 标签绑定事件
-->
<button v-on:click="change()">单击 onclick _改变div的内容</button>
<button @click="change()">简写 onclick _改变div的内容</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#div",
data: {
name: "黑马程序员"
},
methods: {
change() {
this.name = "传智播客"
}
}
});
</script>
</html>
附:常见事件名称（不要忘记把on去掉）
1. 点击事件：
1. onclick：单击事件
2. ondblclick：双击事件 (double: 时间间隔很短两次单击)
💥双击事件名字不要写错了,不要少了l
2. 焦点事件
1. onblur：失去焦点
2. onfocus:元素获得焦点。
3. 鼠标事件：
1. onmousedown 鼠标按钮被按下。
2. onmouseup 鼠标按键被松开。
3. onmousemove 鼠标被移动。
4. onmouseover 鼠标移到某元素之上。
5. onmouseout 鼠标从某元素移开。
4. 键盘事件：
1. onkeydown 某个键盘按键被按下。
2. onkeyup 某个键盘按键被松开。
3. onkeypress 某个键盘按键被按下并松开。
5. 改变事件
1. onchange 域的内容被改变。
6. 表单事件：
1. onsubmit 提交按钮被点击。
2.7、表单输入绑定(v-model)
v-model：在表单元素上创建双向数据绑定。（官方文档）
双向数据绑定
更新data数据，页面中的数据也会更新。更新页面数据，data数据也会更新。
MVVM模型(Model,View,ViewModel)：是MVC模式的改进版
在前端页面中，JS对象表示Model，页面表示View，两者做到了最大限度的分离。
将Model和View关联起来的就是ViewModel，它是桥梁。
ViewModel负责把Model的数据同步到View显示出来，还负责把View修改的数据同步回Model。
示例代码
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单绑定</title>
</head>
<body>
<div id="div">
<form autocomplete="off">
<!--
v-bind绑定value属性值，实现单向绑定
-->
姓名_单向绑定：<input v-bind:value="username" type="text" name="username"> {{username}}
<br>
<!--
v-model 双向绑定
-->
姓名_双向绑定：<input v-model="username" type="text" name="username">{{username}}
<br>
年龄：<input v-model="age" type="number" name="age">{{age}}
<br>
性别:<input v-model="gender" type="text" name="gender">{{gender}}
</form>
<hr>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#div",
data: {
username: "张三",
age: 23,
gender: "男"
}
});
</script>
</html>
Vue的浏览器插件
可以为浏览器安装Vue开发插件，进行测试双向绑定。edge，Chrome，Firefox 等浏览器都有对应版本的该插件。
chrome浏览器vue开发插件.zip，其他的可以直接下载插件。
2.8、小结
- 指令：是带有v-前缀的特殊属性，不同指令具有不同含义。
- 文本插值
v-html：把文本解析为HTML代码。
v-text：把文本解析为普通文本。
绑定属性
v-bind：为HTML标签绑定属性值。 :::warning 完整 v-bind:属性名=”data变量”
省略 :属性名=”data变量” :::条件渲染
v-if：条件性的渲染某元素，判定为真时渲染,否则不渲染。
v-else：条件性的渲染。
v-else-if：条件性的渲染。
v-show：根据条件展示某元素，区别在于切换的是display属性的值。- 列表渲染
v-for：列表渲染，遍历容器的元素或者对象的属性。 事件绑定
v-on：为HTML标签绑定事件。 :::warning 完整 v-on:事件名=”methods中的函数名”
省略 @事件名=”methods中的函数名”
注意，事件名前面的on要去掉 :::表单绑定
v-model：在表单元素上创建双向数据绑定。
3、Vue的生命周期（了解）
3.1 生命周期
3.2 生命周期的八个阶段
Vue的生命周期中各个钩子函数是不需要我们定义的，客观存在的。如果有需要，我们可以在适当的时候做适当的事情，比如当页面启动的时候去异步请求后台的数据，我们就可以在钩子函数created、beforeMount、mounted中进行调用，因为在这三个钩子函数中，data已经创建，可以将服务端端返回的数据进行赋值。
推荐在created钩子函数中调用异步请求，因为在created钩子函数中调用异步请求有以下优点：
能更快获取到服务端数据，减少页面loading时间；
以下是京东首页，刚开启的样子，我们发现有些图片就还没加载出来。像图片数据比文字数据就大得多，为了尽可能减少图片的加载时间，我们可以在Vue的created钩子函数中先进行数据的异步请求。
3.3 运用举例
模拟在created钩子函数发起后台数据的请求。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>生命周期</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
<hr>
<ol>
<li v-for="user in list">
{{user.name}}
</li>
</ol>
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
message: "好友列表",
list: [] //用户信息的集合
},
methods: {
queryUsers() {
//模拟向后台发起查询
console.log("呵呵~~~~~")
this.list = this.list = [{ "name": "艺艺" }, { "name": "轩轩" }, { "name": "昌昌" }]
},
//vue实例创建完成后要来执行的一个生命周期的方法
created() {
//一般我们在这个方法中去对数据进行初始化，
//比如调用queryUsers方法从后台查询初始数据对list变量赋值
this.queryUsers();
}
});
</script>
</html>
4. Vue异步操作
4.1 axios介绍
- 在Vue中发送异步请求，本质上还是AJAX。我们可以使用axios库来简化操作！
- 使用步骤
1.引入axios核心js文件。
2.调用axios对象的方法来发起异步请求。
3.调用axios对象的方法来处理响应的数据。
4.2 注册案例
将前一天学习axios时的注册案例改造为Vue+Axios的实现
需求：
我们来模拟实现在注册过程中，用户名异步检查是否存在的功能。
backend.zip 该附件下载后需要解压取出里面的backend.jar 文件 先执行backend.jar 准备后台测试环境（参考Ajax课程2.2章节中环境搭建步骤），已知在后台已经存在一个用户名 岩岩。实现，若输入岩岩用户名提示用户名已存在。其他就提示恭喜!用户名可用
检查用户名地址需要用post进行请求：
- 地 址：http://localhost:8080/registerServlet
- 参数名：username
注意，给后台参数要使用键值对，例如检查Jack用户名。参数应该是：username=Jack
代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Vue+axios 注册案例</title>
</head>
<body>
<!-- TODO:设定一个id，给Vue用 -->
<div id="app" style="width: 250px; margin: auto;padding: 50px;border: 2px deeppink dashed">
<form action="#" autocomplete="off">
新用户注册<br>
<!-- TODO:v-model 双向绑定username数据，监听失去焦点方法 onblur -->
<input v-model="username" @blur="usernameBlur()" type="text" name="username" placeholder="请输入用户名"
id="username" size="20"><br>
<!-- TODO:v-html 显示提示信息 ,v-show 判断是否显示-->
<span v-html="nameSpan" v-show="isShow"></span> <br>
注册密码：<br>
<!-- TODO: v-model双向绑定password -->
<input v-model="password" type="password" name="password" placeholder="请输入密码"> <br><br>
<button>提交</button>
</form>
</div>
</body>
<!-- TODO:导入axios,vue类库 -->
<script type="text/javascript" src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
<script>
/*
说明：
1.后台地址url："http://localhost:8080/registerServlet"
2.后台需要根据key即参数名是username来获取前端提交的用户名数据
3.后台已经存在的用户名是："岩岩"
*/
let app = new Vue({
el: "#app",
data: {
username: "", //用户名
nameSpan: "", //用户名可用状态
isShow: false, //是否要显示
password: "" //密码
},
methods: {
usernameBlur() {
//该方法是当用户名失去焦点时绑定的方法
//TODO:完成业务
//1. 失去焦点，意味着开始编辑了。显示状态
this.isShow = true
//2. 判断用户名是否存在，如果不存在要提示 用户名不能为空 ，span显示 <font color='red'>用户名不能为空</font>
let username = this.username;
if (username == '') {
this.nameSpan = "<font color='red'>用户名不能为空</font>"
return
}
//3.axios提交数据到后台查询是否存在
let url = "http://localhost:8080/registerServlet"
let param = "username=" + username
axios.post(url, param)
.then(resp => {
// 4.在axios的回调函数中处理后台响应的数据
let result = resp.data;
//5.根据响应的结果进行判断
if (result == false) {
//6.用户名存在，不能注册，提示用户名已经存在
this.nameSpan = "<font color='red'>用户名存在，重新输入</font>"
} else {
//7.用户名不存在，可以注册，提示可以注册
this.nameSpan = "<font color='green'>恭喜！用户名可用</font>"
}
});
}
}
})
</script>
</html>
4.3 好友列表
将之前Ajax课程的好友列表案例使用Vue改造下。
运行后台backend.jar（参考2.2章节中：环境搭建）
:::success
需求：向后台发送请求，获取好友列表并显示到页面中，如下
:::
分析：
1）一直后台提供功能接口地址
http://localhost:8080/axiosJsonDemo01Servlet
返回json数据如下：
{
"flag": true,
"message": "查询好友列表成功",
"valueData": [
{
"age": 18,
"id": "001",
"name": "张三"
},
{
"age": 19,
"id": "002",
"name": "李四"
},
{
"age": 20,
"id": "003",
"name": "王五"
}
]
}
2) 将json数据解析出来，填充到HTML表格中
代码示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--获取好友列表-->
<h1>获取好友列表Vue实现</h1>
<!-- TODO:方法绑定 -->
<input type="button" value="响应数据是json字符串" @click="getFriends()"> <br>
<hr>
<h3>好友列表</h3>
<!--TODO:存放查询好友的结果信息-->
<div id="messageDiv" style="color:green">{{message}}</div>
<table width="500px" cellspacing="0px" cellpadding="5px" border="1px" id="myTable">
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
</tr>
<!-- TODO:v-for 渲染数组数据 -->
<tr v-for="friend in valueData">
<td>{{friend.id}}</td>
<td>{{friend.name}}</td>
<td>{{friend.age}}</td>
</tr>
</table>
</div>
</body>
<!--导入axios库-->
<script type="text/javascript" src="js/axios-0.18.0.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
需求：向后台发送请求，获取好友列表并显示到页面中
说明：后台的url地址： "http://localhost:8080/axiosJsonDemo01Servlet"
*/
var app = new Vue({
el: "#app",
data: {
valueData: [],
flag: false,
message: ""
},
methods: {
getFriends() {
//TODO:向后台发送请求
axios.post("http://localhost:8080/axiosJsonDemo01Servlet")
.then(resp => {
//1.接收后端响应的Result对象
this.valueData = resp.data.valueData
this.flag = resp.flag
this.message = resp.data.message
console.log(this.data);
})
}
}
})
</script>
</html>
二 ES6 新特性（2）
2.1 对象初始化简写
ES5我们对于对象都是以键值对的形式书写，如果值是引用的一个变量，这个变量名有可能和键名相同。例如
function people (username,age){
return {
username:username,
age:age
}
}
//打印
console.log(people('Rose',18));
ES6中以上代码可以简写为
//es6
function people2 (username,age){
return {
//如果key的名字和变量参数名一致，则可以简化写
username,
age
}
}
//打印
console.log(people2('Jack',88));
2.2解构
数组和对象是JS中最常用也是最重要表示形式。为了简化提取信息，ES6新增了解构，这是将一个数据结构分解为更小的部分的过程。
ES5我们提取对象或者数组中的信息形式如下
//获取对象中属性信息
let people = {
name: 'Rose',
age: 18
}
let name = people.name
let age = people.age
console.log(name + ' --- ' + age) // Rose --- 18
//获取数组中的元素
const color = ['red', 'blue']
var first=color[0];
console.log(first) //red
<br />在ES6之前我们一个一个获取对象信息的，一个一个获取。现在，ES6的解构能让我们从对象或者数组里取出数据存为变量，例如
//从json对象中取值
const people={
username:'Rose',
age:18
}
const {username,age} = people;
console.log(username + "," + age) //Rose,18
//数组中获取值
const color = ['red', 'blue']
const [first,second] = color
console.log(first)
console.log(second)
2.3 延展操作符
ES6中另外一个好玩的特性就是延展操作符: Spread Operator,
接下来就展示一下它的用途。 语法上的主要体现是三个点组,可以用来扩展对象或者数组
//目标：扩展对象的值
//原来的对象
const peopleOld={username:'Rose',age:18}
//需要重新生成一个对象，并基于之前的对象扩展
const peopleNew= {...peopleOld,address:'上海'}
console.log(peopleOld)
console.log(peopleNew)
//原来的数组
const colorOld=['red', 'yellow']
//需要重新生成一个数组，并基于之前的数组扩展
const colorNew=[...colorOld,'blue']
console.log(colorOld)
console.log(colorNew)
2.4 import 和 export【重点】
import ：导入
export：导出
到目前为止，我们通常只使用一个源文件来存储JavaScript代码。学习中，或者对于小应用程序来说也是通用的方法，但是，这种方法对于一些较大的项目就有一定的局限性了，其中庞大的代码会让代码难以调试和维护。在这种情况下，如果能够以某种逻辑方法将代码划分到几个源文件中，形成一个个的模块，情况将会更好一些。
在JavaScript 开发中我们可以用模块的方式开发功能，每个模块都存储在其自己的JavaScript文件中，一个文件一个模块。在一个模块之中声明的、所有内容，对模块外部来说都是不可访问的，除非专门将它们导出到模块，并且导入到其他的脚本之中。
js模块之间的导入导出如下:
import导入模块、export导出模块 ，后续的学习中要能看懂语法。
// 方式1
let add=function(){
console.log('add...');
}
let remove=function(){
console.log('remove...');
}
export {add,remove}
// 方式2： 还可以写成
// export default {
// add(){
// console.log('add...');
// },
// remove(){
// console.log('remove...');
// }
// }
// 方式1
import {add,remove} from './lib.js';
add();
remove();
//方式2： 还可以写成
// import jsApi from './lib.js' // 使用这种方式 ，必须要使用export default {} 导出
// jsApi.add()
// jsApi.remove()
要将模块包含到Web页面中，要注意，
若有收获，就点个赞吧
0 人点赞
