说在前面
最近在学习Vue.js，使用VSCode搭建，在这里记录。
目录
2.3 创建vue项目，Visual Studio Code编辑器，安装vue-devtools
15.3.2 跨域请求数据， 跨域请求配置-vue端，跨域请求配置-servlet端
第1章 快速进入Vue.js的世界
1.1 前端开发技术的发展
什么是前端
前端：针对浏览器的开发，代码在浏览器运行
后端：针对服务器的开发，代码在服务器运行
现在的前端：web，移动端（Hybrid App），游戏，桌面端(electron.js, NW.js)，小程序等。
前后端不分的时代
互联网发展的早期，前后端开发是一体的，前端代码是后端代码的一部分。
后端收到浏览器的请求
生成静态页面
发送到浏览器
后端 MVC 的开发模式
那时的网站开发，采用的是后端 MVC 模式。
Model（模型层）：提供/保存数据
Controller（控制层）：数据处理，实现业务逻辑
View（视图层）：展示数据，提供用户界面
前端只是后端 MVC 的 V。
前端工程师的角色
那时的前端工程师，实际上是模板工程师，负责编写页面模板。
后端代码读取模板，替换变量，渲染出页面。
Ajax
Ajax 技术诞生，改变了一切。
2004年：Gmail
2005年：Google 地图
前端不再是后端的模板，可以独立得到各种数据
Web 2.0
Ajax 技术促成了 Web 2.0 的诞生。
Web 1.0：静态网页，纯内容展示
Web 2.0：动态网页，富交互，前端数据处理
从那时起，前端变得复杂了，对前端工程师的要求越来越高。
前端 MVC 框架
前端通过 Ajax 得到数据，因此也有了处理数据的需求。
前端代码变得也需要保存数据、处理数据、生成视图，这导致了前端 MVC 框架的诞生。
2010年，Backbone.js
前端 Controller
Backbone 只有 M 和 V，没有 C。因为，前端 Controller 与后端不同。
不需要，也不应该处理业务逻辑
只需要处理 UI 逻辑，响应用户的一举一动
所以，前端 Controller 相对比较简单。Backbone 没有 C，只用事件来处理 UI 逻辑。MVVM 模式
MVVM 模式，用 View Model 代替 Controller。
Model
View
View-Model：简化的 Controller，唯一作用就是为 View 提供处理好的数据，不含其他逻辑。
本质：view 绑定 view-model，视图与数据模型强耦合。数据的变化实时反映在 view 上，不需要手动处理。
SPA
前端可以做到：
读写数据
切换视图
用户交互
这意味着，网页其实是一个应用程序。
SPA = Single-page application
2010年后，前端工程师从开发页面，变成了开发”前端应用“（跑在浏览器里面的应用程序）。
Angular
Google 公司推出的 Angular 是最流行的 MVVM 前端框架。
它的风格属于 HTML 语言的增强，核心概念是双向绑定。
Vue
Vue.js 是现在很热门的一种前端 MVVM 框架。
它的基本思想与 Angular 类似，但是用法更简单，而且引入了响应式编程的概念。
前端开发模式的根本改变
Node 环境下开发
大量使用服务器端工具
引入持续集成等软件工程的标准流程
开发完成后，编译成浏览器可以运行的脚本，放上 CDN
全栈工程师
前端工程师正在转变为全栈工程师
一个人负责开发前端和后端
从数据库到 UI 的所有开发
全栈技能
怎样才能称为全栈工程师？
传统前端技能：HTML、JavaScript、CSS
一门后端语言
移动端开发：iOS / Android / HTML5
其他技能：数据库、HTTP 等等
软件行业的发展动力
历史演变：前后端不分 -> 前后端分离 -> 全栈工程师
动力：更加产业化、大规模地生产软件
效率更高
成本更低
通用性好、能够快速产出的技术最终会赢，单个程序员的生产力要求越来越高。
1.2 MV*模式
1.2.1 MVC模式
1.2.2 MVVM模式
1.3 Vue.js概述
Vue.js是一套构建前端的MVVM框架，它集合了众多优秀主流框架设计及思想，
轻量、数据驱动（默认单向数据绑定，但也提供支持双向数据绑定）、学习成本低，
且可与webpack/gulp构建工具结合实现web组件化开发、构建部署等。
Vue.js本身就拥有一套较为成熟的生态系统：Vue+vue-router+vuex+webpack+sass/less，
不仅满足小的前端项目开发，也完全胜任开发大型的前端应用，包括单页面应用和多页面应用等。
Vue.js可实现前端页面和后端业务分离、快速开发、单元测试、构建优化、部署等。1.4 Vue.js 发展历程
Vue.js的发展过程如下：
2013年12月24日，发布0.7.0。
2014年1月27日，发布0.8.0。
2014年2月25日，发布0.9.0。
2014年3月24日，发布0.10.0。
2015年10月27日，正式发布1.0.0。
2016年4月27日，发布2.0的preview版本。
2017年第一个发布的Vue.js的为v2.1.9，最后一个发布的Vue.js为v2.5.13。
2019年发布Vue.js的2.6.10，也是比较稳定的版本。
2020年09月18日，Vue.js 3.0 正式发布。
1.5 Vue.js3.0带来的新变化
1. 重构响应式系统
2. 更好的性能
3. tree-shaking 支持
4. 组合API
5. Teleport(传送)
6. fragment(碎片)
7. 更好的TypeScript支持
第2章 搭建开发与调试环境
2.1 安装Vue.js
使用CDN方式来安装Vue框架，就是选择一个Vue.js链接的稳定的CDN服务商。
在页面中引入Vue的代码如下：
<script src="https://unpkg.com/vue@next"></script>
说明：
CDN的全称是Content Delivery Network，即内容分发网络。
CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，
通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，
降低网络拥塞，提高用户访问响应速度和命中率。
2.1.1 使用CDN方式创建vue应用
步骤1： 引入vue.js
步骤2：定义模板
步骤3：定义vue实例
2.2 安装vscode，安装vue-cli
安装步骤：
步骤1：安装 Node.js
node.js 官网：https://nodejs.org/en/download
安装成功后在 cmd 控制台输入 node -v 和 npm -v 验证是否安装成功
安装步骤：
步骤2：配置淘宝镜像
安装 cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
npm install -g cnpm --registry=https://mirrors.huaweicloud.com/repository/npm/
安装步骤：
步骤3：安装vue
cnpm install vue –g
验证是否安装成功
cnpm info vue
安装步骤：
步骤4：安装 webpack 模块
cnpm install webpack –g
vue-cli依赖于webpack，因此需要提前通过cnpm工具来安装webpack库
安装步骤：
步骤5：安装 webpack-cli
cnpm install --global webpack-cli
安装步骤：
步骤6：安装vue-cli 3.x
cnpm install @vue/cli -g
2.3 创建vue项目，Visual Studio Code编辑器，安装vue-devtools
以管理员身份打开 cmd 控制台，进入想要创建项目的目录，开始创建项目
vue create [项目名称]
安装完成后，根据给出的提示进入项目目录，运行项目
npm run serve
Visual Studio Code
下载地址：https://code.visualstudio.com/Download
Visual Studio Code编辑器特点：
轻巧极速，占用系统资源较少
具备语法高亮显示、智能代码补全、自定义快捷键和代码匹配等功能
跨平台
主题界面的设计比较人性化
提供了丰富的插件
vue-devtools是一款调试vue.js应用的开发者浏览器扩展，
可以在浏览器开发者工具下调试代码。
2.4 我的第一个Vue.js程序，vue项目目录介绍
main.js：
这个js文件是主页面配置的主入口。主要是利用ES6的模块化引入模板
main.js主要是引入vue框架，根组件及路由设置，并且定义vue实例
路由文件：
router文件夹下，有一个index.js，即为路由配置文件
根组件：
App.vue——[根组件]
第3章 熟悉ECMAScript 6语法
3.1 ECMAScript6（ES6）
ES6介绍：
ES6是ECMAScript6，是新版本的JavaScript语言标准。
ES6语法相对其他版本标准更加简洁规范、功能更加强大，
大大提升开发效率，增加代码安全
3.2 块作用域构造let和const
let 声明的变量只在 let 命令所在的代码块内有效，var 是在全局范围内有效。
let 只能声明一次 var 可以声明多次。
let 不存在变量提升，var 会变量提升。
const 声明一个只读的常量，一旦声明，常量的值就不能改变。
3.3 解构赋值
解构赋值是对赋值运算符的扩展。
他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值
解构模型
在解构中，有下面两部分参与：
解构的源，解构赋值表达式的右边部分。
解构的目标，解构赋值表达式的左边部分。
数组模型的解构（Array）
对象模型的解构（Object）
3.4 模块
ES6 引入了模块化，其设计思想是在编译时就能确定模块的依赖关系，以及输入和输出的变量。
export 与 import
模块导入导出各种类型的变量，如字符串，数值，函数，类。
导出的函数声明与类声明必须要有名称（export default 命令另外考虑）。
不仅能导出声明还能导出引用（例如函数）。
export 命令可以出现在模块的任何位置，但必需处于模块顶层。
import 命令会提升到整个模块的头部，首先执行。
as 的用法
export 命令导出的接口名称，须和模块内部的变量有一一对应关系。
导入的变量名，须和导出的接口名称相同，即顺序可以不一致。
3.5 箭头函数
ES6中允许使用=>来定义函数。箭头函数相当于匿名函数，并简化了函数定义。
let fn = (name) => {
// 函数体
return `Hello ${name} !`;
};
// 等同于
let fn = function (name) {
// 函数体
return `Hello ${name} !`;
};
如果箭头函数没有参数，写空括号
//没有参数，写空括号
let fn = () => {
console.log('hello');
};
如果箭头函数有一个参数，也可以省去包裹参数的括号
//只有一个参数，可以省去参数括号
let fn = name => {
console.log(`hello ${name}!`)
};
如果箭头函数有多个参数，将参数依次用逗号(,)分隔，包裹在括号中。
let fn = (val1, val2, val3, val4) => { return [val1, val2, val3, val4]; }
如果箭头函数的函数体只有一句执行代码，简单返回某个变量或者返回一个简单的js表达式，可以省去函数体花括号{ }
//返回一个简单的js表达式num1+num2
let sum = (num1, num2) => num1 + num2;
// 等同于
let sum = function(num1, num2) {
return num1 + num2;
};
第4章 熟悉Vue.js语法
4.1 创建应用程序实例
在Vue 3.0中，应用程序的实例创建语法规则如下：
Vue.createAPP(App)
应用程序的实例充当了MVVM模式中的ViewModel。
createAPP()是一个全局API，它接受一个根组件选项对象作为参数，
该对象可以包含数据、方法、组件生命周期钩子等，然后返回应用程序实例本身。
创建了应用程序的实例后，可以调用实例的mount()方法，
制定一个DOM元素，在该DOM元素上装载应用程序的根组件，
这样这个DOM元素中的所有数据变化都会被Vue框架所监控，从而实现数据的双向绑定。
Vue.createAPP(App).mount('#app')
4.2 插值
1.文本插值
数据绑定最常见的形式就是使用“Mustache”语法（双大括号）的文本插值：
<span>Message: {{ message}}</span>
2.原始HTML
“Mustache”语法（双大括号）会将数据解释为普通文本，而非HTML代码。
为了输出真正的HTML，需要使用v-html指令。
3.使用JavaScript表达式
在模板中，一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，
Vue.js都提供了完全的JavaScript表达式支持。
4.3 方法选项
4.3.1 使用方法
使用方法有两种方式，一种是使用插值{{}}方式，另一种是使用事件调用。
1. 使用插值方式
2.使用事件调4.3.2 传递参数
传递参数和正常的JavaScript传递参数的方法一样，分为两个步骤：
(1) 在methods的方法中进行声明，例如给add方法加上一个参数a，声明如下：
add:function(a){}
(2) 调用方法时直接传递参数，例如这里传递传输为2，在button上直接写：
<button v-on:click="add(2)">增加</button>
4.3.3 方法之间调用
在Vue中，methods选项中的一个方法可以调用methods中的另外一个方法，
使用以下语法格式：
this.方法名();
this.$options.methods.+方法名()
4.4 生命周期钩子函数
4.4.1 认识生命周期钩子函数
这些生命周期钩子函数与el和data类似，也是作为选项写入Vue实例内，
并且钩子的this指向的是调用它的Vue实例。
钩子函数 说明
beforeCreate 在Vue实例创建之前执行的函数
created 实例创建完成后调用。
beforeMount 在Vue实例创建之后，数据未渲染负责接管DOM之前执行的函数
mounted el挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始。
beforeDestory 实例销毁之前调用。主要解绑一些使用addEventListener监听的事件等。
destroyed Vue实例在执行vm.destroyed()命令之后，销毁之后执行的函数
beforeUpdata 在Vue实例数据更新之前执行的函数
updated 在Vue实例数据更新之后执行的函数4.4.2 created和mouted
在使用Vue的过程中，经常需要给一些数据做初始化处理，
常用的方法是在created与mounted钩子函数中处理。
created是在实例创建完成后立即调用。在这一步，
实例已完成以了数据观测，属性和方法的运算，watch/event事件回调。
然而，挂载阶段还没开始，$el属性目前不可见。所以不能操作DOM元素，
多用于初始化一些数据或方法。
Mounted是在模板渲染成HTML后调用，
通常是初始化页面完成后，再对HTML的DOM节点进行一些需要的操作。
methods中定义的方法和计算属性的区别：
computed能实现的，方法都能实现
计算属性是基于它的依赖进行缓存的。所以，
不是每次执行，都能重启运算，而方法每次调用，都会执行方法体第5章 指令
指令介绍：
指令（Directives）是带有“v-”前缀的特殊特性。
指令特性的值预期是单个JavaScript表达式（v-for是例外情况）。
指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。
5.1 内置指令
5.1.1 v-show
5.1.2 v-if/v-else-if/v-else
5.1.3 v-for
5.1.4 v-bind
5.1.5 v-model
5.1.6 v-on
5.1.7 v-text
5.1.8 v-html
5.1.9 v-once
5.1.10 v-pre5.1.1 v-show
v-show指令会根据表达式的真假值，切换元素的display CSS属性，
来显示或者隐藏元素。当条件变化时该指令会自动触发过渡效果。
5.1.2 v-if/v-else-if/v-else
在Vue中使用v-if、v-else-if和v-else指令实现条件判断。
1.v-if
v-if指令根据表达式的真假来条件地渲染元素。
2.v-else-if/v-else
v-show与v-if的区别（经典面试题）
1、两个指令都能控制元素的显示与隐藏
2、若隐藏状态时，v-show是通过元素添加css样式：“display：none”的方式实现的，
而v-if是直接在dom节点上删除了元素；
3、若元素的隐藏与显示状态频繁切换时，使用v-show来实现
4、v-if同时还能实现多分支条件判断5.1.3 v-for
使用v-for指令可以对数组、对象进行循环，来获取到其中的每一个值。
1. v-for遍历数组
2. v-for遍历对象
3. v-for遍历整数
使用v-for指令可以对数组、对象进行循环，来获取到其中的每一个值。
1. v-for遍历数组
语法：
v-for="(item,key,index) in 对象名“
item：对象中的每一项
key:对应的键名（给每个节点做一个唯一的标识，为了高效的更新虚拟DOM）
2. v-for遍历对象
3. v-for遍历整数
v-for综合案例：
定义部门对象数组， 使用v-for指令将部门数据渲染到表格中
5.1.4 v-bind
v-bind指令主要用于响应更新HTML元素的属性，
将一个或多个属性或者一个组件的prop动态绑定到表达式。
5.1.5 v-model
v-model指令用来在表单<input>、<textarea>及<select>元素上创建双向数据绑定，
它会根据控件类型自动选取正确的方法更新元素。它负责监听用户的输入事件以及更新数据，
并对一些极端场景进行特殊处理。
5.1.6 v-on
v-on指令用于监听DOM事件，当触发时运行一些JavaScript代码。
v-on指令的表达式可以是一般的JavaScript代码，也可以是一个方法的名字或者方法调用语句。
在使用v-on指令对事件进行绑定时，需要在v-on指令后面节上事件名称，
例如click、mousedown、mouseup等事件。
5.1.7 v-text
v-text指令用来更新元素的文本内容。如果只需要更新部分文本内容，使用插值来完成。
5.1.8 v-html
v-html指令用于更新元素的innerHTML。内容按普通HTML插入，不会作为Vue模板进行编译。
5.1.9 v-once
v-once指令不需要表达式。v-once指令只渲染元素和组件一次，随后的渲染，
使用了此指令的元素、组件及其所有的子节点，都会当作静态内容并跳过，
这可以用于优化更新性能。
5.1.10 v-pre
v-pre不需要表达式，用于跳过这个元素和它的子元素的编译过程。
可以使用v-pre来显示原始Mustache标签。
5.2 综合案例——通过指令实现下拉菜单效果
网站主页中经常会需要设计下拉菜单，当鼠标移动到某个菜单上时会弹出下拉子菜单列表，
每个子菜单项可以链接到不同的页面，当鼠标离开菜单列表时，子菜单项会被隐藏掉。
下面通过就通过指令来设计这样的下拉菜单效果
第6章 计算属性
6.1 vue3的新特性
setup 函数：
Vue3.0中一个新的配置项，值为一个函数。
1. setup 函数是一个新的组件选项, 作为组件中 compositionAPI 的起点
2.组件中所用到的：数据、方法等等，均要配置在setup中
3. setup 中不能使用 this, this 指向 undefined
4. 在模版中需要使用的数据和函数，需要在 setup 返回。
前置说明:
setup 需要有返回值, 只有返回的值才能在模板中使用
默认普通的数据, 不是响应式的
reactive 函数作用:
传入一个复杂数据类型，将复杂类型数据, 转换成响应式数据 （返回该对象的响应式代理）
总结: 通常是用来定义响应式 对象数据作用: 对传入的数据（一般简单数据类型），包裹一层对象, 转换成响应式
ref 函数接收一个的值, 返回一个ref 响应式对象, 有唯一的属性 value
在 setup 函数中, 通过 ref 对象的 value 属性, 可以访问到值
在模板中, ref 属性会自动解套, 不需要额外的 .value
6.2 使用计算属性
computed函数调用时, 要接收一个处理函数, 处理函数中, 需要返回计算属性的值
计算属性的本质就是辅助插值表达式来进行复杂逻辑运算的。
6.3 计算属性的缓存
计算属性是基于它们的依赖进行缓存的，只有在它的相关依赖发生改变时才会重新求值。
methods中定义的方法和计算属性的区别：
1、computed能实现的，方法都能实现
2、计算属性是基于它的依赖进行缓存的。
所以，不是每次执行，都能重启运算，而方法每次调用，都会执行方法体
6.4 综合案例——使用计算属性设计购物车效果
商城网站中经常需要设计购物车效果。购物车页面中
会显示商品名称、商品单价、商品数量、单项商品的合计价格，
最后会有一个购物车中所有商品的总价。
第7章 侦听器
7.1 使用侦听器
侦听器：
Vue侦听器是提供给开发者可以用来监测某些数据的变化，从而针对这些数据的变化进行某些操作
注意：侦听器本质上是一个函数，如果要监听哪一个数据的变化，就把那个数据作为函数名
7.2 侦听器属性
当监听器监听一个对象时，使用handler定义当数据变化时调用的监听器函数，
还可以设置deep和immediate属性。
Deep属性在监听对象属性变化时使用，，表示无论该对象的属性在对象中的层级有多深，
只要该属性的值发生变化，都会被监测到。该选项的值为true
监听器函数在初始渲染时并不会被调用，只有在后续监听的属性发生变化时才会被调用；
如果要监听器函数在监听开始后立即执行，可以使用immediate选项，将其值设置为true。
7.3 侦听器与计算属性的区别（经典面试题）
1：功能不同，计算属性用于解决模板语法冗余问题。侦听器侦听data中某一个数据变化
2: 计算属性有缓存机制，侦听器没有缓存机制
3：计算属性不支持异步操作，侦听器支持异步操作
4：计算属性可以给vue新增属性，侦听器必须是data中已有属性
5：计算属性只要使用了就会立即执行一次，侦听器默认只有当数据第一次执行才会执行
6：侦听器可以通过设置immerdiate为true，也可以像计算属性一样立即执行一次
第8章 事件修饰符
8.1.1 stop
stop：修饰符用来阻止事件冒泡。
案例：创建了一个div元素，在其内部也创建一个div元素，并分别为它们添加单击事件。
根据事件的冒泡机制可以得知，当单击内部的div元素之后，会扩散到父元素div，
从而触发父元素的单击事件。
8.1.2 prevent
prevent修饰符用于阻止默认行为，例如<a>标签，
当单击标签时，默认行为会跳转到对应的链接，
如果添加上prevent修饰符将不会跳转到对应的链接。
passive修饰符尤其能够提升移动端的性能。
第9章 Class与Style绑定
9.1 绑定HTML样式(Class)
9.1.1 数组语法
Vue中提供了使用数组进行绑定样式的方式，可以直接在数组中写上样式的类名。
提示：如果不使用单引号包裹类名，其实代表的还是一个变量的名称，会出现错误信息。
9.1.2 对象语法
在Vue中也可以直接使用对象的形式来设置样式。
对象的属性为样式的类名，value则为true或者false，当值为true时显示样式。
9.2 绑定内联样式(style)
9.2.1 对象语法
在Vue中，也可以使用对象的方式，为元素设置style样式。
9.2.2 数组语法
v-bind:style的数组语法可以将多个样式对象应用到同一个元素上
9.3 综合案例——设计隔行变色的商品表
该案例主要是设计隔行变色的商品表，针对奇偶行将应用不同的样式，
然后通过v-for指令循环输出表格中的商品数据。
第10章 表单输入绑定
实现双向数据绑定
在Vue中使用内置的v-model指令完成数据在View与Model间的双向绑定。
可以用v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
v-model会忽略所有表单元素的value、checked、selected特性的初始值，而总是将Vue实例的数据作为数据来源。10.1 单行文本输入框
单行文本输入框的数据双向绑定。
10.2 多行文本输入框
在多行文本输入框textarea标签中，绑定message属性。
10.3 复选框
复选框单独使用时，绑定的是布尔值，选中则值为true，未选中则值为false。
案例：
多个复选框，绑定到同一个数组，被选中的添加到数组中。
案例
10.4 单选按钮
单选按钮使用v-model指令配合单选框的value来实现。
案例：
10.5 选择框
1.单选框
2.多选框(绑定到一个数组)
为<select>标签添加multiple属性，即可实现多选。
3.用v-for渲染的动态选项
在实际应用场景中，<select>标签中的<option>一般是通过v-for指令动态输出的，其中每一项的value或text都可以使用v-bind动态输出。
案例：
10.6 综合案例——设计用户注册页面
使用Vue设计用户注册页面比较简单，可以轻松数据的转化操作。
通过使用v-model指令对表单数据自动收集，从而能轻松实现表单输入和应用状态之间的双向绑定。
第11章 组件
11.1 什么是组件
组件是Vue中的一个重要概念，它是一种抽象，是一个可以复用的Vue实例，
它拥有独一无二的组件名称，它可以扩展HTML元素，
以组件名称的方式作为自定义的HTML标签。
因为组件是可复用的Vue实例，所以它们与new Vue()接收相同的选项，
例如data、computed、watch、methods以及生命周期钩子等。
11.2 组件的注册
11.2.1 全局注册
vue 中组件的引用原则：先注册后使用
全局注册组件使用应用程序实例的component()方法来注册组件。
该方法有两个参数，第一个参数是组件的名称，第二个参数是函数对象或者选项对象。
语法格式如下：
app.component({string}name,{Function|Object} definition(optional))
11.2.2 局部注册
在Vue实例中，可以通过components选项注册仅在当前实例作用域下可用的组件。
11.3 使用prop向子组件传递数据
案例，使用prop属性向子组件传递数据。在子组件的props选项中接收prop属性，
然后使用插值语法在模板中渲染prop属性。
11.4 子组件向父组件传递数据
在Vue中可以通过自定义事件来实现。子组件使用$emit()方法触发事件，
父组件使用v-on指令监听子组件的自定义事件。$emit()方法的语法形式如下：
vm.$emit(myEvent, […args])
其中myEvent是自定义的事件名称，args是附加参数，这些参数会传递给监听器的回调函数。
如果要向父组件传递数据，就可以通过第二个参数来传递
在子组件中，通过 emit() 来触发事件，通知父组件处理
在父组件中，监听子组件事件
第12章 使用Vue Router开发单页面应用
12.1 使用Vue Router
在Vue脚手架创建的项目中使用路由，可以在创建项目时选择配置路由。
例如，使用vue create router-demo创建项目，在配置选项时，选择手动配置，
然后配置Router，如下图所示。
12.2 命名路由
在某些时候，生成的路由URL地址可能会很长，在使用中可能会显得有些不便。
这时候通过一个名称来标识一个路由更方便一些。因此在Vue Router中，
可以在创建Router实例的时候，通过在routes配置中给某个路由设置名称，从而方便的调用路由。
routes:[
{
path: '/form',
name: 'router1',
component: Form
}
]
应用场景1：
应用场景2：
12.3 命名视图
当打开一个页面时，整个页面可能是由多个Vue组件所构成的。
例如，后台管理首页可能是由sidebar(侧导航)、header（顶部导航）和main(主内容）
这三个Vue组件构成的。此时，可以使用命明视图，在界面上拥有多个单独命名的视图，
而不是只有一个单独的出口。
12.4 路由传参
在很多的情况下，例如表单提交，组件跳转之类的操作，
需要使用到上一个表单、组件的一些数据，这时就需要将需要的参数
通过传参的方式在路由间进行传递。
两种传参方式：query传参和param传参。
1.query传参
2.param传参
1.query传参
2.param传参
12.5 编程式导航
在Vue Router中具有三种导航方法，分别为push、replace和go。
最常见的通过在页面上设置router-link标签进行路由地址间的跳转，
就等同于执行了一次push方法。
1.push方法
2.go方法
3. replace方法
router.push({ path: '/home', replace: true })
// 相当于
router.replace({ path: '/home' })
第13章 数据请求库——axios
13.1 什么是axios
axios是一个基于promise的HTTP库，可以用在浏览器和node.js中。
axios具有以下特性：
(1) 从浏览器中创建XMLHttpRequests。
(2) 从node.js创建http请求。
(3) 支持Promise API。
(4) 拦截请求和响应。
(5) 转换请求数据和响应数据。
(6) 取消请求。
(7) 自动转换JSON数据。
(8) 客户端支持防御XSRF。
13.2 安装axios
安装axios：
在Vue脚手架中使用axios时，使用NPM安装方式，执行下面命令安装axios：
npm install axios
npm install vue-axios
引入axios：
在main.js文件中导入axios，代码如下：
import axios from 'axios';
import VueAxios from 'vue-axios';
app.use(VueAxios, axios);
13.3 基本用法
13.3.1 get请求和post请求
get请求格式1:
this.axios.get('/url?key=value&id=1')
.then(function(response){
// 成功时调用
console.log(response)
})
.catch(function(response){
// 错误时调用
console.log(response)
})
get请求格式2:
this.axios.get(‘/url’,{params:{key:value}})
.then(function(response){
// 成功时调用
console.log(response)
})
.catch(function(response){
// 错误时调用
console.log(response)
})
get请求案例:
post请求格式
this.axios.post(‘/url’，{key:vlaue} )
.then(function(response){
// 成功时调用
console.log(response)
})
.catch(function(response){
// 错误时调用
console.log(response)
})
post请求和get请求基本一致，不同的是数据以对象的形式作为post请求的第二个参数，
对象中的属性就是要发送的数据。
post请求案例：
13.3.2 跨域
一、为什么会出现跨域问题
出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，
它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，
则浏览器的正常功能可能都会受到影响。
二、什么是跨域
1.当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。
15.3.2 跨域请求数据， 跨域请求配置-vue端，跨域请求配置-servlet端
在Vue3的vue.config.js中，增加如下配置：
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8888/',
// 允许跨域
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api': ''}
}
}
}
在Servlet中，创建拦截器：
对请求和响应进行处理：
15.3.4 并发请求
很多时候，可能需要同时调用多个后台接口，
可以利用axios库提供的并发请求助手函数来实现：
axios.all(iterable)
axios.spread(callback)
13.4 axios API
可以通过向axios传递相关配置来创建请求。
get请求和post请求的调用形式如下：
//发送 get 请求
this.$axios({
method:'get',
url: '/user/12345',
});
// 发送 get 请求
this.$axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
13.5 请求配置
axios库为请求提供了配置对象，在该对象中可以设置很多选项，
常用的是url、method、headers和params。其中只有url是必需的，
如果没有指定method，请求将默认使用get方法。
13.6 创建实例
可以使用自定义配置新建一个axios实例，之后使用该实例向服务端发起请求，
就不用每次请求时重复设置选项了。使用axios.create方法创建axios实例，代码如下：
axios.create([config])
var instance = axios.create({
baseURL: 'https://some-domain.com/api/',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
});
13.7 配置默认选项
使用axios请求时，对于相同的配置选项，可以设置为全局的axios默认值。
配置选项在Vue的main.js文件中设置，代码如下：
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
13.8 拦截器
拦截器在请求或响应被then方法或catch方法处理前拦截它们，对请求或响应做一些操作。
第14章 状态管理——Vuex
14.1 什么是Vuex
Vuex：专门在Vue中实现集中式状态（数据）管理的一个Vue插件，
对vue应用中多个组件的共享状态进行集中式管理（读/写），
也是一种组件间通讯的方式，且适用于任意组件间通信。
官网： https://vuex.vuejs.org/zh/guide/
什么时候用vuex?
1、多个组件依赖于同一个状态
2、来自不同组件的行为需要变更同一状态
Vuex的工作原理：
每一个 Vuex 应用的核心就是 store，里面又包括:
（1）state（数据）：用来存放数据源，就是公共状态;
（2）getters（数据加工）：有的时候需要对数据源进行加工，返回需要的数据；
（3）actions（事件）：要执行的操作，可以进行同步或者异步事件
（4）mutations（执行）：操作结束之后，actions通过commit更新state数据源(同步操作)
（5）modules：使用单一状态树，致使应用的全部状态集中到一个很大的对象，
所以把每个模块的局部状态分装使每一个模块拥有本身的 state、mutation、action、getters、
甚至是嵌套子模块；
vuex的工作流程就是：
（1）通过dispatch去提交一个actions，
（2）actions接收到这个事件之后，在actions中可以执行一些异步|同步操作，
根据不同的情况去分发给不同的mutations，
（3）actions通过commit去触发mutations，
（4）mutations去更新state数据，state更新之后，就会通知vue进行渲染
14.2 安装Vuex
在脚手架创建项目时勾选vuex的选项系统会自动创建
1、 引入：脚手架会自动创建vuex的配置文件 store/index.js
2、在store/index.js中进行vuex状态管理
14.3 使用Vuex
核心概念： vuex中一共有五个状态 State Getter Mutation Action Module
1、 State
提供唯一的公共数据源，所有共享的数据统一放到store的state进行储存，相似与data
使用state中定义的数据：
1、方法一： 在模板页面通过插值表达式直接调用
2、方法二：组件的处理函数中，通过 this.$store.state.全局数据名称 使用vuex中的数据
3、方法三：从vuex中按需导入mapstate函数
注意：当前组件需要的全局数据，映射为当前组件computed属性
2、 Mutation
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件
2、 使用Mutation
方法一：使用commit触发Mutation操作
方法二：从vuex中按需导入mapMutations函数
3、 Action
Action和Mutation相似，一般不用Mutation 异步操作，若要进行异步操作，使用Action
3、 使用Action
从vuex中按需导入mapActions函数
4、 Getter
类似于vue中的computed，进行缓存，对于Store中的数据进行加工处理形成新的数据
4、使用 Getter
方法一：定义计算属性， 在计算属性中，通过 return this.$store.getters.属性名 来使用
方法二：从vuex中按需导入mapGetters函数
5、 Modules
当遇见大型项目时，数据量大，store就会显得很臃肿。
所以，Vuex 允许我们将 store 分割成模块（module）。
每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块
15、补充
笔者水平有限，如有不当之处，请予指正~
非常感谢各位耐心观看！如果看到这句话，并且觉得有用的话，不妨点个赞呗~~~
413
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
