Vue学习笔记

模板语法

1. 插值语法

{{x x x}}

2. 指令语法

用于解析标签( 标签属性、标签体内容、绑定时间…… )

数据绑定

1. 单向数据绑定

v-bind: （可简写成 : ） data——>page

2. 双向数据绑定

v-model: value（可简写成 **v-model **）

• v-model只能应用在表单类元素（输入类元素）上。

el与data的两种写法

• el: vm.$mount(’ #x x x ')
• data:
  • 对象式：
  • 函数式:

由 Vue 管理的函数，不能写箭头函数，this不指向 Vue 实例

MVVM模型

1. M: 模型（model ） ——> data中的数据
2. V: 视图（View ） ——> 模板代码
3. VM: 视图模型（ model ） ——> Vue实例

data中的所有属性都出现在Vue实例上

数据代理

Object.defineProperty(x, y , z)

枚举：enumerable ： true。

修改： writable ： true

删除：configurable ：true

两个高级配置

• get( )
• set( )

通过一个对象代理对另一个对象中属性的操作（读 / 写）

Vue中的数据代理：

通过vm对象来代理data对象中属性的操作。

事件处理

点击：

v-on:click 简写 @click

滚动：

• @scroll ——>滚动条
• @wheel ——>鼠标滚轮

事件修饰符

eg : @click.prevent

Vue中的事件修饰符

• prevent ： 阻止默认事件
• stop ： 阻止事件冒泡
• once : 事件只触发一次
• capture ： 使用事件的捕获模式
• self ：只有event.target 是当前操作的元素是才触发事件
• passive ： 事件的默认行为立即执行，无需等待事件回调执行完毕

修饰符可以连续写

键盘事件

键盘：

• @keydown
• @keyup

1.Vue 中常用的***按键别名***

• 回车 => enter
• 删除 => delete ( 捕获” 删除 “ 和” 退格 “ 键 )
• 退出 => esc
• 空格 => space
• **换行 ** => tab （特殊，必须配合keydown使用）
• 上 => up
• 下 => down
• 左 => left
• 右 => right

2.Vue未提供的别名的键名，可以使用按键原始的key值去绑定，但要注意转化（短横线命名）

3.系统修饰键（用法特殊）Ctrl Alt shift meta

• 配合keyup :
• 配合keydown :

4.Vue.config.keyCodes.自定义键名 = 键码 ，可以去定制按键别名

计算属性与监视

1.计算属性

• 要用的属性不存在，需要通过***已有属性*** 计算得来

• 原理： 底层借助了Object.defineProperty方法提供的 getter 和 setter

• get什么时候执行

  • 初次读取属性时执行一次。
  • 所依赖的数据发生变化时再次调用。

• 优势： 与methon 实现相比，内部有缓存机制（复用） , 效率更高，调试方便。

• 备注：

  • 计算属性最终会出现在vm中，直接读取使用即可。
  • 如果计算属性要被修改，必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

2.监视属性—watch

• 当被监视的属性发生变化时，回调函数自动调用，进行相关操作
• 监视属性必须存在，才能进行监视！！！
• 监视属性两种写法
  • new Vue 时传入watch 配置
  • 通过vm.$watch监视

深度监视：

• Vue中 watch默认不监测对象内部值的改变。（一层）
• 配置 deep : true 可以监测对象内部值改变。（多层）

备注：

• Vue自身可以监测对象内部值的改变，但Vue 提供的 watch 默认不可以！！！
• 使用 watch 时根据数据的自身结构，决定是否采用深度监视。

watch 与computed的区别

• computed能完成的功能，watch都可以完成
• watch 能完成的功能，computed不一定能完成。例如： watch可以进行异步操作

• 所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。

• 所有不被Vue管理的函数（定时器的回调函数，ajax的回调函数、promise的回调函数等），最好写成箭头函数。这样this的指向才是vm 或 组件实例对象。

class 与 style 绑定

1.class绑定

v-bind : class = " x x x "

绑定class样式——字符串写法

• 适用于： 样式的类名不确定，需要动态指定。

绑定class样式——数组写法

• 适用于： 要绑定的样式的个数不确定、名字也不确定。

绑定class样式——对象写法

• 适用于： 要绑定的样式的个数确定、名字也确定，但要动态决定用不用。

2.style绑定

v-bind : style= " styleObj "

绑定style样式——对象写法

注意：

• :style="{ fontSize: xxx }" xxx是动态值
• font-size = > fontSize

条件渲染

1.v-if

• v-if = “表达式”
• v-else-if = “表达式”
• v-else = “表达式”

适用于：切换频率比较低的场景

特点： 不展示的DOM元素直接被移除

2.v-show

• v-show = “ 表达式 ”

适用于：切换频率较高的场景

特点： 不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

列表渲染

面试题，react、vue中key的有什么作用？（ key的内部原理 ）

1.虚拟DOM中key的作用:

• key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】

​ 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下:

2.对比规则（对比算法）

( 1 ). 旧虚拟DOM中找到了与新虚拟DOM相同的key:

• ①. 若虚拟DOM中内容没变，直接使用之前的真实DOM ! （ 复用 ）

• ②. 若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM。

( 2 ). 旧虚拟DOM中未找到与新虚拟DOM相同的key

• 创建新的真实DOM，随后渲染到到页面。

3.用index作为key可能会引发的问题:

• 若对数据进行: 逆序添加、逆序删除等破坏顺序操作 :

  ​ 会产生没有必要的真实DOM更新 ==> 界面效果没问题，但效率低。

• 如果结构中还包含输入类的DOM:

  ​ 会产生错误DOM更新 ==> 界面有问题。

4.开发中如何选择key?:

• 最好使用每条数据的唯一 标识作为key, 比如id、 手机号、身份证号、学号等唯一 值。

• 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

Vue监视数据的原理:

1.vue会监视data中所有层次的数据。

2.如何监测对象中的数据?

• 通过setter实现监视，且要在 new Vuel时就传入要监测的数据。

  • 对象中后追加的属性，Vue默认不做响应式处理

  • 如需给后添加的属性做响应式，请使用如下API:

    ​ Vue . set(target, propertyName/index, value)

    ​ vm. $set(target, propertyName/index, value )

3.如何监测数组中的数据?

• 通过包裹数组更新元素的方法实现，本质就是做了两件事:

  • 调用原生对应的方法对数组进行更新。

  • 重新解析模板，进而更新页面。

4.在Vue修改数组中的某个元素一定要用如下方法:

• 1、使用这些 API : push()、pop()、 shift()、 unshift()、 splice()、 sort()、 reverse()

• 2、Vue .set()或vm. $set()

**特别注意: Vue.set() 和vm.$set() 不能给vm或vm的根数据对象添加属性! **

数据劫持

收集表单数据

若: <input type="text"/>,则v- model 收集的是value值，用户输入的就是value值。

若: <input type="radio"/>则v- model 收集的是value值，且要给标签配置value值。

若: <input type="checkbox" />

• 没有配置 input 的 value 属性，那么收集的就是checked (勾选or未勾选，是布尔值)。

• 配置input的value属性:

  • v-model 的初始值是非数组，那么收集的就是checked ( 勾选or未勾选，是布尔值 )。
  • v-model 的初始值是数组，那么收集的的就是value组成的数组。

备注: v-model 的三个修饰符：

• lazy:失去焦点再收集数据

• number:输入字符串转为有效的数字

• **trim:**输入首尾空格过滤

过滤器

1.定义:

​ 对要显示的数据进行特定格式化后再显示( 适用于一些简单逻辑的处理 )

2.语法

• 注册过滤器： Vue. filter(name , callback) （全局注册）或 new Vue( filters: {} ）

• 使用过滤器: {{ xxx|过滤器名 }} 或 v-bind:属性 = "xx|过滤 器名” （ 两种用法 ）

3.备注:

• 过滤器也可以接收额外参数、多个过滤器也可以串联

• 并没有改变原本的数据，是产生新的对应的数据

形参默认值

内置指令

v-bind： 单项绑定解析表达式 ，可简写为：xxx

v-model： 双向绑定数据

v-for： 遍历数组 / 对象 / 字符串

v-on： 绑定监听，可简写为@

v-if： 条件渲染

v-else： 条件渲染

v-show： 条件渲染（ 动态控制节点是否展示 ）

v-text指令：

• 作用： 向其所在的节点中渲染文本内容
• 与插值语法的区别：v-text 会替换掉节点中的内容 ，{{ xxx }} 则不会。

v-html指令：

• 作用： 向指定节点中渲染包含html结构的内容

• 与插值语法的区别：

  • v-html会替换掉节点中所有的内容，{{ x x x }}则不会
  • v-html可以识别 html 结构。

• 严重注意：

  • 在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击
  • 一定要在可信的内容上使用v-html ， 永远不要在用户提交的内容上！！

v-cloak指令（ 无值 ）：

• 本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删除v-clock属性。
• 使用css配合 v-clock 可以解决网速慢时页面展示出 {{ xxx }} 的问题。

v-conce指令：

• v-once所在节点在初次动态渲染后，就视为静态内容了。
• 以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

v-pre指令：

• 跳过其所在节点的编译过程。
• 可利用它跳过，没有指令语法、没有使用插值语法的节点，会加快编译。

自定义指令

1. 定义语法：

• 局部指令:

new Vue({ directives:{指令名 : 配置对象}}) or new Vue({directives{指令名，回调函数 }})

• 全局指令:

Vue.directive( 指令名, 配置对象 ) or Vue.directive( 指令名, 回调函数 )

2. 配置对象中常用的3个回调：

• bind: 指令与元素成功绑定时调用。 （ 一上来 ）

• inserted: 指令所在元素被插入页而时调用。

• update: 指令所在模板结构被重新解析时调用。

3. 备注：

• 指令定义时不加 v- ，但使用时要加v- 。
• 指令名如果是多个单词，要使用 kebab-case 命名方式，不要用 camelCase 命名。

生命周期

• 又名: 生命周期回调函数、生命周期函数、生命周期钩子。

• 是什么: Vue 在关键时刻帮我们调用的些特殊名称的函数。

• 生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。

• 生命周期函数中的this指向是vm或组件实例对象。

常用的生命周期钩子:

• mounted: 发送ajax请求、 启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
• beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

关于销毁Vue实例

• 1.销毁后借助Vue开发者工具看不到任何信息。

• 2.销毁后自定义事件会失效，但原生DOM事件依然有效。

• 3.一般不会再beforeDestroy中操作数据，因为即便操作数据，也不会再触发更新流程了。

组件化编程

模块

• 向外提供特定功能的 js 程序，一般就是一个js文件。
• 作用： 复用js，简化 js 的编写，提高 js 的运行效率。

组件

• 实现局部功能代码和资源的集合
• 为什么： 界面的功能很复杂
• 作用： 复用代码，简化项目编码，提高运行效率

模块化

• 当应用中的 js 都以模块来编写，那这个应用就是一个模块化的应用。

组件化

• 当应用中的功能都是多组件的方式来编写的，那这个应用就是一个组件化的应用。

非单文位组件

一个文件中包含n个组件

Vue中使用组件的三大步骤:

• 定义组件 ( 创建组件 )

• 注册组件

• 使用组件( 写组件标签 )

1. 如何定义个组件?

• 使用 Vue.extend( options ) 创建，其中options和new Vue( options )时传入的那个options儿乎一样， 但也有区别。

区别如下:

• el 不要写，最终所有的组件都要经过一个 vm 的管理，由 vm 中的el 决定服务哪个容器。

• data必须写成函数，避免组件被复用时，数据存在引用关系。

备注 : 使用template 可以配置组件结构。

2. 如何注册组件?

• 1.局部注册: 靠new Vue的时候传入components 选项

• 2.全局注册: 靠Vue .component (” 组件名 “ ，组件)

3. 编写组件标签

• 使用

几个注意点:

1. 关于组件名:

一个单词组成:

• 第一种写法( 首字母小写 ): school。

• 第二种写法( 首字母大写 ): School。

多个单词组成:

• 第一种写法(kebab-case命名): my - school

• 第一种写法(CamelCase命名): MySchool (需要Vue脚手架支持)

备注:

• (1)组件名尽可能回避HTML中已有的元素名称，例如: h2、 H2都不行。

• (2) 可以使用name配置项指定组件在开发者工具中呈现的名字。

2. 关于组件标签:

第一 种写法: <school></school>

第二种写法: <school/>

备注:不用使用脚手架时，<schoo1/>会导致后续组件不能渲染。

3. 一个简写方式:

const school = Vue. extend( options ) 可简写为: const school = options。

关于VueComponent:

1. school组件本质:

是一个名为 VueComponent 的构造函数， 且不是程序员定义的，是Vue. extend生成的。

2.

我们只需要写 <school/>或<school></schoo1> , Vue解析时会帮我们创建school组件的实例对象，即 Vue 帮我们执行的: new VueComponent( options )。

3.特别注意:

每次调用Vue. extend, 返回的都是一个全新的VueComponent ！！！！

4.关于this指向:

• 组件配置中:

  data函数、methods中的函数、watch中的函数、computed中的函数，它们的this均是【VueComponent实例对象】

• new Vue( options )配置中:

  data函数、methods中的函数、watch中的函数、computed中的函数，它们的this均是【Vue实例对象】

5.VueComponent的实例对象

• 简称 vc ( 也可称之为:组件实例对象)。

• Vue的实例对象，以后简称 vm。

一个重要的内置关系：

• VueComponent.prototype.proto === Vue.prototype

• 为什么要有这个方法？=> 让组件实例对象可以访问到 Vue 原型上的属性、方法。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4RyOJvdY-1641388563504)(C:\Users\DELL\Pictures\Saved Pictures\1.jpg)]

