900字范文 > 自用记录文档

自用记录文档

时间：2023-08-29 15:49:53

相关推荐

自用记录文档

晚20点，下班后无事后，学习一下之前下的免费前端课程，顺便开始记录学习的心得，打卡第一天看看，可以坚持多久😂

我发现每次看课程都是刚开始的时候，学的很认真，到了后面却放松，所以这次开始学习，我做了一个大胆的决定，就是从后开始，向前学，（这种方式，针对有点基础的同学们哈~）不然一脸懵逼加劝退！！

经过

8月10日

哈哈哈，刚开始就有些坚持不下去，不讲玩笑了，说一下我刚刚get的小知识，刚刚的老师讲了vue项目的文件目录结构，之前也有学过，但都是过眼云烟，没有记录就忘记，所以说，好记性不如打的快，好的开始就是成功的一半了

话不多说，上截图

components与view文件夹的区别

components存放的是固定的组件文件，view存放的是需要路由跳转的组件文件

好了今天我在坚持一下，记录一下项目的创建过程🤪

vue项目创建步骤

首先，在你要创建项目的文件夹下目录栏输入cmd

vue create 项目名称

选择自定义创建模板

按空格选中，选择路由Router

选择vue版本

询问使用哪种模式的路由，选择n ,

#方式的路由通用性好

保存后检测代码规范性

回车，等待加载,一个vue项目就创建好了~

8月11日

安装配置Vant组件库

这是第2次写，刚刚写的忘记保存了😔

今天学的vant组件库的安装配置，

vant组件地址🤫

https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart#tong-guo-npm-an-zhuang

通过npm安装，我用的是vscode编译器~

# Vue 2 项目，安装 Vant 2：npm i vant -S

安装好后在main.js配置一下

//导入并安装vant组件库import Vant from 'vant'import 'vant/lib/index.css'Vue.use(Vant)

//下面就是验证成果的时候

<template><div><h1>APP 根组件</h1><van-button type="primary">主要按钮</van-button><van-button type="info">信息按钮</van-button><van-button type="default">默认按钮</van-button><van-button type="warning">警告按钮</van-button><van-button type="danger">危险按钮</van-button></div></template>

这就算是成功了！😀

插一句vscode格式化代码，快捷键是Shift+Alt+F

8月12日

vant组件tabbar路由模式

今天是学习创建移动端，下方导航栏切换，用到的是vant组件tabbar标签

首先要在App.vue中添加

<template><div><van-tabbar route><van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item><van-tabbar-item icon="user-o" to="/user">我的</van-tabbar-item></van-tabbar></div></template>

route表示开启路由模式，to代表去那个路由页面

很赞👍

8月16日

先插句，文件名后缀为.MD的文件，可以用typora软件打开，这个应该是个不错的文本编译器

这个下载地址🤫

https://typora.io/#windows

然后呢，下面这个地址，是人家老师做的参考文献地址，也是棒棒的👍

14. 项目优化 | 黑马头条 - 移动端

下面开始进入正题，前2天呢是周末，所以我就没记录，这算不算打卡断打的，不过我今天都给补回来了🤭

axios__GET请求

学习已经进行到接口请求了，看来从后往前看还是有道理，每次我学习都学不到这个接口请求

首先在项目里，安装一下axios

项目路径 npm i axios -s+ axios@0.21.1

然后建立一个公共的引用文件，这里老师讲到，像这种文件，插件要创建一个uitls文件夹，放在这个文件下，像这个样子

接着就是在request.js文件中配置接口信息

