vue的重点难点（壹万多字的Vue知识点）(1)

1⃣️、Vue和其他两大框架的区别
️2⃣️、Vue是什么
️3⃣️、MVVM
️4⃣️、Vue指令️4⃣️.️1⃣️ v-text

说明: 文本数据渲染 用法: v-text = "Vue实例中的数据" => 简写 {{Vue实例中的数据}}

相当于JavaScript中的innerText

️4⃣️.️1⃣️.️2⃣️ v-text指令 和 {{ }}插值表达式 的区别️4⃣️.️2⃣️ v-html

说明: HTML渲染数据 用法:v-html = "Vue实例中的数据" 会解析html结构 渲染至页面

相当于JavaScript中的innerHTML

️4⃣️.️2⃣️.️1⃣️ v-html指令 和 v-text指令的区别

注意: 在网站上动态渲染任意的 HTML 是非常危险的!!! 因为容易导致 XSS 攻击 只在可信内容上使用 v-html 绝对不要用在用户通过(提交)的内容上使用

️4⃣️.️3⃣️ v-on

说明: 事件绑定(绑定事件监听器) 用法: v-on:事件名 = "事件处理函数" => 简写 @事件名 = "事件处理函数"

️4⃣️.️3⃣️.️1⃣️ 详细用法

$event.target 获取当前事件触发的DOM元素 $event.path[0](el.path[0]) 也可以获取当前事件触发的DOM元素 path数组中有从触发事件源的元素的所有上一级元素 直到window 实参不传递(没有任何参数) 默认在形参中第一个就是事件参数实参传递 就必须传递$event 来获取获取事件参数

️4⃣️.️3⃣️.️2⃣️ 事件修饰符

面试问及

之前在使用饿了么UI的时候给一个组件添加一个原生的事件 但是一直触发不了 后面查阅文档发现这个组件内部并没有注册我使用的原生事件 事件修饰符.native就可以直接监听并触发组件的原生事件

️4⃣️.️4⃣️ v-bind

说明: 属性绑定(行内属性) 用法: v-bind:属性名="Vue实例中的数据" => 简写 :属性名="Vue实例中的数据" 当Vue实例中的数据改变之后 页面会同步更新

️4⃣️.️4⃣️.1⃣️ 属性绑定修饰符️4⃣️.️4⃣️.2⃣️ 对象的方式绑定class

isRed = true 就有red这个类 isRed = false 就没有red这个类 isRed 在 Vue 实例data中声明

class = "red" :class = "{'yellow' : isYellow}"

️4⃣️.️4⃣️.3⃣️ 对象的方式绑定style️4⃣️.️5⃣️ v-model

说明: 双向数据绑定 用法: v-model = "Vue实例中的数据"

️4⃣️.️5⃣️.️1⃣️ 双向️4⃣️.️5⃣️.️2⃣️ 双向绑定修饰符

注意: v-model 只能设置给from表单属性

️4⃣️.️6⃣️ v-for

说明: 循环渲染 用法: v-for = "(item,index) in items" :key = "index"

items是源数据数组 item是被迭代的数组元素的别名 index是被迭代的数组元素的下标(索引)

️4⃣️.️6⃣️.️1⃣️ :key️4⃣️.️6⃣️.️2⃣️ 遍历数组注意点

push() pop() shift() unshift() splice() sort() reverse() ...

这种修改数组中的元素是无法实现数据改变后页面会同步改变(只会修改data中的数据 但是页面不会同步改变)

️4⃣️.️7⃣️ v-if,v-else,v-else-if

说明: 条件(表达式或布尔值)判断渲染 用法: v-if = "表达式或布尔值" v-else-if = "表达式或布尔值" v-else

️4⃣️.️7⃣️.️1⃣️ 注意

v-if 和 v-else-if 后面必须跟表达式或布尔值 v-else-if 和 v-else 不能独立使用 必须跟在 v-if 后面

️4⃣️.️8⃣️ v-show

说明: 条件渲染 用法: v-show = "表达式或布尔值" 根据表达式或布尔值的真假切换元素的display属性

️4⃣️.️8⃣️.️1⃣️ 注意