Vue脚手架

Vue脚手架是Vue官方提供的标准化开发工具（开发平台）

第一步（ 仅第一次执行 ） ： 全局安装 @Vue/cli 。

第二步： 切换到要创建项目的目录，然后使用命令创建项目

• Vue create xxxx

第三步：启动项目

• npm run serve

Vue 脚手架隐藏了 webpack 相关配置， 若想查看具体的 webpack 配置，需要执行 vue inspect > output.js

关于不同版本的Vue:

1. vue.js与vue.runtime.xxx.js的区别:

• (1) vue.js是完整版的Vue，包含: 核心功能 + 模板解析器。

• (2) vue. runtime. xxx. js是运行版的 Vue, 只包含: 核心功能,，没有模板解析器。

2. vue.runtime.xxx. js没有模板解析器

• 因为 vue. runtime. xxx. js没有模板解析器，所以不能使用 template 配置项，需要使用 render 函数接收到的createElement函数去指定具体内容。

脚手架的默认配置

使用 vue inspect > output.js 可以查看 Vue 脚手架的默认配置

使用 vue.config.js 可以对脚手架进行个性化定制，详情查看官方文档

ref属性

• 被用来给 元素 或 子组件 注册引用信息( id的替代者 )

• 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象(vc)

• 使用方式:

  • 打标识 : <h1 ref="xxx" >.....</h1>或<School ref="xxx"></School>
  • 获取: this. $refs. xxx

