复习

以下是默认值的基本写法

let [a=2,b=3]=[undefined,null]
这个undefined是不存在，null则是值为空
a//2
b//null

let {name,age}={name:'xxx',age:18}
name//'xxx'
age//18

function add([a,b]=[1,2]){
return a+b
add()//3

function sun({x,y}={x:0,y:0},{a=1,b=1}){
return [x+a,y+b]
}
sum({x:1,y:2},{a:2})//[3,3]

function max(arr){
return Math.max(...arr)}
max([1,3,5,2])//5

let ps =document.querySelectorAll('p')
Array.from(ps).forEach(p=>{console.log(p.innerText)})
等价于 //扩展运算符可以转换成数组
[...ps].forEach(p+>{console.log(p.innerText)})

function sayHi(name='xxx'){
console.log('hi,${name}')
}
sayHi()//调用undefined 执行默认值xxx
sayHi('jack')//hi,jack

function m1({x=0,y=0}={}){
return [x,y]
}
function me({x,y}={x:0,y:0}){
return [x,y]
}
//函数没有参数时
m1()//[0,0]
m2()//[0,0]
//x和y都有值得情况
m1({x:3,y:8})//[3,8]
//x有值，y无值得情况
m1({x:3})//[3,0]
m2({x:3})//[3,undefind]
//x，y都没有值
m1({})//[0,0]
m2({})//[undefind,undefind]

class

class preson{
constructor(name,age){
this.name=name
this.age=age
}
}
sayHi(){
console.log('hi我是',${this.name}，'我今年'${this.age})
}

写css

被选中的router-link的颜色
.icons .router-link-active {
  background-color: #5e6266;
}

 input:focus {
        border: 3px solid #9dcaf8;
      }

type='password'能给input加一个隐藏密码的小眼睛
<input type="password" placeholder="密码">

正则表达式

表达创建账号时输入的用户名范围，和3-15个字符

用户名：
 if (!/^[\w\u4e00-\u9fa5]{3,15}$/.test(this.login.username))
密码：
 if (!/^.{6,16}$/.test(this.login.password))

18510468962

@keyup.enter

用户输入完密码可能会回车，input上监听一个@keyup.enter键盘事件，执行的函数与点击注册或登录时的检查账号密码一致

baseURL

这东西是多个URL的公共前缀，封装一个request的函数，接受三个(url,POST,data={}),提前声明这个baseUrL的好处就不用了每次在调用函数是都写出网址的前缀了， axios.defaults.withCredentials=true;axios提供跨域默认false，但我没有数据库，所以用的公用的就算跨域。每次刷新没有cookie，会被注销掉
在写代码时，通常会遇到后端还没有创建好的情况，这时候可以设置一个是在开发环境，生产环境引用不同的网站来模拟数据库，生成一个文件，这个文件会在不同环境下展示不同的网址。

catch

抓住，.then后执行一个函数，如果发生错误，用.catch抓住错误

router

可以填入跳转路径
replace和push的区别就是，replace在跳转之前不会把当前的路由路径记录到history，在replace跳转以后，再点击后退会回到更前面的一个路由页面。

钩子

created()时候会加载数据，但并不会渲染到页面，要想让axios加载最快可以将数据请求放到这个钩子，this.$nextTick(()=>{})，这个函数在created后执行，可以在Dom没有出现在页面时获取后端数据

replace()

方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。':id',notebookId将id替换成notebookId

request

一般接受url,methods(GET,POST...),data 我理解的是向后端发起请求，请求的路径，要做什么，例如GET得到，POST发送,DELETE删除等，和数据。可以用 return new Promise(resolve, reject)来得到返回的成功或失败而且可以跟.then的链式调用，比如调整数据时间。

sort

notebook1和notebook2分别是过去的时间和现在的时间，他们都是个对象字符串，但可以用来做比较，用sort来调整数据顺序

res.data.sort((notebook1, notebook2) =>
   notebook1.createAt < notebook2.createAt ? 1 : -1);
      resolve(res)

时间公式

在notebook这个数据里加一个对象，这个对象是展示截止今天的时间，这样可以在外部展示时直接用

element-ui

Element - 网站快速成型工具各种小工能插件

v-show与v-if的区别

v-show 理解为是一个开关，他会被开关多次，v-if只触发一次

@input

@input事件是输入事件。在编辑笔记内容时为了设置自动保存文字，也用到了_debounce能够节流保存，在用户输入停下来后触发

yarn add lodash
import _ from ‘lodash‘;

input的keydown

应该是一个输入事件，在用户敲键盘时显示正在输入，抬手显示已保存，提前声名一个空值改变内容

unshift()

将新项添加到数组起始位置

高度计算

height: ~"calc(100% - 70px)";

一个组件能将输入形式变成类似掘金的语言

import MarkdownIt from "markdown-it";
let md = new MarkdownIt();

Vuex

又遇到Vuex 可以理解为将数据作为全局属性，有一些必要的api需要理解：
Vuex 通过 Vue 的插件系统将 store 实例从根组件中“注入”到所有的子组件里。且子组件能通过 this.$store 访问到。
state:全局的数据，需要一开始把所有需要的数据写好，如果确实需要添加再用vue.set(objec，key,value)
Getter:理解为数据计算属性传递给子组件，类似computed;接受 state 作为其第一个参数
Mutation:子组件更改数据状态的唯一方法是提交 mutation，每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler) 。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，不接受异步！
Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
store.dispatch（''）用来触发，类似于commit

我的理解是，Action可能是一个异步的，当他的到异步的数据后才会执行Mutation的操作 Module更大的数据仓库，能让数据分开存放，方便阅读
函数调用记得是commit('函数名')
payload:在mutation里的函数执行中，传入一个payload，这样在调用时可以再给函数传一个值=>commit('函数名称'，payload)

获取数据

...Vuex.mapState([])可以将this.$store.state的数据一一映射

`mapGetters` 辅助函数

mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性,记得要把函数写到computed里

导航守卫

在用列表时，切换列表想更新列表数据内容会用到这个导航守卫beforeRouteUpdate(to, from, next)可以为刷新数据？
to表示去哪里，跳转到那个页面

from 表示来自那个页面

next() 表示继续执行页面,一定要加上的

全局state

如果你希望使用全局 state 和 getter，rootState 和 rootGetters 会作为第三和第四参数传入 getter，也会通过 context 对象的属性传入 action。还是用rootgetters好一点，没有嵌套用方便一些

设置后默认选择

设置路由跳转后默认选择第一个笔记的实现：给setcurNote({})传个空，因为设置函数时写的默认选择第一个，再接一个路由跳转就可以啦。

Promise

是一个链式调用，在上一次执行完后return 再执行下一次时.then 就可以直接继续执行，避免了回调地狱

路由小总结

hash:哈希模式任何情况下都可以使用，但SEO不友好，人话:将路径存到URL的hash里，若搜索的url不正确则会去404，这种路由不向服务器发送请求网页会映射对应内容，不需要服务端的支持
history:这个路由对后端有要求，要求后端路由将前端路由全部收录到同一页面，但不能是404。人话：是需要客户端和服务端共同支持的情况下，用户发送请求给服务端，返回对应内容，所以页面刷新比较频繁，并且搜索的url不正确还会去到对应网页的首页。要做的事情有：阻止a标签刷新，获取到想要去的地方a.getAttribute("href");, 在不刷新页面的情况下变更路径window.history.pushState（）
memory：就是将访问的路径存到local storage里面，读取的时候也去缓存读，刷新时页面不变因为缓存了！但是不支持将URL复制给其他人

Vue.js开发印象云笔记

复习