v-show 不支持 <template>元素 也不支持 v-else

️4⃣️.️9⃣️ v-if vs v-show

都是用来判断渲染数据的

1.有较高的切换性能消耗 2.惰性渲染 第一次如果条件为false 则不会渲染到页面 需要等后面条件切换后才会进行第一次渲染 3.条件切换是切换DOM数中这个元素的移除或添加 4.如果运行时条件很少改变则使用v-if

1.有较高的初始渲染消耗 2.初始渲染 不管条件 第一次加载页面的时候都会渲染到页面 3.条件切换只是切换元素的display属性 4.如果运行时条件会非常频繁的切换则使用v-show

️4⃣️.️️1⃣️0⃣️ v-cloak

说明: 这个指令保存在这个元素上 直到关联实例结束编译

️4⃣️.️️1⃣️0⃣️.️1⃣️ 详细说明

插值表达式在网络较满的情况下可能会出现数据闪烁问题 可以通过给实例(#app)盒子添加一个 v-cloak 指令 通过这个指令的特性(如页面中还有插值表达式就会存在这个指令 如果页面的插值表达式都被替换成数据 就会自动移除这个标签) 配合css [v-cloak]{display:none|opacity:0}来解决数据闪烁的问题

️4⃣️.️️1⃣️1⃣️ v-once

说明: 这个指令添加的元素 内部的胡子语法只会在第一次渲染的时候执行解析一次 后面数据发生改变后也不会触发更新

️4⃣️.️️1⃣️1⃣️.️1⃣️ 用途

某些元素只需要解析一次 后续不需要更新 就可以使用这个指令 提升性能

️5⃣️、Vue实例️5⃣️.️1⃣️ el️5⃣️.️2⃣️ data️5⃣️.️3⃣️ methods️5⃣️.️4⃣️ computed

1.使用get和set函数 需要把计算属性函数改成计算属性对象 2.计算属性默认执行get方法(根据相关的数据计算返回当前属性的值) 3.当计算数学值自身改变后执行set方法 4.可以用来计算税前和税后的互推算

️5⃣️.️5⃣️ watch

watch:{ XXX:{ deep:true, handler(newVal,oldVal){ // 处理代码 } } }

watch: { // watch里面的 $router 这些对象前面不要带this "$route.path"(newVal, oldVal) { if (newVal.indexOf("/login") >= 0) { this.welcom = "欢迎登陆"; } if (newVal.indexOf("/register") >= 0) { this.welcom = "欢迎注册"; } } }

watch: { $route: function(newVal,oldVal) { console.log(this.$route.path); } }

1.侦听器用来检测数据的改变 2.当侦听的那个数据发生改变后就会触发侦听器中的对应函数 3.一般我更多的使用是用侦听路由的变化 => 重新获取数据(如搜索在对应的router-view中显示对应的数据) 4.之前碰到过一个坑点 侦听器默认无法侦听复杂数据类型 5.后面使用深度侦听 depp:true 来解决了这个问题 6.或者侦听精确到对象中的那个值也可

️5⃣️.️6⃣️ computed和watch的区别️5⃣️.️7⃣️ components️5⃣️.️8⃣️ filters

Vue.filter("formatData", (形参=管道符前面的数据,形参=想要传入的数据...) => { 处理数据； `返回`处理之后的数据 });

filters:{ formatTime(形参=管道符前面的数据,形参=想要传入的数据...){ 处理数据； `返回`处理之后的数据 } }

️6⃣️、Vue实例中的this
️7⃣️、Vue实例属性️7⃣️.️1⃣️ vm.$data

获取data中的所有数据

️7⃣️.️2⃣️ vm.$options

用于当前Vue实例的初始化选项 可以获取自定义选项

new Vue({ customOption: 'foo', created: function () { console.log(this.$options.customOption) // => 'foo' } })

️7⃣️.️3⃣️ vm.$refs
️8⃣️、Vue组件️8⃣️.️1⃣️ 什么是组件

组件的出现就是为了拆分Vue实例的代码量 能够让我们以不同的组件来划分不同的功能模块 需要什么功能就去调用对应的模块即可 局部功能界面

️8⃣️.️2⃣️ 组件化和模块化的区别️8⃣️.️3⃣️ 全局组件️8⃣️.️3⃣️.️1⃣️ 用法

Vue.component('组件名',{参数})

️8⃣️.️3⃣️.️2⃣️ 注意

组件名请使用小写 大写需要驼峰命名法

Vue.component('sayHiBaby',{参数}) 页面中标签使用 <say-hi-baby></say-hi-baby>

️8⃣️.️3⃣️.️3⃣️ 组件参数

父向子传参 通过 props 向子组件传递数据 可以在组件实例中通过 this.xxx 拿到传递过来的值 高级写法(props验证)

props:{ xxx:{ // 数据类型 type:"String", // 必须传递 required:"true", // 默认值 default:"mystring" .... } }

props可以传递任何数据类型 包括函数

为什么组件的data是一个函数 而Vue实例的data是一个对象?

1.每一个Vue组件都是一个Vue实例 2.都是通过new Vue() 创建出来的 3.如果data是一个对象的话 那么这些组件的引用指向就会相同 4.一个的值修改后 其他的值也会修改(这是JavaScript语法的特性) 5.如果data是一个函数 函数中再返回一个对象 6.那么每个Vue组件都有了自己的作用域 互不干扰

️9⃣️、Vue生命周期钩子

Vue生命周期钩子 || Vue生命周期函数 Vue提供给开发者一系列的回调函数 让我们可以在Vue的各个阶段添加自定义的逻辑处理

️9⃣️.️1⃣️ 三大阶段️9⃣️.️1⃣️.️1⃣️ 初始化显示

创建期间的生命周期函数(1次)

Vue渲染解析插值表达式 并不是在页面中直接渲染解析 而是将整个挂载在Vue实例的模版 拿到内存中去解析 等全部解析完成后 再一次性的渲染到页面(批量) (因为有可能页面中有很多一样的data中的值 如果是在页面中直接渲染解析会很耗性能)

️9⃣️.️1⃣️.️2⃣️ 更新显示

运行期间的生命周期函数(0次-多次)

️9⃣️.️1⃣️.️3⃣️ 销毁

销毁期间的生命周期函数(1次)

想要销毁Vue实例 调用 vm.$destroy() 即可 注意: 这个方法方法并不会销毁Vue实例的一些如 定时器或计时器等方法 会造成 '内存泄漏' 所以在完全销毁之前 需要在 beforeDestory 钩子中清除定时器等...

️️1⃣️0⃣️、父子组件传参️️1⃣️0⃣️.️1⃣️ 父传子️️1⃣️0⃣️.️2⃣️ 子传父
️️1⃣️1⃣️、VueRouter️️1⃣️1⃣️.️1⃣️ 前端路由

url地址和组件之间的关系

️️1⃣️1⃣️.️2⃣️ 如果是模块工程化(VueCLI)中使用VueRouter

必须添加 Vue.use(VueRouter)

import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)

️️1⃣️1⃣️.️3⃣️ 路由起步代码️️1⃣️1⃣️.️3⃣️.️1⃣️ HTML

<router-link to="/login" tag="span">登陆</router-link> <router-link to="/logout" tag="span">注册</router-link>

<router-view></router-view>

️️1⃣️1⃣️.️3⃣️.️2⃣️ JavaScript

const login = { template: "#tempLogin" }; const logout = { template: "#tempLogout" };

const routes = [ { path: "/login", component: login }, { path: "/logout", component: logout } ];

const router = new VueRouter({ routes });

new Vue({ el:"xxx", router })

️️1⃣️1⃣️.️4⃣️ 路由高亮

设置路由匹配成功后 router-link 的样式属性

/login => /login/user 触发 添加样式

/login/user => /login/user 触发 添加样式

️️1⃣️1⃣️.️5⃣️ 声明式导航

点了跳转 没有任何逻辑 类似于(a标签设置了href) <router-link to="地址">XXX</router-link>

️️1⃣️1⃣️.️6⃣️ 编程式导航

跳转的同时执行其他需要执行的逻辑 router.push('地址')

️️1⃣️1⃣️.️7⃣️ 动态路由匹配️️1⃣️1⃣️.️8⃣️ 路由重定向️️1⃣️1⃣️.️9⃣️ 前置导航守卫

const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... next() })

to

去哪个路由 一般通过to来判断对应路由做对应处理

from

来自哪个路由

next()

必须next()才可以继续跳转页面(像node"express"里面的中间件)

1.判断登陆状态 如判断token... 2.可以在跳转路由时先判断这个页面这个用户是否有权限访问... 3.可以每次路由跳转前都提示用户跳转至什么页面...

️️1⃣️1⃣️.️️1⃣️0⃣️ 路由元信息️️1⃣️1⃣️.️️1⃣️1⃣️ 嵌套路由

{ path: '/user', component: User, children: [ { path: 'index', component: Index } ] }

️️1⃣️1⃣️.️1⃣️2⃣️ 统一404页面

配置错误路由规则

️️1⃣️1⃣️.️1⃣️3⃣️ 路由懒加载
️️1⃣️2⃣️、资源请求️️1⃣️2⃣️.️1⃣️ Axios️️1⃣️2⃣️.️1⃣️.️1⃣️ Axios是什么?

Axios是一个基于 promise(实现了链式调用) 的 HTTP 库 可以用在浏览器和 Node.js 中 专注于发请求 专注于网络请求的一个库`

️️1⃣️2⃣️.️1⃣️.️2⃣️ CDN

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

️️1⃣️2⃣️.️1⃣️.️3⃣️ .then

成功回调

️️1⃣️2⃣️.️1⃣️.️4⃣️ .catch

失败回调

️️1⃣️2⃣️.️1⃣️.️5⃣️ get请求

// 为给定 ID 的 user 创建请求 axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // 可选地，上面的请求可以这样做 axios.get('/user', { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });

️️1⃣️2⃣️.️1⃣️.️6⃣️ post请求

axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });

️️1⃣️2⃣️.️1⃣️.️7⃣️ 基地址

基础的地址应用 没有必要每次都写 可以直接抽离出来

axios.defaults.baseURL = '设置的基地址' Vue.prototype.$axios = axios

axios填写路径时后面直接写对应的路径即可 前面的公共部分不需在写(写了也不会影响)

️️1⃣️2⃣️.️1⃣️.️8⃣️ 设置跨域携带cookie

axios.defaults.withCredentials = true

️️1⃣️2⃣️.️1⃣️.️8⃣️.️1⃣️ 面试问及️️1⃣️2⃣️.️1⃣️.️9⃣️ 创建克隆对象 多基地址设置

const xxx = axios.create({ // 即地址 baseURL: 'https://some-domain.com/api/', // 可以统一设置请求头 headers: {Authorization: token} }); xxx.get() xxx.post()

️️1⃣️2⃣️.️1⃣️.️1⃣️0⃣️ Axios拦截器️️1⃣️2⃣️.️1⃣️.️1⃣️0⃣️.️1⃣️ 请求拦截器

axios.interceptors.request.use(function (config) { // 可以在发请求之前在这里设置一些请求头 `config.headers.Authorization=token` return config; }, function (error) { // Do something with request error return Promise.reject(error); });

️️1⃣️2⃣️.️1⃣️.️1⃣️0⃣️.️2⃣️ 响应拦截器

axios.interceptors.response.use(function (response) { // 可以在获取响应数据之后设置一些提示 如获取失败/成功 `response.data.code == 200?` return response; }, function (error) { // Do something with response error return Promise.reject(error); });

️️1⃣️2⃣️.️2⃣️ vue-resource

vue-resource已经不再更新 推荐使用Axios

️️1⃣️3⃣️、Vue动画钩子️️1⃣️3⃣️.️1⃣️ Vue动画钩子是什么?

Vue提供的让程序员可以在动画的各个时机 添加 自定义逻辑 的钩子 也可称之为 动画钩子或动画函数

️️1⃣️3⃣️.️2⃣️ Vue动画的理解

// 指定显示的transition xxx-enter-active // 指定隐藏的transition xxx-leave-active // 指定隐藏时的样式 xxx-enter/xxx-leave-to

️️1⃣️3⃣️.️3⃣️ 单个元素动画

transition标签包裹

️️1⃣️3⃣️.️4⃣️ 列表过渡动画

transition-group标签包裹

️️1⃣️3⃣️.️5⃣️ name

动画样式的开始类名

️️1⃣️3⃣️.️6⃣️ tag

解析为的标签名

️️1⃣️3⃣️.️7⃣️ 过渡类名参数️️1⃣️3⃣️.️8⃣️ 动画时机️️1⃣️3⃣️.️9⃣️ 动画钩子代码️️1⃣️3⃣️.️9⃣️.️1⃣️ HTML

<transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter" v-on:enter-cancelled="enterCancelled" v-on:before-leave="beforeLeave" v-on:leave="leave" v-on:after-leave="afterLeave" v-on:leave-cancelled="leaveCancelled" > <!-- ... --> </transition>

️️1⃣️3⃣️.️9⃣️.️2⃣️ JavaScript

// ... methods: { // -------- // 进入中 // -------- beforeEnter: function (el) { // ... }, // 当与 CSS 结合使用时 // 回调函数 done 是可选的 enter: function (el, done) { // ... done() }, afterEnter: function (el) { // ... }, enterCancelled: function (el) { // ... }, // -------- // 离开时 // -------- beforeLeave: function (el) { // ... }, // 当与 CSS 结合使用时 // 回调函数 done 是可选的 leave: function (el, done) { // ... done() }, afterLeave: function (el) { // ... }, // leaveCancelled 只用于 v-show 中 leaveCancelled: function (el) { // ... } }

️️1⃣️3⃣️.️️1⃣️0⃣️ 过渡动画生命周期

vue的重点难点（壹万多字的Vue知识点）(2)

vue的重点难点（壹万多字的Vue知识点）(3)

️️1⃣️4⃣️、VueX️️1⃣️4⃣️.1⃣️ Vuex是什么?️️1⃣️4⃣️.2⃣️ 起步️️1⃣️4⃣️.2⃣️.1⃣️ 下载

npm install vuex --save

️️1⃣️4⃣️.2⃣️.2⃣️ 创建VueX仓库

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { // 数据 count: 0 }, mutations: { // 方法 increment (state) { state.count } } }) new Vue({ el:xxx, // 挂载到Vue实例上 store })

️️1⃣️4⃣️.2⃣️.3⃣️ 在组件中获取VueX的数据️️1⃣️4⃣️.2⃣️.4⃣️ 在组件中修改VueX的数据️️1⃣️4⃣️.3⃣️ VueX - state️️1⃣️4⃣️.4⃣️ VueX - mutation
️️1⃣️5⃣️、VueCLI️️1⃣️5⃣️.1⃣️ 单文件组件️️1⃣️5⃣️.1⃣️.1⃣️ 用一个文件能够包含组件的所有内容

<template> </template>

<script> export default { } </script>

<style> </style>

️️1⃣️5⃣️.1⃣️.2⃣️ 单文件开发的好处️️1⃣️5⃣️.2⃣️ 什么是Vue-CLI

把很多开发中需要用到的功能整合到了一起 让Vue开发人员专注于逻辑代码即可 是用webpack配置出来的

️️1⃣️5⃣️.3⃣️ 搭建一个脚手架

vue create 项目名 <= 项目名不要有中文!!!不要大些 cd 项目名 npm run serve

️️1⃣️5⃣️.4⃣️ Vue-CLI搭建项目的本质1⃣️5⃣️.5⃣️ Vue-cli项目结构

vue的重点难点（壹万多字的Vue知识点）(4)

1⃣️5⃣️.6⃣️ 搭建webpack-vue脚手架(详细版本)

npm init webpack "项目名" cd "项目名" npm instal npm run dev

最后一步选 No, I will handle that myself 自己再npm i 下载速度会快一点

vue的重点难点（壹万多字的Vue知识点）(5)

1⃣️5⃣️.7⃣️ webpack-vue项目结构

|-- build : webpack 相关的配置文件夹(基本不需要修改) |-- dev-server.js : 通过 express 启动后台服务器 |-- config: webpack 相关的配置文件夹(基本不需要修改) |-- index.js: 指定的后台服务的端口号和静态资源文件夹 |-- node_modules |-- src : 源码文件夹 |-- components: vue 组件及其相关资源文件夹 |-- App.vue: 应用根主组件 |-- main.js: 应用入口 js |-- static: 静态资源文件夹 |-- .babelrc: babel 的配置文件 |-- .eslintignore: eslint 检查忽略的配置 |-- .eslintrc.js: eslint 检查的配置 |-- .gitignore: git 版本管制忽略的配置 |-- index.html: 主页面文件 |-- package.json: 应用包配置文件 |-- README.md: 应用描述说明的 readme 文件

1⃣️5⃣️.8⃣️ Vue-CLI项目编码1⃣️5⃣️.8⃣️.1⃣️ 编码位置1⃣️5⃣️.8⃣️.2⃣️ 引入css1⃣️5⃣️.8⃣️.3⃣️ 注册组件1⃣️5⃣️.8⃣️.4⃣️ 整合路由1⃣️5⃣️.8⃣️.4⃣️.1⃣️ 下包

npm install vue-router

1⃣️5⃣️.8⃣️.4⃣️.2⃣️ 导包

import VueRouter from 'vue-router'

1⃣️5⃣️.8⃣️.4⃣️.3⃣️ 用包

`const router = new VueRouter({ routes })`

`new Vue({ router })`

1⃣️5⃣️.8⃣️.4⃣️.4⃣️ 编码位置1⃣️5⃣️.9⃣️ 在Vue中使用其他插件1⃣️5⃣️.9⃣️.1⃣️ 面试问及1⃣️5⃣️.1⃣️0⃣️ css预处理与css作用域1⃣️5⃣️.1⃣️0⃣️.1⃣️ css预处理1⃣️5⃣️.1⃣️0⃣️.1⃣️.1⃣️使用less1⃣️5⃣️.1⃣️0⃣️.1⃣️.2⃣️ 使用sass1⃣️5⃣️.1⃣️0⃣️.2⃣️ css作用域

为元素添加随机属性 样式中添加属性选择器 2者结合 就把css的作用范围 约束

1⃣️5⃣️.1⃣️1⃣️ ES6模块化语法1⃣️5⃣️.1⃣️1⃣️.1⃣️ 默认导出导入1⃣️5⃣️.1⃣️1⃣️.2⃣️ 按名字导出导入1⃣️5⃣️.1⃣️2⃣️ Vue全家桶

饿了么前端团队开发的PC端的基于Vue的组件 内部封装了很多现成的组件 在VueCLI中使用elementUI npm i element-ui import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) 有些组件并没有在组件内部使用原生事件 但是有些情况需要一些原生事件 就可以使用.native修饰符来触发

️️1⃣️6⃣️、扩展️️1⃣️6⃣️.1⃣️ link 和 @import 的区别️️1⃣️6⃣️.1⃣️.1⃣️ link️️1⃣️6⃣️.1⃣️.2⃣️ @import️️1⃣️6⃣️.2⃣️ JavaScript数组方法

返回所有匹配成功的值 创建一个新数组, 其包含通过所提供函数实现的测试的所有元素 (数组过滤)

const oldArr = ["dajsk", "dkjdklas", "kgjftlk", "ksf", "ds", "mfksjjks"]; let res = oldArr.filter((val, index) => val.indexOf("d") != -1); // 返回所有匹配成功的值 console.log(res); // [ 'dajsk', 'dkjdklas', 'ds' ]

返回匹配的第一个值 返回数组中满足提供的测试函数的第一个元素的值 没有匹配成功返回undefined

const oldArr = ["dajsk", "dkjdklas", "kgjftlk", "ksf", "ds", "mfksjjks"]; let res1 = oldArr.find((val, index) => val.indexOf("d") != -1); // 返回匹配的第一个值 console.log(res1); // dajsk

将匹配成功的值做对应的计算后再次返回 创建一个新数组 其结果是该数组中的每个元素都调用一个提供的函数后返回的结果

const oldArrMap = [3, 4, 7, 1, 8, 5]; let res2 = oldArrMap.map((val, index) => { // 将匹配成功的值做对应的计算后再次返回 if (val > 5) { val = val * 2; } return val; }); console.log(res2); // [ 3, 4, 14, 1, 16, 5 ]

因为这些方法都是返回的新数组 并没有覆盖原来的数组所以可以继续链式调用数组的方法继续过滤

遍历数组 方法对数组的每个元素执行一次提供的函数

const oldArrForEach = [3, 6, 8, 2, 8, 0]; let num = 0; oldArrForEach.forEach((val, index) => { num = val; }); console.log(num); // 27 oldArrForEach.forEach((val, index) => { if (index == 2) return console.log(val); // 8 });

️️1⃣️6⃣️.3⃣️ 解决跨域方案

注意 需要在浏览器声明callback去的函数 需要在script请求前声明 兼容性强 只能发送get请求

️️1⃣️6⃣️.4⃣️ 接口的请求方法和restful api

网络请求设计方法时 考虑到数据的操作主要：增删改查 方法的命名可以体现这个操作 一般常用的就是get和post

  1. GET（SELECT）：从服务器取出资源（一项或多项）.
  2. POST（CREATE）：在服务器新建一个资源.
  3. PUT（UPDATE）：在服务器更新资源（客户端提供改变后的完整资源）.
  4. PATCH（UPDATE）：在服务器更新资源（客户端提供改变的属性）.
  5. DELETE（DELETE）：从服务器删除资源.
  6. HEAD：获取资源的元数据.
  7. OPTIONS：获取信息，关于资源的哪些属性是客户端可以改变的.
️️1⃣️6⃣️.5⃣️ Cookie、Session、token、localStorage、sessionStorage️️1⃣️6⃣️.5⃣️.1⃣️ Cookie

每次请求 浏览器和服务器交互完毕后 彼此并没有留下什么 继续请求 也无法判断你是谁 如登陆功能 为了能够保存一些信息 服务器返回响应报文时 会偷偷的带一个响应头 作用是在浏览器中偷偷保存一些信息set-cookie 浏览器接收到这个响应头后 会在本地保存这个响应头 第二次请求时 浏览器就会自动带上这个信息去服务器 服务器接收到这个信息 就知道你是谁了 ajax跨域请求 默认不携带cookie 需要设置 跨域cookie在浏览器中无法看到 需要抓包

️️1⃣️6⃣️.5⃣️.2⃣️ Session

Seesion 是将用户数据存储在服务器中 通过sessionId来验证查找服务器中的用户信息 sessionId一般是存放在浏览器的cookie中的

所以Session需要配合浏览器的cookie或者浏览器的其他存储技术一起使用

️️1⃣️6⃣️.5⃣️.3⃣️ token

和cookie差不多 也可以记录登陆状态 服务器生成的 通过用户浏览器版本、用户信息...生成的一个密钥

浏览器不会自动保存 可以接口本地存储来保存token 浏览器不会自动携带发送 每次请求接口时可以通过headers携带存储的token headers{ Authorization ：token }

️️1⃣️6⃣️.5⃣️.4⃣️ localStorage

可以把数据存储到本地(浏览器) 只要用户不删除 则会一直保存 每个域名都是独立的保存数据 不同域名不能互相访问 长久保存数据可以存储到 localStorage 可以存储5M数据

️️1⃣️6⃣️.5⃣️.5⃣️ sessionStorage

短暂存储数据 可以多页面传值 相当于localStorage会更安全 浏览器关闭后就不会保存了 可以存储5M数据

️️1⃣️7⃣️、Xmind笔记

vue的重点难点（壹万多字的Vue知识点）(6)

很多都是自己的话去解释和理解 可能会存在错误 或者有错别字 欢迎指出谢谢

若有感兴趣的小伙伴，需要VUE学习文档思维导图原图的，关注我，私信回复获取：VUE学习文档思维导图

作者：蓝海00转载链接：https://www.jianshu.com/p/125ce0c89603

,