配置项props

功能: 让组件接收外部传过来的数据

• (1) 传递数据: <Demo name=" xxх"/>

• (2) 接收数据:

  • 第一种方式（只接收）props:[ ‘name’ ]
  • 第二种方式（类型限制）props : {name : Number }
  • 第三种方式（限制类型、限制必要性、指定默认值 ）:props:{ name : { type: String, required: true, defaut: ‘xxx’ }}

• props是只读的，Vue底层会监测你对props的修改 ，如果进行了修改，就会发出警告。

  若业务需求确实需要修改，则复制props的内容到data中一份， 然后去修改data中的数据。

minin混入

功能： 将多个组件共同的配置提取成一个混入对象。

使用方式：

• 第一步定义混合，例如{ data(){……}, methons:{ …… } , …… }
• 第二步使用混合，例如
  • 全局混入：Vue.mixin( xxx )
  • 局部混入：mixins:[ ‘xxx’, …… ]

插件

功能：

• 用于增强Vue

本质:

• 包含install 方法的一个对象， install 的第一个参数是 Vue, 第二个以后的参数是插件使用者传递的数据。

定义插件:

对象. install = function ( Vue, options) {

​ // 1.添加全局过滤器

​ Vue. filter(…)

​ // 2.添加全局指令

​ Vue . directive(…)

​ // 3.配置全局混入(合)

​ Vue . mixin(…)

​ // 4.添加实例方法

​ Vue . prototype. $myMethod = function () {…}

​ Vue . prototype. $myProperty = xxxx

}