import axios from 'axios'const request = axios.create({// 指定请求的根路径baseURL: 'xxx'})export default request

之后就可以在需要调用接口的文件中，去使用了

// 导入request.jsimport request from '@/utils/request.js'export default {name: 'Home',data () {// 页码值return {page: 1,limit: 10}},created () {this.initArticleLIst() //方法名称},methods: {// 封装获取文章列表数据的方法async initArticleLIst () {const { data: res } = await request.get('/articles', {// 请求参数params: {//get.接口参数传递方式_page: this.page,_limit: this.limit}})console.log(res)}}}

完事👍

哦再插一句，为了保证每个组件的css唯一性，避免污染全局或者被全局污染，vue提供了scoped作用域/deep/

这个还是参考其他人写的文档吧，人家说的比我详细

说一说VUE中的/deep/用法 - 知乎

12月21日

果然断了，开始记录吧，不然学完就忘了，

this.$nextTick

当某些代码想要延迟在dom元素更新完成之后，就用this.$nextTick(cd),cd里执行回调函数,例如下

this.$nextTick(() => {this.$refs.iptrefs.focus()})

错误说明：cannot read property 'xxx' of undefined
xxx方法或属性，前面的成员是undefined

数组的some方法

const arr = ['小红', '你大红', '苏大强', '宝']// forEach 循环一旦开始，无法在中间被停止arr.forEach((item, index) => {console.log('object')if (item === '苏大强') {console.log(index)}}) arr.some((item, index) => {console.log('ok')if (item === '苏大强') {console.log(index)// 在找到对应的项之后，可以通过 return true 固定的语法，来终止 some 循环return true}})

数组every方法

返回值是布尔值，可判断是否全选

const arr = [{ id: 1, name: '西瓜', state: true },{ id: 2, name: '榴莲', state: false },{ id: 3, name: '草莓', state: true },]// 需求：判断数组中，水果是否被全选了！const result = arr.every(item => item.state)console.log(result)

数组reduce方法

累加方法

const arr = [{ id: 1, name: '西瓜', state: true, price: 10, count: 1 },{ id: 2, name: '榴莲', state: false, price: 80, count: 2 },{ id: 3, name: '草莓', state: true, price: 20, count: 3 },]// 需求：把购物车数组中，已勾选的水果，总价累加起来！/* let amt = 0 // 总价arr.filter(item => item.state).forEach(item => {amt += item.price * item.count})console.log(amt) */// arr.filter(item => item.state).reduce((累加的结果, 当前循环项) => { }, 初始值)const result = arr.filter(item => item.state).reduce((amt, item) => amt += item.price * item.count, 0)console.log(result)

vscode配置@路径提示

下载插件

在settings.json中配置文件

//导入文件时是否携带文件扩展名"path-autocomplete.extensionOnImport": true,//配置@的路径提醒"path-autocomplete.pathMappings": {"@":"${folder}/src"},

前端面试题总结

HTML

1、如何理解HTML语义化？

语义化就是构成HTML结构的标签要有意义。

比如有这样的标签：

header表示页面头部

main表示页面主题

footer表示页面底部

那么这些标签构成的HTML结构就是有意义的，也是语义化的。

如果说页面的头部、主体以及底部都用div来表示，那么他就不是一个语义化的HTML结构了。

————————————————

原文链接：/weixin_47227886/article/details/124084947

2、meta viewport作用是什么，怎么写？

meta viewport 是用来做移动端适配的，让网页可以在移动端上得到很好的呈现。

meta 标签里面有两个属性，name 和 content 。name 里面写 viewport ，content 里面写 width = device-width ，宽度等于设备宽度；initial-scale = 1 ，页面的初始缩放比例为 1 ; minimum-scale = 1 , maximum-scale = 1 ，用户能够放大和缩小的比例都为1，这是用来禁止用户缩放的；user-scalable = no ，也是用来禁止用户缩放的。之所以重复禁止用户缩放，是因为在有些浏览器上其中一个可能会失效。

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

3、行内元素有哪些？块级元素有哪些？

1.行内元素指的是书写完成后不会自动换行，并且元素没有宽和高。

行内元素有：

<a>标签可定义锚<abbr>表示一个缩写形式 <acronym>定义只取首字母缩写

<b>字体加粗 <bdo>可覆盖默认的文本方向 <big>大号字体加粗 <br>换行

<cite>引用进行定义 <code>定义计算机代码文本 <dfn>定义一个定义项目

<em>定义为强调的内容 <i>斜体文本效果 <img>向网页中嵌入一幅图像

<input>输入框 <kbd>定义键盘文本 <label>标签为 <input> 元素定义标注（标记）

<q>定义短的引用 <samp>定义样本文本 <select>创建单选或多选菜单

<small>呈现小号字体效果 <span>组合文档中的行内元素 <strong>语气更强的强调的内容

<sub>定义下标文本 <sup>定义上标文本 <textarea>多行的文本输入控件

<tt>打字机或者等宽的文本效果 <var>定义变量

2.块级元素写完后会自动换行，有宽高可以修改

块级元素有：

<address>定义地址 <caption>定义表格标题 <dd>定义列表中定义条目

<div>定义文档中的分区或节 <dl>定义列表 <dt>定义列表中的项目

<fieldset>定义一个框架集 <form>创建 HTML 表单 <h1>~<h6>定义标题

<hr>创建一条水平线 <legend>元素为<fieldset>元素定义标题

<li>标签定义列表项目 <noframes>为那些不支持框架的浏览器显示文本，于 frameset 元素内部

<p>标签定义段落 <pre>定义预格式化的文本 <table>标签定义 HTML 表格

<tbody>标签表格主体（正文） <td>表格中的标准单元格 <th>定义表头单元格

<tfoot>定义表格的页脚（脚注或表注） <thead>标签定义表格的表头 <tr>定义表格中的行

3.还有一种特殊的元素叫做行内块元素。

行内块元素常见的有： img input td

注意一点：在p元素中可以放行内元素，但不能放块级元素

————————————————

原文链接：/qq_49389758/article/details/122711256

4、HTML5有哪些新标签

html5新增加的结构标签有：1、section标签，定义文档中的节；2、article标签；3、nav标签；4、aside标签；5、header标签，定义文档的页眉；6、footer标签；7、hgroup标签；8、figure标签。

CSS

1、如何实现垂直居中？

/web/636455.html

如下：

1、通过verticle-align:middle实现CSS垂直居中。

2、通过display:flex实现CSS垂直居中。

3、通过伪元素:before实现CSS垂直居中。

4、通过display:table-cell实现CSS垂直居中。

5、通过隐藏节点实现CSS垂直居中。

6、已知父元素高度通过transform实现CSS垂直居中。

7、未知父元素高度通过transform实现CSS垂直居中。

8、通过line-height实现CSS垂直居中。

————————————————

原文链接：/limeng886549/article/details/98106313

2、分别说一下两种盒模型

盒模型尺寸基准有两种，分别是默认的content-box和border-box

content-box 内容盒模型border-box 边框盒模型

content-box

盒模型的宽度为width的宽度

公式为： width = 内容宽度

border-box

边框模型的宽度为内容的宽度，加上内边距的宽度，再加上边框的宽度

公式为： width = 内容的宽度 + padding + border

我们需要为其添加box-sizing:border-box属性，这样才能作为border-box盒模型。

作者：努力了吗梁同学

链接：/p/01019c2f1296

来源：简书

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

3、flex常用的属性有哪些？

flex 布局

1. 通过给⽗盒⼦设置flex属性，来控制盒⼦的位置和排列⽅式。

2. flex任何⼀个容器都可以指定为flex布局。

3. 当⽗盒⼦设为flex布局以后，⼦元素的float、clear、vertical-align属性都将失效。

⼀、flex布局"⽗项"常见属性

1.flex-direction设置主轴⽅向:

1. row (默认)从左到右。

2. row-reverse 从右到左。

3. column 从上到下。

4. column-reverse从下到上。

2.justify-content设置"主轴"上的对齐⽅式

1. flex-start(默认)从头开始。

2. flex-end 从尾部开始。

3. center 在主轴中对齐。

4. space-around平分剩余空间。

5. space-between 先两边贴边再平均分配剩余空间。

3.flex-wrap设置⼦元素是否换⾏。

1. nowrap 不换⾏。不换⾏会改变⼦盒⼦的⼤⼩。

2. wrap 换⾏。

3. wrap-reverse:换⾏:交换⼀⼆⾏的位置

4.align-items设置"侧轴"上⼦元素排列⽅式（单⾏）

1. flex-start(默认) 从上到下。

2. flex-end 从下到上。

3. center 挤在⼀起居中。

4. stretch拉伸设置拉伸不要⼦盒⼦⾼度

5.align-content设置"侧轴"上⼦元素的排列⽅式(多⾏)

1. flex-start(默认)从侧轴的头部开始排列。

2. flex-end 在侧轴的尾部开始排列。

3. center 在侧轴的中间开始排列。

4. space-between ⼦项在侧轴先分布在两头，再平均分配剩余空间。

5. stretch 设置⼦元素⾼度平分⽗元素的⾼度。

6.flex-flow属性是flex-direction和flex-wrap的复合写法。

flex-flow:column wrap;

⼆、flex布局"⼦项"常见的属性。

1. flex定义⼦项分配剩余空间，⽤flex来表⽰占多少份数。

2. align-self ⼦项单独在侧轴上的对齐⽅式。

3. order 设置⼦元素的排列顺序，数字越⼩越⼤。

4. flex-shrink：定义了项⽬的缩⼩⽐例，默认1，如果空间不⾜，该项⽬将缩⼩

1. 例如:如果所有项⽬的flex-shrink属性都为1，当空间不⾜时，都将等⽐例缩⼩。如果⼀个项⽬的flex-shrink属性为0，其他项⽬都为

1，则空间不⾜时，前者不缩⼩。

5. flex-basis属性定义了在分配多余空间前，项⽬占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余的空间。默

认值为auto，即项⽬本来的⼤⼩

6. flex-grow属性：属性定义项⽬的放⼤⽐例，默认为0，即如果存在剩余空间，也不放⼤

1. 例如:如果所有项⽬的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果⼀个项⽬的flex-grow属性为2，其他项⽬

都为1，则前者占据的剩余空间将⽐其他项多⼀倍。

--------------------------------------------------------

作者：空明灿灿知识集

链接：/view/821a98f675eeaeaad1f34693daef5ef7bb0d125d.html

来源：百度文库

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

4、BFC是什么？

通俗理解：BFC 是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品。

3、BFC是一个css渲染特殊的一部分，需要一定的条件才能触发：

(1) 给元素添加浮动，浮动元素就具有BFC特性----

float: left/right;

(2) 给元素添加overflow属性----

overflow: hidden，auto，scroll(除了visible);

(3) 给元素添加display属性----

display: inline-block, flex, inline-flex, table-cell，table-caption;

(4) 给元素添加定位----

position: absolute，fixed

————————————————

原文链接：/qq_44815747/article/details/114164636

bfc特性

(1)内部的Box会在垂直方向，从顶部开始一个接一个地放置

(2)Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加，与方向无关

(3)每个元素的margin box的左边，与包含块border box的左边相接触，即使在浮动元素中也是这样

(4)BFC的区域不会与float box叠加，利用此特性可以实现两列布局，左边固定宽度，右边自适应

(5)BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，里面的子元素也不会影响到外面的元素

(6)计算BFC的高度时，浮动元素也会参与计算

————————————————

原文链接：/qq_44815747/article/details/114164636

5、如何清除浮动？

方法一：额外标签法

给谁清除浮动，就在其后额外添加一个空白标签，给其设置clear：both。

优点：通俗易懂，书写方便。

缺点：添加许多无意义的标签，结构化比较差。

clear：both：本质就是闭合浮动，就是让父盒子闭合出口和入口，不让子盒子出来。

————————————————

原文链接：/qq_43692768/article/details/109547020

方法二：父元素添加overflow:hidden

通过触发BFC方式，实现清除浮动

优点：代码简洁

缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素。

方法三：使用after伪元素清除浮动

优点：符合闭合浮动思想，结构语义化正确。

缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout。

css样式

#parent:after{content: "";display: block;height: 0;clear:both;visibility: hidden;}#parent{/* 触发 hasLayout */*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/}

————————————————

原文链接：/qq_43692768/article/details/109547020

方法四：使用before和after双伪元素清除浮动

优点：代码更简洁

缺点：用zoom:1触发hasLayout.

css样式

#parent:after,#parent:before{content: "";display: table;}#parent:after{clear: both;}#parent{*zoom: 1;

}

————————————————

原文链接：/qq_43692768/article/details/109547020

6、px、em、rem的区别及使用场景

在 css 中的单位长度使用中，比较常用的是 px、em、rem，三个单位的概念和区别是：px 是绝对值，em 与 rem 都是相对值

1. px：px 是固定像素单位，设置以后，在页面发生改变时，无法适应页面而去改变值的大小

2. em: em 相对于父元素，是相对父级元素字体大小的倍数

例如，父级 div 中字体设置了 12px，在设置 2em 之后，该元素的字体大小就变成了 24px

3. rem: rem 相对于根元素(html)，是相对 html 根元素字体大小的倍数

例如， html 默认的字体大小是 16px。所以，1rem 就相当于 16px。rem 的值最终取决于根元素默认值，其值是可以设置的

JavaScipt

1、es6语法有哪些，怎么用？

let和const命令

es6用let命令所在的代码块内有效

//ES5if (true) {var i = 1;}i // 1//ES6if (true) {let i = 1;}i // 变量i未找到

const声明一个只读的常量。一旦声明，常量的值就不能改变。

const data = 10;console.log(data);//data = 100; //执行错误const list = [10,20,30];console.log(list);list[0] = 100;console.log(list);//list = [1,2,3]; //错误

变量的解构赋值

//数组赋值 let [a, b, c] = [10, 20, 30]; console.log(a, b, c); //10 20 30 let [x, y, ...other] = [1,2,3,4,5]; console.log(x, y, other); //1 2 [ 3, 4, 5 ]

//对象赋值 let {name, age} = { name: 'Koma', age: 20 }; console.log(name, age);

//字符串的解构赋值 const [a, b, c, d, e] = 'hello'; a // "h" b // "e" c // "l" d // "l" e // "o"

//函数赋值 function func1() { return [10, 20]; } let [num1, num2] = func1(); console.log(num1, num2);//10 20

//函数参数名指定 function func2({x=1, y=2}){ return x+y; } console.log(func2({})); //3 console.log(func2({x:10})); //12 console.log(func2({y:10})); //11 console.log(func2({x:10, y:20})); //30

//遍历Map结构 var map = new Map(); map.set('first', 'hello'); map.set('second', 'world'); for (let [key, value] of map) { console.log(key + " is " + value); } // first is hello // second is world

箭头函数(Arrow Function)

let list = [10, 20, 30];

//ES5 let newlist = list.map(function(value, index){ return value * value; }); console.log(newlist);//[100, 400, 900]

//ES6 newlist = list.map((value, index) => { return value * value; }); console.log(newlist);//[100, 400, 900]

newlist = list.map(value => { return value * value; }); console.log(newlist);//[100, 400, 900]

进制转换

0b:二进制0o:八进制0x:十六进制

console.log(0b11 === 3); //trueconsole.log(0o10 === 8); //trueconsole.log(0x10 === 16);//truelet num = 10;console.log(num.toString(8)); //8进制转换console.log(num.toString(2)); //2进制转换console.log(num.toString(16));//16进制转换console.log(num.toString(5)); //5进制？嘿嘿

嵌入字符串

字符串嵌入方式字符串模版定义

let name = "Koma"let mystr1 = "你好，${name}!"let mystr2 = `你好，${name}！再见。`console.log(mystr1);//你好，${name}!console.log(mystr2);//你好，Koma！再见。 function tagged(formats, ...args){console.log(formats)console.log(args)}tagged`你好，${name}！再见。`

async await 和 promise 的使用

async是异步的简写，而await是async await的简写，所以应该很好理解async用于声明一个异步的function，而await用于等待一个异步方法的执行完毕。

即：

async：让方法变成异步

await：等待异步方法执行完毕

用async声明的函数要返回promise对象，await必须在async函数里使用，否则报错

通常使用形式：

async function test(){return new Promise((resolve,rejects)=>{//模拟一个异步操作setTimeout(function(){let name = 'zlfan';resolve(name);},1000)})}async function main(){let data = await test();console.log(data);}main();// -> zlfan

.import 和 export

import导入模块、export导出模块

//全部导入

import people from './example' //有一种特殊情况，即允许你将整个模块当作单一对象进行导入 //该模块的所有导出都会作为对象的属性存在 import * as example from "./example.js" console.log(example.name) console.log(example.age) console.log(example.getName()) //导入部分 import {name, age} from './example' // 导出默认, 有且只有一个默认 export default App // 部分导出 export class App extend Component {};

以前有人问我，导入的时候有没有大括号的区别是什么。下面是我在工作中的总结：

1.当用export default people导出时，就用 import people 导入（不带大括号）

2.一个文件里，有且只能有一个export default。但可以有多个export。 3.当用export name 时，就用import { name }导入（记得带上大括号） 4.当一个文件里，既有一个export default people, 又有多个export name 或者 export age时，导入就用 import people, { name, age } 5.当一个文件里出现n多个 export 导出很多模块，导入时除了一个一个导入，也可以用import * as example

2、let、const、var的区别？

var是ES5提出的，let和const是ES6提出的。

const声明的是常量，必须赋值

1）一旦声明必须赋值,不能使用null占位。

2）声明后不能再修改

3）如果声明的是复合类型数据，可以修改其属性

let和var声明的是变量，声明之后可以更改，声明时可以不赋值

var允许重复声明变量，后一个变量会覆盖前一个变量。let和const在同一作用域不允许重复声明变量，会报错。

var声明的变量存在变量提升（将变量提升到当前作用域的顶部）。即变量可以在声明之前调用，值为undefined。

let和const不存在变量提升。即它们所声明的变量一定要在声明后使用，否则报ReferenceError错。

var不存在块级作用域。let和const存在块级作用域。

ES5中作用域有：全局作用域、函数作用域。没有块作用域的概念。

ES6(简称ES6)中新增了块级作用域。块作用域由 { } 包括，if语句和for语句里面的{ }也属于块作用域。

————————————————

原文链接：/qq_43875051/article/details/106189824

vue

VUE的生命周期钩子函数：就是指在一个组件从创建到销毁的过程自动执行的函数，包含组件的变化。可以分为：创建、挂载、更新、销毁四个模块。

在beforeCreate和create钩子函数之间的生命周期

在这个生命周期之间,进行初始化,可以看到created的时候数据已经和data属性进行绑定(放在data中的属性值发生改变的同时,视图也会改变)

此时还没有el选项

created和beforeMount间的生命周期

首先会判断对象是否有el选项,如果有的话就继续向下编译,如果没有el选项(意思就是没有挂载el),则会停止编译,也就意味着停止生命周期,当有了el选项的时候才会继续编译

beforeMount和Mounted钩子函数之间的生命周期

给vue实例对象添加$el成员,并且替换掉在的dom元素,在beforeMount之前el还是undefined

mounted钩子函数

在mounted之前,页面内容还是一javascript中的虚拟DOM形式存在.在Mounted之后才把内容挂载到页面上

beforeUpdate和update钩子函数之间的生命周期

在vue发现data中的数据发生了改变,会重现渲染页面,先后调用这两个钩子函数,beforeUpdate的时候数据更新但是dom节点中的innerHtml还没有发生改变,还是data之前的数据,update的时候新数据渲染到页面上了就是data更新后的数据

beforDestroy和destroyed钩子函数键的声明周期

beforDestroy就是在实例(节点)销毁之前调用,实例还可以用

destroyed在实例销毁之后,所有的东西都会解绑,包括监听的事件都会移除,节点也就消失

————————————————

原文链接：/x_xiNan9416/article/details/108838005

vue如何实现组件间通信？

父传子，props；子传父，this.$emit()；触发、监听名称须一致。

父子，兄弟，跨级（祖孙等）通信写法相同，就不一一举例了，都是通过this.bus.$emit()触发，通过this.bus.$on()监听，执行相应的操作，切记：触发、监听名称必须相同！

Vuex状态管理库

方式一，this.$store.state.xxx，直接对state进行操作，在一个组件mounted阶段将值存如store中，当然也可在你想在的方法中进行操作。

方式二，通过this.$store.getters.xxx、mapGetters进行取出。

Router

可以通过动态路由、路由跳转方式进行传值，如this.$router.push({path:'xxx',query:{value:'xxx'}})，在跳转的时候顺便传值，通过this.$route.params.value和this.$route.query.value获取到传过来的参数。该方式有局限性，只能在相互跳转的组件通信取值，且直接在跳转之后的页面进行刷新取不到值，视情况而用。

缓存

sessionStorage、localStorage、cookie

多个组件之间的通信除了可以用bus、store之外，还比较一种常用的方式--缓存，在同一个窗口不关闭的情况下，该窗口下的其他组件都可以取到缓存中已经存好的值，利用sessionStorage.setItem(key,value)、localStorage.setItem(key,value)等将值存起来，其他组件可以通过sessionStorage.getItem(key)、localStorage.getItem(key)等方式拿到，多个页面共享缓存数据，刷新页面数据不会销毁，可以用sessionStorage.removeItem(key)、localStorage.removeItem(key)的方式将缓存移除，可用场景还是比较多的。

git常用命令

# 常用

$ git init # 初始化仓库

$ git add . # 将当前目录下文件全部加到远程仓库中（master）

$ git commit # 提交到远程仓库（默认的master分支）用的蛮多的

$ git clone # 将远程仓库拷贝到本地

如 git clone ssh://git@10.10.8.64:9922/pythonapi/api-daily-supervision.git

$ git status # 查看当前仓库的状态

$ git log # 查看历史提交记录，这个我用的还是蛮多的

$ git diff [file] # 查看暂存区和工作区的差异个人用其实就是看些对文件做的改变有哪些，删除或者增加了哪些东西

————————————————

# 关于回退