@[toc]
一、JS同步与异步调用
同步调用是指代码按照其编写的顺序执行，每个函数都必须等待前一个函数完成后才能执行。这种调用方式会阻塞代码的执行，直到当前函数执行完成才能执行下一个函数。
正常的直接代码写下来调用就是同步调用。
异步调用是指代码不按照其编写的顺序执行，而是在某些操作完成后再执行。例如，当我们使用 Ajax 请求数据时，我们可以在请求发送后继续执行代码，而不必等待请求完成。 异步调用不会阻塞代码的执行，可以在后台执行其他操作。
1、异步调用函数：使用回调函数实现异步调用
function asyncFunction(callback) {
console.log("Start");
setTimeout(function() {
console.log("End");
callback();
}, 2000);
}
console.log("Before function call");
asyncFunction(function() {
console.log("Callback");
});
console.log("After function call");
在这个例子中，我们定义了一个 asyncFunction 函数，它使用 setTimeout 函数模拟了一个异步操作，并在操作完成后调用了回调函数。在主程序中，我们先输出 "Before function call"，然后调用 asyncFunction 函数，并传入一个回调函数。由于 asyncFunction 是异步调用，因此代码不会等待操作完成，而是直接执行后面的代码。因此，输出的顺序为 "Before function call"、"Start"、"After function call"、2 秒后输出 "End"、"Callback"。
2、使用 Promise 实现异步调用：
function asyncFunction() {
console.log("Start");
return new Promise(function(resolve, reject) {
setTimeout(function() {
console.log("End");
resolve();
}, 2000);
});
}
console.log("Before function call");
asyncFunction().then(function() {
console.log("Promise resolved");
});
console.log("After function call");
在这个例子中，我们定义了一个 asyncFunction 函数，它返回一个 Promise 对象，并在异步操作完成后调用 resolve 函数。在主程序中，我们先输出 "Before function call"，然后调用 asyncFunction 函数，并使用 then 方法注册一个回调函数。由于 asyncFunction 是异步调用，因此代码不会等待操作完成，而是直接执行后面的代码。因此，输出的顺序为 "Before function call"、"Start"、"After function call"、2 秒后输出 "End"、"Promise resolved"。
3、使用 async/await 实现异步调用：
async function asyncFunction() {
console.log("Start");
await new Promise(function(resolve, reject) {
setTimeout(function() {
console.log("End");
resolve();
}, 2000);
});
}
console.log("Before function call");
asyncFunction().then(function() {
console.log("Promise resolved");
});
console.log("After function call");
在这个例子中，我们定义了一个 asyncFunction 函数，它使用 await 关键字等待异步操作完成，并在操作完成后继续执行。在主程序中，我们先输出 "Before function call"，然后调用 asyncFunction 函数，并使用 then 方法注册一个回调函数。由于 asyncFunction 是异步调用，因此代码不会等待操作完成，而是直接执行后面的代码。因此，输出的顺序为 "Before function call"、"Start"、"After function call"、2 秒后输出 "End"、"Promise resolved"。
二、Vue2基础知识
能使用vue Temple 调用data 的数据和methods 函数，通过v-for 遍历list 等构建web 页面。
能对axios 库进行二次封装，并对api 进行统一管理，能使用低代码平台strapi 等搭建简易cms。
能使用nuxt.js 开发基于SSR 渲染的网站，并使用commitlint 规范, husky 钩子等进行前端工程化管理
Vue2主要由以下几个部分构成：
这些是Vue2的主要构成部分：指令 & 实例、组件 & 模板、数据绑定和生命周期钩子。它们共同组成了Vue应用程序的基本结构，并提供了丰富的功能和开发方式。
指令（Directives）：Vue的指令是特殊的HTML属性，用于给元素添加特定的行为和功能。指令以 v- 前缀表示，并通过Vue实例中的数据进行动态绑定。例如，v-bind、v-on、v-if、v-for 等。
实例（Instance）：Vue应用程序的核心是Vue实例。使用 new Vue() 创建一个Vue实例，它是Vue应用程序的根实例，用于管理应用程序的数据、方法和生命周期钩子等。Vue实例允许你在模板中使用数据绑定、指令和事件处理等特性。
组件（Components）：Vue2支持组件化开发，允许将应用程序拆分为多个可重用的组件。组件是Vue实例的扩展，具有自己的模板、数据、方法和生命周期钩子。组件可以嵌套、复用，并通过通信机制实现组件之间的交互。
模板（Templates）：Vue使用基于HTML的模板语法，将Vue实例的数据和方法绑定到DOM上。模板可以包含插值表达式、指令、事件处理等，用于动态生成和更新DOM元素。
数据绑定（Data Binding）：Vue2提供了双向数据绑定的能力，可以将数据与模板进行动态绑定，当数据变化时，模板会自动更新，反之亦然。这样可以实现数据的响应式更新，简化了开发过程。
生命周期钩子（Lifecycle Hooks）：Vue实例有一系列的生命周期钩子函数，可以在不同的阶段插入代码逻辑。例如，created、mounted、updated 和 destroyed 等，可以在这些钩子函数中执行相应的操作。
1、基本概念 & dom中常用的v指令
安装Vue.js：你可以通过在HTML文件中引入Vue.js的CDN链接来使用Vue.js。在
标签中添加以下代码：<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
创建Vue实例：在JavaScript文件中创建一个Vue实例来管理你的应用程序。
var app = new Vue({
el: '#app', // 绑定Vue实例到HTML元素
data: {
message: 'Hello Vue!' // 数据属性
},
methods: {
changeMessage: function () {
this.message = 'New message'; // 方法
}
}
});
模板语法：Vue使用一种简单的模板语法，让你可以将数据绑定到HTML中。在HTML文件中，你可以使用双花括号插值表达式来显示Vue实例中的数据。
事件处理：你可以使用v-on指令来监听DOM事件，并在触发时调用Vue实例中的方法。
<div id="app">
<p>{
{
message }}</p>
<button v-on:click="changeMessage">Change Message</button>
</div>
v-on（缩写为@）：用于监听DOM事件并触发相应的方法。可以监听任何DOM事件，如click、input、keydown等。例如：
<button v-on:click="handleClick">Click me</button>
条件渲染：你可以使用v-if指令根据条件来渲染或销毁HTML元素。
<div id="app">
<p v-if="isVisible">Visible</p>
<p v-else>Hidden</p>
</div>
列表渲染：你可以使用v-for指令根据数组或对象的数据来渲染列表。
<div id="app">
<ul>
<li v-for="item in items">{
{
item }}</li>
</ul>
</div>
v-show：根据条件判断是否显示元素（通过CSS的display属性）。例如：
<div v-show="isVisible">Visible</div>
v-bind（缩写为:）：绑定HTML属性或Vue实例的数据。例如：
v-bind（缩写为:）：用于动态地绑定HTML元素的属性。可以绑定任何HTML属性，例如class、style、href等。例如：
<img v-bind:src="imageSrc">
<div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
v-model：在表单元素和Vue实例的数据之间创建双向绑定。例如：
<input v-model="message">
v-text：更新元素的文本内容。与双花括号插值表达式({ { }})类似，但是只会更新文本内容，不会解析HTML。例如：
<p v-text="message"></p>
v-html：更新元素的HTML内容。会将Vue实例中的数据解析为HTML，并更新到元素中。注意要谨慎使用，以避免XSS攻击。例如：
<p v-html="rawHtml"></p>
v-pre：跳过Vue实例中的元素或组件的编译过程，直接将其原始内容渲染到页面上。主要用于显示静态的、不需要动态绑定的内容。例如：
<pre v-pre>{
{
rawText }}</pre>
2、vue2的实例 & 数据绑定（先#el，再v-bind）
Vue2的实例是Vue应用程序的核心。你可以使用new Vue()来创建一个Vue实例，它允许你管理应用程序的数据、方法和生命周期钩子等。
在创建Vue实例时，你需要传入一个选项对象，这个对象包含了Vue实例的配置项。下面是一个基本的Vue实例的创建示例：
var app = new Vue({
el: '#app', // 将Vue实例挂载到指定的HTML元素上
data: {
message: 'Hello Vue!' // 数据属性
},
methods: {
changeMessage: function () {
this.message = 'New message'; // 方法
}
},
created: function () {
console.log('Vue实例已创建');
}
});
在上述示例中，创建了一个Vue实例，并将其挂载到id为app的HTML元素上。实例的配置选项包括：
- el：指定Vue实例要挂载的HTML元素的选择器或DOM元素。
- data：定义Vue实例的数据属性，这些属性可以在模板中进行数据绑定。
- methods：定义Vue实例的方法，可以在模板或其他方法中调用。
- created：钩子函数，在Vue实例创建后立即调用，可以执行一些初始化操作。
通过访问Vue实例，你可以获取和修改数据属性，调用方法，并根据需要监听生命周期钩子函数。例如，在模板中使用双花括号插值表达式可以获取数据属性的值：
<div id="app">
<p>{
{
message }}</p>
<button v-on:click="changeMessage">Change Message</button>
</div>
上述示例中，message属性的值会在Vue实例中进行动态绑定，并在模板中显示出来。点击按钮会调用changeMessage方法，修改message属性的值。
Vue实例提供了丰富的功能和选项，用于构建交互式的Web应用程序。你可以在实例中定义数据、方法、计算属性、监听器等，还可以使用指令、组件和路由等扩展Vue的功能。
————————————————————————————————————
Vue2提供了灵活而强大的数据绑定机制，使你可以将数据与模板进行动态绑定，实现数据的自动更新。Vue2的数据绑定主要包括以下几个方面：
1、插值表达式（Interpolation）：
Vue2使用双花括号{
{ }}来创建插值表达式，将Vue实例中的数据绑定到模板中。例如：
<p>{
{
message }}</p>
上述示例中，message是Vue实例中的一个数据属性，它的值会动态地插入到<p>标签内部。
2、指令（Directives）：指令是Vue中特殊的HTML属性，以v-开头。通过指令，你可以将元素的属性、事件和内容与Vue实例中的数据进行绑定。常用的指令有v-bind和v-on。例如：
<img v-bind:src="imageUrl">
<button v-on:click="handleClick">Click me</button>
上述示例中，v-bind指令将src属性与imageUrl数据进行绑定，实现动态的图片路径。v-on指令监听按钮的点击事件，并调用handleClick方法。
3、双向数据绑定（Two-way Data Binding）：
Vue2提供了v-model指令，用于实现表单元素的双向数据绑定。它可以将表单元素的值与Vue实例中的数据属性相互绑定，当表单元素的值改变时，数据属性也会自动更新。例如：
<input v-model="message">
上述示例中，message是Vue实例中的一个数据属性，输入框的值与message进行双向绑定，任一方的改变都会同步更新另一方。
4、计算属性（Computed Properties）：
Vue2允许你定义计算属性，它们可以根据其他数据属性的值进行计算，并返回一个新的值。计算属性可以在模板中进行数据绑定，当依赖的数据发生变化时，计算属性会自动重新计算。例如：
var app = new Vue({
data: {
firstName: 'John',
lastName: 'Doe'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName;
}
}
});
上述示例中，fullName是一个计算属性，根据firstName和lastName的值计算出完整的姓名，并可以在模板中进行数据绑定。
通过这些数据绑定的机制，Vue2实现了数据的响应式更新，当数据发生变化时，相关的模板会自动更新，从而实现了数据和视图的同步。这大大简化了开发过程，提高了应用程序的可维护性和用户体验。
——————————————————————
你需要先使用el选项将Vue实例挂载到HTML元素上，然后才能在对应的子元素中使用v-bind进行数据绑定。
当Vue实例挂载到HTML元素后，Vue会将该HTML元素及其子元素作为Vue应用的管理范围。这意味着Vue实例可以访问和控制挂载元素及其子元素的数据、方法和指令。
因此，在挂载Vue实例之后，你可以在挂载元素的子元素上使用v-bind指令，将Vue实例中的数据绑定到子元素的属性上。这样，子元素的属性值将会随着Vue实例中的数据变化而更新。
以下是一个示例，展示了先使用el挂载Vue实例，然后在子元素中使用v-bind进行数据绑定的过程：
<div id="app">
<p v-bind:title="message">Hover over me</p>
</div>
var app = new Vue({
el: '#app',
data: {
message: 'This is a tooltip'
}
});
在上述示例中，先通过el选项将Vue实例挂载到id为app的HTML元素上。然后，在该元素的子元素
上使用v-bind指令，将message数据属性绑定到title属性上。当message的值发生变化时，子元素的title属性也会相应地更新。
因此，确保先使用el挂载Vue实例，然后再在对应的子元素中使用v-bind进行数据绑定，以确保Vue实例能够正确管理和更新绑定的数据。
3、Vue2的组件 & 模板 （template， script， export default）
组件（Components）：组件是Vue2中的核心概念，它将一个应用程序划分为多个独立且可复用的模块。每个组件都包含了自己的模板、数据、方法和样式，可以通过组合和嵌套来构建复杂的应用程序。组件使代码更易于维护、测试和重用，并提供了更好的组织结构。在Vue2中，你可以使用Vue.component方法或单文件组件（.vue文件）来定义组件。
模板（Templates）：模板是Vue2中用于描述组件的HTML代码。模板定义了组件的结构和布局，并使用Vue提供的指令和语法来实现动态数据绑定和逻辑控制。在模板中，你可以通过插值、指令、事件绑定等方式将数据和方法与HTML元素进行绑定。Vue的模板语法非常直观和灵活，使得你可以轻松地创建动态的、响应式的用户界面。
单文件组件（Single File Components）：单文件组件是Vue2中一种组织和编写组件的方式。它将组件的模板、逻辑和样式封装在一个单独的文件中，通常使用.vue作为文件扩展名。单文件组件提供了更好的代码组织和可维护性，使得开发者可以更清晰地定义和管理组件。单文件组件可以使用预处理器（如Babel、TypeScript、Sass等）来增强开发体验和功能。
在Vue2中，你可以使用全局注册和局部注册两种方式定义和注册组件。
全局注册组件：
全局注册允许你在应用的任何地方都可以使用该组件，它适用于在整个应用程序中广泛使用的组件。
Vue.component('component-name', {
// 组件的选项
});
其中，component-name是组件的名称，可以自定义。组件选项是一个包含模板、数据、方法等的对象，用于定义组件的行为和外观。
在模板中使用全局注册的组件，示例：
<div id="app">
<component-name></component-name>
</div>
局部注册组件：
局部注册允许你在特定的Vue实例或组件内部使用该组件，它适用于仅在特定范围内需要的组件。
在Vue实例或组件的选项中，使用components属性局部注册组件，语法如下：
new Vue({
components: {
'component-name': {
// 组件的选项
}
},
// 其他选项
});
其中，component-name是组件的名称，可以自定义。组件选项是一个包含模板、数据、方法等的对象，用于定义组件的行为和外观。
在模板中使用局部注册的组件，示例：
<div id="app">
<component-name></component-name>
</div>
无论是全局注册还是局部注册，一旦组件被注册，就可以在对应的模板中使用该组件，并根据组件选项定义的行为和外观进行渲染和交互。
以下是一个示例，展示了全局注册和局部注册组件的用法：
<div id="app">
<global-component></global-component>
<local-component></local-component>
</div>
// 全局注册组件
Vue.component('global-component', {
template: '<div>This is a global component</div>'
});
// 局部注册组件
var LocalComponent = {
template: '<div>This is a local component</div>'
};
new Vue({
el: '#app',
components: {
'local-component': LocalComponent
}
});
当涉及Vue2组件和模板的代码示例时，以下是一个简单的示例：
<!-- index.html -->
<div id="app">
<my-component></my-component>
</div>
// main.js
Vue.component('my-component', {
template: `
<div>
<h2>{
{ message }}</h2>
<button @click="updateMessage">Update Message</button>
</div>
`,
data() {
return {
message: 'Hello, Vue!'
};
},
methods: {
updateMessage() {
this.message = 'Updated message!';
}
}
});
new Vue({
el: '#app'
});
在上面的示例中，我们在index.html中定义了一个Vue实例，并在该实例中使用了<my-component>``</my-component>标签。这个标签代表了我们自定义的组件my-component。
在main.js中，我们使用Vue.component方法全局注册了my-component组件。组件的选项包含了一个模板，其中包含了一个<h2>标签和一个按钮。模板中使用了插值表达式{
{ message }}来展示组件里的数据，并使用@click指令绑定了按钮的点击事件。
组件的选项中还包含了一个data方法，返回一个包含了message属性的对象。message属性的初始值为'Hello, Vue!'。
组件的选项中还定义了一个methods对象，其中包含了一个updateMessage方法。这个方法在按钮点击时被调用，更新了message属性的值。
当应用程序运行时，<my-component>标签会被渲染为组件的模板，显示出Hello, Vue!的标题和一个按钮。当按钮被点击时，message属性的值会更新为'Updated message!'，从而导致模板中的数据和视图的更新。
这个示例展示了Vue2中组件和模板的基本用法，包括组件的定义、模板的使用、数据绑定和方法的触发。通过这种方式，你可以创建可复用的组件，并在模板中实现动态的数据渲染和交互行为。
在Vue2中，<template>标签是用于包裹Vue组件模板的特殊标签。它在Vue组件的定义中起到了一个容器的作用，用于封装组件的结构和布局，并且不会在最终渲染的HTML中被呈现。
使用<template>标签的主要目的是为了提供一个可以包含多个元素的块级容器，而无需引入额外的父级元素。在模板中，可以包含任意数量的HTML元素、指令、插值表达式和其他Vue模板语法。
以下是一个示例，演示了如何使用<template>标签来组织Vue组件的模板：
<template>
<div>
<h2>{
{
title }}</h2>
<p>{
{
message }}</p>
<button @click="handleClick">Click me</button>
</div>
</template>
<script>
export default {
data() {
return {
title: 'Hello, Vue!',
message: 'Welcome to my Vue component.'
};
},
methods: {
handleClick() {
alert('Button clicked!');
}
}
};
</script>
<style scoped>
h2 {
color: blue;
}
button {
background-color: green;
color: white;
}
</style>
在上述示例中，<template>标签包含了组件的整个模板内容，包括标题、消息和一个按钮。模板中使用了插值表达式{
{ title }}和{
{ message }}来动态显示数据，并使用@click指令绑定了按钮的点击事件。
注意到<template>标签本身不会在最终渲染的HTML中呈现，它只是用于组织和包装模板内容。这样，我们可以在不引入额外的无意义父级元素的情况下定义组件的结构。
此外，<template>标签还支持<slot>标签的使用，用于插入父组件传递的内容。这样可以更灵活地定义组件的布局和结构。
最后，需要注意的是，<template>标签支持scoped属性，可以将样式限定在当前组件内部。这意味着在<style scoped>标签中定义的样式只会应用于当前组件的模板，在其他地方的相同选择器不会被影响。
<script>标签和export default {}不是Vue实例本身，而是用于定义Vue组件的选项和导出组件的方式。
在Vue组件的定义中，<script>标签用于编写组件的逻辑部分，包括数据、方法、生命周期钩子等。<script>标签内部的内容会被Vue解析和执行，从而创建一个Vue组件实例。
export default {}语法是用于导出Vue组件的方式。在Vue组件的定义中，通过export default语法将组件的选项对象导出，使其可以在其他地方被引入和使用。这样，我们可以在其他Vue文件或入口文件中引入组件，并在Vue应用程序中注册和使用该组件。
以下是一个示例，演示了如何使用