使用插件:

Vue. use()

scoped样式

作用： 让样式在局部生效，防止冲突

写法： <style scoped></style>

组件化编码流程（通用）

• 实现静态组件： 抽取组件，使用组件实现静态页面效果

• 展示动态数据

  • 数据的类型，名称是什么
  • 数据保存在哪个组件

• 交互：从绑定事件监听开始

1. 组件化编码流程：

(1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。

(2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：

		1).一个组件在用：放在组件自身即可。

		2). 一些组件在用：放在他们共同的父组件上（<span style="color:red">状态提升</span>）。

(3).实现交互：从绑定事件开始。

2. props适用于：

(1).父组件 ==> 子组件 通信

(2).子组件 ==> 父组件 通信（要求父先给子一个函数）

3. 使用v-model时要切记：

• v-model绑定的值不能是props传过来的值，因为props是不可以修改的！

props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。

webStorage

1. 存储内容大小一般支持5MB左右（不同浏览器可能还不一样）

2. 浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。

3. 相关API：

   1. xxxxxStorage.setItem('key', 'value');
      该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。

   2. xxxxxStorage.getItem('person');

       	该方法接受一个键名作为参数，返回键名对应的值。
      

   3. xxxxxStorage.removeItem('key');

       	该方法接受一个键名作为参数，并把该键名从存储中删除。
      

   4. xxxxxStorage.clear()

       	该方法会清空存储中的所有数据。
      

4. 备注：

   1. SessionStorage存储的内容会随着浏览器窗口关闭而消失。
   2. LocalStorage存储的内容，需要手动清除才会消失。
   3. xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null。
   4. JSON.parse(null)的结果依然是null。

组件的自定义事件

1. 一种组件间通信的方式，适用于：子组件 ===> 父组件

2. 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。

3. 绑定自定义事件：

   1. 第一种方式，在父组件中：<Demo @atguigu="test"/>或 <Demo v-on:atguigu="test"/>

   2. 第二种方式，在父组件中：

      <Demo ref="demo"/>
      ......
      mounted(){
         this.$refs.xxx.$on('atguigu',this.test)
      }
      

   3. 若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。

4. 触发自定义事件：this.$emit('atguigu',数据)

5. 解绑自定义事件this.$off('atguigu')

6. 组件上也可以绑定原生DOM事件，需要使用native修饰符。

7. 注意：通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！

全局事件总线（GlobalEventBus）

1. 一种组件间通信的方式，适用于任意组件间通信。

2. 安装全局事件总线：

   new Vue({
   	......
   	beforeCreate() {
   		Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
   	},
       ......
   }) 
   

3. 使用事件总线：

   1. 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。

      methods(){
        demo(data){......}
      }
      ......
      mounted() {
        this.$bus.$on('xxxx',this.demo)
      }
      

   2. 提供数据：this.$bus.$emit('xxxx',数据)

4. 最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

消息订阅与发布（pubsub）

1. 一种组件间通信的方式，适用于任意组件间通信。

2. 使用步骤：

   1. 安装pubsub：npm i pubsub-js

   2. 引入: import pubsub from 'pubsub-js'

   3. 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。

      methods(){
        demo(data){......}
      }
      ......
      mounted() {
        this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息
      }
      

   4. 提供数据：pubsub.publish('xxx',数据)

   5. 最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去取消订阅。

备注：在Vue中，pubsub用的很少，全局事件总线能实现一样的功能

形参中可用 _ 线占位

nextTick

1. 语法：this.$nextTick(回调函数)
2. 作用：在下一次 DOM 更新结束后执行其指定的回调。
3. 什么时候用：
   • 当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。

Vue封装的过度与动画

1.作用：

• 在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。

2.图示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JsP4vc4o-1641388563505)(C:\Users\DELL\Pictures\Saved Pictures\2.jpg)]

3.写法：

1. 准备好样式：

   • 元素进入的样式：
     1. v-enter：进入的起点
     2. v-enter-active：{ transition：………… }进入过程中
     3. v-enter-to：进入的终点
   • 元素离开的样式：
     1. v-leave：离开的起点
     2. v-leave-active：离开过程中
     3. v-leave-to：离开的终点

2. 使用<transition>包裹要过度的元素，并配置name属性：

   <transition name="hello">
   	<h1 v-show="isShow">你好啊！</h1>
   </transition>
   

3. 备注：若有多个元素需要过度，则需要使用：<transition-group>，且每个元素都要指定key值。

解决跨域问题

1. cors
2. jsonp script src get
3. 代理
   • 服务器和服务器打交道用最传统的http

如何开代理：

• Nginx
• Vue-cli

vue脚手架配置代理

解决跨域问题

方法一

在vue.config.js中添加如下配置：

devServer:{
  proxy:"http://localhost:5000"
}

说明：

1. 优点：配置简单，请求资源时直接发给前端（8080）即可。
2. 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。
3. 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源）

方法二

编写vue.config.js配置具体代理规则：

module.exports = {
	devServer: {
      proxy: {
      '/api1': {// 匹配所有以 '/api1'开头的请求路径
        target: 'http://localhost:5000',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {'^/api1': ''}
      },
      '/api2': {// 匹配所有以 '/api2'开头的请求路径
        target: 'http://localhost:5001',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {'^/api2': ''}
      }
    }
  }
}
/*
   changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
   changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080
   changeOrigin默认值为true
*/

说明：

• 优点：可以配置多个代理，且可以灵活的控制请求是否走代理。

• 缺点：配置略微繁琐，请求资源时必须加前缀。

模板字符串

数据驱动

插槽

1. 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 。

2. 分类：默认插槽、具名插槽、作用域插槽

3. 使用方式：

   1. 默认插槽：

      父组件中：
              <Category>
                 <div>html结构1</div>
              </Category>
      子组件中：
              <template>
                  <div>
                     <!-- 定义插槽 -->
                     <slot>插槽默认内容...</slot>
                  </div>
              </template>
      

   2. 具名插槽：

      父组件中：
              <Category>
                  <template slot="center">
                    <div>html结构1</div>
                  </template>
      
                  <template v-slot:footer>
                     <div>html结构2</div>
                  </template>
              </Category>
      子组件中：
              <template>
                  <div>
                     <!-- 定义插槽 -->
                     <slot name="center">插槽默认内容...</slot>
                     <slot name="footer">插槽默认内容...</slot>
                  </div>
              </template>
      

      slot = " 插槽名称 "

      v- slot = " 插槽名称 "

   3. 作用域插槽：

      1. 理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）

      2. 具体编码：

         父组件中：
         		<Category>
         			<template scope="scopeData"> //第一种写法
         				<!-- 生成的是ul列表 -->
         				<ul>
         					<li v-for="g in scopeData.games" :key="g">{{g}}</li>
         				</ul>
         			</template>
         		</Category>
         
         		<Category>
         			<template slot-scope={games}> //第二种写法
         				<!-- 生成的是h4标题 -->
         				<h4 v-for="g in games" :key="g">{{g}}</h4>
         			</template>
         		</Category>
         子组件中：
                 <template>
                     <div>
                         <slot :games="games"></slot>
                     </div>
                 </template>
         		
                 <script>
                     export default {
                         name:'Category',
                         props:['title'],
                         //数据在子组件自身
                         data() {
                             return {
                                 games:['红色警戒','穿越火线','劲舞团','超级玛丽']
                             }
                         },
                     }
                 </script>
         

scope = " scopeData "

slot-scope = { games }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yQkpvtwG-1641388563506)(C:\Users\DELL\Pictures\Saved Pictures\3.jpg)]

vuex

1.概念

• 在 Vue中实现集中式状态（数据）管理的一个Vue 插件，对 vue 应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

2.何时使用？

多个组件需要共享数据时

• 多个组件依赖于同一状态。
• 来自不同组件的行为需要变更为同一状态。

3.搭建vuex环境

1. 创建文件：src/store/index.js

   //引入Vue核心库
   import Vue from 'vue'
   //引入Vuex
   import Vuex from 'vuex'
   //应用Vuex插件
   Vue.use(Vuex)
   
   //准备actions对象——响应组件中用户的动作
   const actions = {}
   //准备mutations对象——修改state中的数据
   const mutations = {}
   //准备state对象——保存具体的数据
   const state = {}
   
   //创建并暴露store
   export default new Vuex.Store({
   	actions,
   	mutations,
   	state
   })
   

2. 在main.js中创建vm时传入store配置项

   ......
   //引入store
   import store from './store'
   ......
   
   //创建vm
   new Vue({
   	el:'#app',
   	render: h => h(App),
   	store
   })
   

4.基本使用

1. 初始化数据、配置actions、配置mutations，操作文件store.js

   //引入Vue核心库
   import Vue from 'vue'
   //引入Vuex
   import Vuex from 'vuex'
   //引用Vuex
   Vue.use(Vuex)
   
   const actions = {
       //响应组件中加的动作
   	jia(context,value){
   		// console.log('actions中的jia被调用了',miniStore,value)
   		context.commit('JIA',value)
   	},
   }
   
   const mutations = {
       //执行加
   	JIA(state,value){
   		// console.log('mutations中的JIA被调用了',state,value)
   		state.sum += value
   	}
   }
   
   //初始化数据
   const state = {
      sum:0
   }
   
   //创建并暴露store
   export default new Vuex.Store({
   	actions,
   	mutations,
   	state,
   })
   

2. 组件中读取vuex中的数据：$store.state.sum

3. 组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据)或 $store.commit('mutations中的方法名',数据)

   备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接编写commit

5.getters的使用

1. 概念：当state中的数据需要经过加工后再使用时，可以使用getters加工。

   • 可以提高复用率，在不同组件中都能使用。

2. 在store.js中追加getters配置

   ......
   
   const getters = {
   	bigSum(state){
   		return state.sum * 10
   	}
   }
   
   //创建并暴露store
   export default new Vuex.Store({
   	......
   	getters
   })
   

3. 组件中读取数据：$store.getters.bigSum

6.四个map方法的使用

1. mapState方法：用于帮助我们映射state中的数据为计算属性

   computed: {
       //借助mapState生成计算属性：sum、school、subject（对象写法）
        ...mapState({sum:'sum',school:'school',subject:'subject'}),
            
       //借助mapState生成计算属性：sum、school、subject（数组写法）
       ...mapState(['sum','school','subject']),
   },
   

2. mapGetters方法：用于帮助我们映射getters中的数据为计算属性

   computed: {
       //借助mapGetters生成计算属性：bigSum（对象写法）
       ...mapGetters({bigSum:'bigSum'}),
   
       //借助mapGetters生成计算属性：bigSum（数组写法）
       ...mapGetters(['bigSum'])
   },
   

3. mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数

   methods:{
       //靠mapActions生成：incrementOdd、incrementWait（对象形式）
       ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
   
       //靠mapActions生成：incrementOdd、incrementWait（数组形式）
       ...mapActions(['jiaOdd','jiaWait'])
   }
   

4. mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数

   methods:{
       //靠mapActions生成：increment、decrement（对象形式）
       ...mapMutations({increment:'JIA',decrement:'JIAN'}),
       
       //靠mapMutations生成：JIA、JIAN（数组形式）
       ...mapMutations(['JIA','JIAN']),
   }
   

备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。

7.模块化+命名空间

1. 目的：让代码更好维护，让多种数据分类更加明确。

2. 修改store.js

   const countAbout = {
     namespaced:true,//开启命名空间
     state:{x:1},
     mutations: { ... },
     actions: { ... },
     getters: {
       bigSum(state){
          return state.sum * 10
       }
     }
   }
   
   const personAbout = {
     namespaced:true,//开启命名空间
     state:{ ... },
     mutations: { ... },
     actions: { ... }
   }
   
   const store = new Vuex.Store({
     modules: {
       countAbout,
       personAbout
     }
   })
   

3. 开启命名空间后，组件中读取state数据：

   //方式一：自己直接读取
   this.$store.state.personAbout.list
   //方式二：借助mapState读取：
   ...mapState('countAbout',['sum','school','subject']),
   

4. 开启命名空间后，组件中读取getters数据：

   //方式一：自己直接读取
   this.$store.getters['personAbout/firstPersonName']
   //方式二：借助mapGetters读取：
   ...mapGetters('countAbout',['bigSum'])
   

5. 开启命名空间后，组件中调用dispatch

   //方式一：自己直接dispatch
   this.$store.dispatch('personAbout/addPersonWang',person)
   //方式二：借助mapActions：
   ...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
   

   备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。

6. 开启命名空间后，组件中调用commit

   //方式一：自己直接commit
   this.$store.commit('personAbout/ADD_PERSON',person)
   //方式二：借助mapMutations：
   ...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
   

路由

vue-router

• vue 的一个插件库，专门用来实现 SPA 应用

SPA

• 单页web应用
• 整个应用只有一个完整的页面
• 点击页面中的导航链接不会刷新页面，只会做页面的局部更新
• 数据需要通过Ajax请求

路由

• 一个路由就是组映射关系（ key - value ）
• key 为路径， value 可能是 function or component

路由分类

• 后端路由
  • 理解： value是 function ，用于处理客户端提交的请求 。
  • 工作过程： 服务器接收到一个请求时，根据 请求路径 找到匹配的函数来处理请求，返回响应数据
• 前端路由
  • 理解： value 是component ，用于显示页面内容。
  • 工作过程： 当浏览器的路径改变时，对应的组件就会显示。

1.基本使用

1. 安装vue-router，命令：npm i vue-router

2. 应用插件：Vue.use(VueRouter)

3. 编写router配置项:

   //引入VueRouter
   import VueRouter from 'vue-router'
   //引入Luyou 组件
   import About from '../components/About'
   import Home from '../components/Home'
   
   //创建router实例对象，去管理一组一组的路由规则
   const router = new VueRouter({
   	routes:[
   		{
   			path:'/about',
   			component:About
   		},
   		{
   			path:'/home',
   			component:Home
   		}
   	]
   })
   
   //暴露router
   export default router
   

4. 实现切换（active-class可配置高亮样式）

   <router-link active-class="active" to="/about">About</router-link>
   

5. 指定展示位置

   <router-view></router-view>
   

基本使用 <router-link></router-link> ==> <a></a>

若不是<a></a> 呢

2.几个注意点

1. 路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。
2. 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
3. 每个组件都有自己的$route属性，里面存储着自己的路由信息。
4. 整个应用只有一个router，可以通过组件的$router属性获取到。

3.多级路由（多级路由）

1. 配置路由规则，使用children配置项：

   routes:[
   	{
   		path:'/about',
   		component:About,
   	},
   	{
   		path:'/home',
   		component:Home,
   		children:[ //通过children配置子级路由
   			{
   				path:'news', //此处一定不要写：/news
   				component:News
   			},
   			{
   				path:'message',//此处一定不要写：/message
   				component:Message
   			}
   		]
   	}
   ]
   

2. 跳转（要写完整路径）：

   <router-link to="/home/news">News</router-link>
   

4.路由的query参数

1. 传递参数

   <!-- 跳转并携带query参数，to的字符串写法 -->
   <router-link :to="`/home/message/detail?id=${m.id}&title=${m.tittle}`">跳转</router-link>
   				
   <!-- 跳转并携带query参数，to的对象写法 -->
   <router-link 
   	:to="{
   		path:'/home/message/detail',
   		query:{
   		   id: 666,
              title: '你好'
   		}
   	}"
   >
   跳转
   </router-link>
   

2. 接收参数：

   $route.query.id
   $route.query.title
   

5.命名路由

1. 作用：可以简化路由的跳转。

2. 如何使用

   1. 给路由命名：

      {
      	path:'/demo',
      	component:Demo,
      	children:[
      		{
      			path:'test',
      			component:Test,
      			children:[
      				{
                          name:'hello' //给路由命名
      					path:'welcome',
      					component:Hello,
      				}
      			]
      		}
      	]
      }
      

   2. 简化跳转：

      <!--简化前，需要写完整的路径 -->
      <router-link to="/demo/test/welcome">跳转</router-link>
      
      <!--简化后，直接通过名字跳转 -->
      <router-link :to="{name:'hello'}">跳转</router-link>
      
      <!--简化写法配合传递参数 -->
      <router-link 
      	:to="{
      		name:'hello',
      		query:{
      		   id:666,
                  title:'你好'
      		}
      	}"
      >跳转</router-link>
      

6.路由的params参数

1. 配置路由，声明接收params参数

   {
   	path:'/home',
   	component:Home,
   	children:[
   		{
   			path:'news',
   			component:News
   		},
   		{
   			component:Message,
   			children:[
   				{
   					name:'xiangqing',
   					path:'detail/:id/:title', //使用占位符声明接收params参数
   					component:Detail
   				}
   			]
   		}
   	]
   }
   

2. 传递参数

   <!-- 跳转并携带params参数，to的字符串写法 -->
   <router-link :to="/home/message/detail/666/你好">跳转</router-link>
   				
   <!-- 跳转并携带params参数，to的对象写法 -->
   <router-link 
   	:to="{
   		name:'xiangqing',  //只能用name ，不能用path
   		params:{
   		   id:666,
               title:'你好'
   		}
   	}"
   >跳转</router-link>
   

   特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！

3. 接收参数：

   $route.params.id
   $route.params.title
   

router-link 传参数给 router-view

7.路由的props配置

作用：让路由组件更方便的收到参数

{
	name:'xiangqing',
	path:'detail/:id',
	component:Detail,

	//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
	// props:{a:900}

	//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
	// props:true
	
	//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
	props($route){
		return {
			id:$route.query.id,
			title:$route.query.title
		}
	}
}

哪个路由组件需要参数，就配置在哪个路由里

8.<router-link>的replace属性

1. 作用：控制路由跳转时操作浏览器历史记录的模式
2. 浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push
3. 如何开启replace模式：<router-link replace .......>News</router-link>

9.编程式路由导航

1. 作用：不借助<router-link>实现路由跳转，让路由跳转更加灵活

2. 具体编码：

   借助 $router 的两个API

   
   this.$router.push({
   	name:'xiangqing',
   		params:{
   			id:xxx,
   			title:xxx
   		}
   })
   
   this.$router.replace({
   	name:'xiangqing',
   		params:{
   			id:xxx,
   			title:xxx
   		}
   })
   this.$router.forward() //前进
   this.$router.back() //后退
   this.$router.go() //可前进也可后退
   

10.缓存路由组件

1. 作用：让不展示的路由组件保持挂载，不被销毁。

2. 具体编码：

   <keep-alive include="News"> 
       <router-view></router-view>
   </keep-alive>
   

上面的News为要展示的路由组件的名称

如果要缓存多个，可以用数组， : include=“ [ " xxx " , " xxx " ] ”

11.两个新的生命周期钩子

1. 作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。 失活不是销毁

2. 具体名字：

   1. activated路由组件被激活时触发。
   2. deactivated路由组件失活时触发。

12.路由守卫

1. 作用：对路由进行权限控制

2. 分类：全局守卫、独享守卫、组件内守卫

3. 全局守卫:

   //全局前置守卫：初始化时执行、每次路由切换前执行
   router.beforeEach((to,from,next)=>{
   	console.log('beforeEach',to,from)
   	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
   		if(localStorage.getItem('school') === 'atguigu'){ //权限控制的具体规则
   			next() //放行
   		}else{
   			alert('暂无权限查看')
   			// next({name:'guanyu'})
   		}
   	}else{
   		next() //放行
   	}
   })
   
   //全局后置守卫：初始化时执行、每次路由切换后执行
   router.afterEach((to,from)=>{
   	console.log('afterEach',to,from)
   	if(to.meta.title){ 
   		document.title = to.meta.title //修改网页的title
   	}else{
   		document.title = 'vue_test'
   	}
   })
   

   全局后置守卫用的很少。

4. 独享守卫:

   只有 beforeEnter

   beforeEnter(to,from,next){
   	console.log('beforeEnter',to,from)
   	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
   		if(localStorage.getItem('school') === 'atguigu'){
   			next()
   		}else{
   			alert('暂无权限查看')
   			// next({name:'guanyu'})
   		}
   	}else{
   		next()
   	}
   }
   

5. 组件内守卫：

   //进入守卫：通过路由规则，进入该组件时被调用
   beforeRouteEnter (to, from, next) {
   },
   //离开守卫：通过路由规则，离开该组件时被调用
   beforeRouteLeave (to, from, next) {
   }
   

   如果组件里想单独写些独有的逻辑，可使用组件内守卫

13.路由器的两种工作模式

1. 对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。
2. hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。
3. hash模式：
   1. 地址中永远带着#号，不美观 。
   2. 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
   3. 兼容性较好。
4. history模式：
   1. 地址干净，美观 。
   2. 兼容性和hash模式相比略差。
   3. 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。

​

组件所独有的两个钩子，用于捕获路由组件的激活状态。** 失活不是销毁

2. 具体名字：
   1. activated路由组件被激活时触发。
   2. deactivated路由组件失活时触发。

12.路由守卫

1. 作用：对路由进行权限控制

2. 分类：全局守卫、独享守卫、组件内守卫

3. 全局守卫:

   //全局前置守卫：初始化时执行、每次路由切换前执行
   router.beforeEach((to,from,next)=>{
   	console.log('beforeEach',to,from)
   	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
   		if(localStorage.getItem('school') === 'atguigu'){ //权限控制的具体规则
   			next() //放行
   		}else{
   			alert('暂无权限查看')
   			// next({name:'guanyu'})
   		}
   	}else{
   		next() //放行
   	}
   })
   
   //全局后置守卫：初始化时执行、每次路由切换后执行
   router.afterEach((to,from)=>{
   	console.log('afterEach',to,from)
   	if(to.meta.title){ 
   		document.title = to.meta.title //修改网页的title
   	}else{
   		document.title = 'vue_test'
   	}
   })
   

   全局后置守卫用的很少。

4. 独享守卫:

   只有 beforeEnter

   beforeEnter(to,from,next){
   	console.log('beforeEnter',to,from)
   	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
   		if(localStorage.getItem('school') === 'atguigu'){
   			next()
   		}else{
   			alert('暂无权限查看')
   			// next({name:'guanyu'})
   		}
   	}else{
   		next()
   	}
   }
   

5. 组件内守卫：

   //进入守卫：通过路由规则，进入该组件时被调用
   beforeRouteEnter (to, from, next) {
   },
   //离开守卫：通过路由规则，离开该组件时被调用
   beforeRouteLeave (to, from, next) {
   }
   

   如果组件里想单独写些独有的逻辑，可使用组件内守卫

13.路由器的两种工作模式

1. 对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。
2. hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。
3. hash模式：
   1. 地址中永远带着#号，不美观 。
   2. 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
   3. 兼容性较好。
4. history模式：
   1. 地址干净，美观 。
   2. 兼容性和hash模式相比略差。
   3. 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。

​