自用记录文档

已于 2022-05-30 16:58:57 修改
阅读量495 收藏 1
点赞数
文章标签： 经验分享
于 2021-08-10 20:17:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45468589/article/details/119578276
版权

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

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

经过

2021年8月10日

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

话不多说，上截图

components与view文件夹的区别

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

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

vue项目创建步骤

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

vue create 项目名称

 

 选择自定义创建模板

按空格选中，选择路由Router

选择vue版本

 

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

#方式的路由通用性好

保存后检测代码规范性

 

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

2021年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

2021年8月12日 

vant组件tabbar路由模式

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

首先要在App.vue中添加 

<template>
  <div>
    <!-- 路由占位符 -->

    <!-- Tabber区域 -->
    <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代表去那个路由页面

很赞👍 

2021年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.js

import 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/用法 - 知乎

 2021年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结构了。
————————————————
版权声明：本文为CSDN博主「爱学习的小欣欣」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/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 元素内部

<noscript>定义在脚本未被执行时的替代内容        <ol>定义有序列表        <ul>定义无序列表

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

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

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

3.还有一种特殊的元素叫做行内块元素。
        行内块元素常见的有： img  input  td  

注意一点：在p元素中可以放行内元素，但不能放块级元素
————————————————
版权声明：本文为CSDN博主「在敲代码中」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/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、如何实现垂直居中？

​​​​​​https://www.jb51.net/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垂直居中。
————————————————
版权声明：本文为CSDN博主「萌叽」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/limeng886549/article/details/98106313

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

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

  1. content-box 内容盒模型
  2. border-box 边框盒模型

content-box

盒模型的宽度为width的宽度
公式为： width = 内容宽度

border-box

边框模型的宽度为内容的宽度，加上内边距的宽度，再加上边框的宽度
公式为： width = 内容的宽度 + padding + border

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

作者：努力了吗梁同学
链接：https://www.jianshu.com/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，则前者占据的剩余空间将⽐其他项多⼀倍。
--------------------------------------------------------
作者：空明灿灿知识集
链接：https://wenku.baidu.com/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
————————————————
版权声明：本文为CSDN博主「xiao&amp;xin」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/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的高度时，浮动元素也会参与计算
————————————————
版权声明：本文为CSDN博主「xiao&amp;xin」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_44815747/article/details/114164636

5、如何清除浮动？

方法一：额外标签法

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

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

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

  clear：both：本质就是闭合浮动， 就是让父盒子闭合出口和入口，不让子盒子出来 。
————————————————
版权声明：本文为CSDN博主「忆弥」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/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执行，其他浏览器不执行*/
}


————————————————
版权声明：本文为CSDN博主「忆弥」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/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;


}
————————————————
版权声明：本文为CSDN博主「忆弥」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/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命令

  1. es6用let命令所在的代码块内有效
//ES5
if (true) {
    var i = 1;
}
i // 1

//ES6
if (true) {
    let i = 1;
}
i // 变量i未找到
  1. 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); //true
console.log(0o10 === 8); //true
console.log(0x10 === 16);//true

let 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导出模块

 

  1.  
    //全部导入
     
  2.  
    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.  
    1.当用export default people导出时，就用 import people 导入（不带大括号）
     
  3.  
    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语句里面的{ }也属于块作用域。
 ————————————————
 版权声明：本文为CSDN博主「_是鱼」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
 原文链接：https://blog.csdn.net/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在实例销毁之后,所有的东西都会解绑,包括监听的事件都会移除,节点也就消失
 ————————————————
 版权声明：本文为CSDN博主「西楠」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
 原文链接：https://blog.csdn.net/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]  # 查看暂存区和工作区的差异  个人用其实就是看些对文件做的改变有哪些，删除或者增加了哪些东西
 

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

# 关于回退
 $ git reset  # 回退版本 ，有下面三种形式
 git reset --soft          # 将HEAD引用指向给定提交, 索引（暂存区）和工作目录的内容是不变的
 git reset --mixed（git reset默认的模式）     # HEAD引用指向给定提交，并且索引（暂存区）内容也跟着改变，工作目录内容不变
 git reset --hard           # HEAD引用指向给定提交，索引（暂存区）内容和工作目录内容都会变给定提交时的状态
 git reset --hard HEAD^   # 回退到上个版本
 git reset --hard HEAD~3  # 回退到前3次提交之前，以此类推，回退到n次提交之前
 git reset --hard commit_id     # 退到/进到 指定commit的sha码
 如 git reset --hard 125dcfaa558e3276b30b6b2e5cbbb9c00bbdca96 
 

# 关于push    'git push' 
 

git remote -v    # 查看远程仓库
 git remote add [本地版本库] [url]   # 添加远程仓库 
 

# 例如： 提交本地到远程仓库的master
 $ git remote add origin git@10.10.8.64:9922/pythonapi/api-daily-supervision.git  
 $ git push -u origin master
 

$ git push -f -u origin 远程分支   # 强制提交到远程分支
 


 # 关于pull   'git pull'
 $ git pull <远程主机名> <远程分支名>:<本地分支名>   # 命令格式
 例如： 远程主机 origin 的 master 分支拉取过来，与本地的 develop分支合并。
 git pull origin master:develop
 

# 一些说明-------------
 # git pull 其实是git fetch 和 git merge FETCH_HEAD 的简写，
 # 简单说，就是你在开始写代码时，先pull一下，拉取最新的代码，如果没用pull，后面再merger在一起就可以嘞，这个用的还是蛮多的。
 

# 关于分支  这个我用的不多，主要也就下面这几个
 $  git branch     # 列出本地的分支
 $  git branch (branch_name)    # 创建分支
 $  git checkout (branch_name)  # 切换分支 
 $  git branch -d branch_name   # 删除某分支

 ————————————————
 版权声明：本文为CSDN博主「cat_cat_Go」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
 原文链接：https://blog.csdn.net/weixin_39092173/article/details/119875198
 

版权声明：本文为CSDN博主「cat_cat_Go」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
 原文链接：https://blog.csdn.net/weixin_39092173/article/details/119875198

                

        

        

    




    

      

        

            

              
                
                  哎呦看看
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
点单平台与后台管理系统的项目记录

				
			

			

				

					05-15
				

			

		

		

			
				
项目过程记录，本人自用，未经允许不可传播

			
		

	



                

              
                



	

		

			

				
					
app-docs:一些自用软件记录（踩坑、技巧、心得等等）

				
			

			

				

					05-27
				

			

		

		

			
				
欢迎任何热爱 Android 的玩家改进此文档。改进方式网页端直接在浏览器修改此仓库的某个文件（主要是 source/p 和 source/apps ），并提交 Pull requests 。如果你没有相关经验，可以参考这篇 ，图文并茂，很容易理解...

			
		

	



                


  
              

                


	

		

			

				
					
vant 组件van-tabbar实现底部导航

				
			

			

				

					yeyazi001的博客
				

				

					04-06
					
					3904
					
				

			

		

		

			
				
移动端小白，首次尝试移动H5开发，使用vant2的van-tabbar实现底部导航功能。本文忽略vant使用步骤，项目中使用全局引用。由于查询很多文章有的过于复杂，有的功能未实现，所以简单整理如有问题欢迎留言改正。底部导航栏简单实现，需要注意的是，组件是需要在所有需要使用的页面进行引用。所以将底部导航栏组合起来封装成一个组件。

			
		

	





	

		

			

				
					
如何使用vant配置Tabbar

				
			

			

				

					jakelihua
				

				

					06-11
					
					2125
					
				

			

		

		

			
				
vant如何创建Tabbar,vue如何创建Tabbar

			
		

	



		

			
		



	

		

			

				
					
定义tabbar，以及解决原生微信小程序使用vant的tabbar的bug（点击俩次图标才正确激活）

					
最新发布

				
			

			

				

					qq_44741577的博客
				

				

					03-09
					
					1155
					
				

			

		

		

			
				
custom-tab-bar用自定义组件的方式编写即可，用自定义组件的方式编写即可，该自定义组件完全接管 tabBar 的渲染。另外，自定义组件新增。在导入使用vant （tabbar）组件的时候，发现通过点击切换的方法来更改。路由跳转，会出现图标没用及时对应上，需要第二次点击才对应上的问题。接口，可获取当前页面下的自定义 tabBar 组件实例。的值，用来对应每个页面切换之后展示对应的图标。推荐使用vant的tabber组件。在每一个tab页面的。

			
		

	





	

		

			

				
					
20.自定义tabBar(使用vant中的tabbar)

				
			

			

				

					potato123232的博客
				

				

					07-09
					
					3115
					
				

			

		

		

			
				
自定义图标就要用这个东西首先搞wxml，我当前的index.wxml是这样的<van-tabbar-item icon="home-o">标签</van-tabbar-item><van-tabbar-item icon="search">标签</van-tabbar-item><van-tabbar-item icon="friends-o">标签</van-tabbar-item><van-tabbar-item icon="setting-o">标签</van-tabbar-item>

			
		

	





	

		

			

				
					
微信小程序--》tabBar底部栏

				
			

			

				

					ztK63LrD的博客
				

				

					08-18
					
					7430
					
				

			

		

		

			
				
tabBar底部栏的讲解

			
		

	





	

		

			

				
					
van-tabbar跳转当前页带修改参数带route当前页所有参数

				
			

			

				

					ss_Tina的博客
				

				

					11-17
					
					1592
					
				

			

		

		

			
				
vue，使用van-tabbar样例小记，van-tabbar跳转当前页，vue-route获取页面所有参数跳转带参。

			
		

	





	

		

			

				
					
数据库设计作业智能停车场管理系统数据库设计.docx

				
			

			

				

					01-08
				

			

		

		

			
				
不同类型停车场的固定车位和自由车位数目比例是不同的，比如商场、车站、机场类停车场的自由车位数目相对较多，而住宅小区、单位自用类停车场的固定车位数目相对较多。停车场的固定车位和自由车位数目一般情况下是...

			
		

	





	

		

			

				
					
数据库设计作业智能停车场管理系统数据库设计完整版.docx

				
			

			

				

					01-08
				

			

		

		

			
				
不同类型停车场的固定车位和自由车位数目比例是不同的，比如商场、车站、机场类停车场的自由车位数目相对较多，而住宅小区、单位自用类停车场的固定车位数目相对较多。停车场的固定车位和自由车位数目一般情况下是...

			
		

	





	

		

			

				
					
物业客服培训教程.pptx

				
			

			

				

					12-25
				

			

		

		

			
				
物业服务中心客服培训教程 物业客服培训教程全文共45页，当前为第1页。 认真完成客服部主管、项目经理等交代的... 27、每季度核算单元费用，包括物业费、水电公摊、自用水费、车辆管理费，核算完毕打印收费通知单，寄发

			
		

	





	

		

			

				
					
微信小程序使用van组件Tabbar 标签栏

				
			

			

				

					小香菜子的博客
				

				

					05-15
					
					1515
					
				

			

		

		

			
				
开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。（8）按需引入，在对应的page页面的 .json文件中的usingComponents属性中通过路径找到@vant引入你想使用的组件。（2）与pages同名创建custom-tab-bar文件夹（名字不能变），并创建index组件（tabbar自定义组件）（1）打开我们小程序的项目目录，然后打开文件所在的位置。（5）修改 app.json。

			
		

	





	

		

			

				
					
Vant组件库实现App里的TabBar标签栏

				
			

			

				

					
				

				

					04-17
					
					1062
					
				

			

		

		

			
				
构建产品的TabBar，支持高亮效果

			
		

	





	

		

			

				
					
Tabbar切换效果（vant）

				
			

			

				

					weixin_59527403的博客
				

				

					12-08
					
					930
					
				

			

		

		

			
				
route	是否开启路由模式。

			
		

	





	

		

			

				
					
原生微信小程序使用vant的tabbar（解决点击俩次图标才正确切换）

				
			

			

				

					weixin_62639453的博客
				

				

					03-25
					
					4485
					
				

			

		

		

			
				
一、声明：在导入使用vant （tabbar）组件的时候，发现通过点击切换的方法来更改active的方法，会出现图标没用及时对应上，需要第二次点击才对应上的问题。在每一个页面使用tabbar自定义组件的地方，在onshow生命周期函数里初始active的值，用来对应每个页面切换之后展示对应的图标。6.与pages同名创建custom-tab-bar文件夹（名字不能变），并创建index组件（tabbar自定义组件）假如，我采用index页面作为一个tabbar页，对应的active可以这么更改其选中态。

			
		

	





	

		

			

				
					
vue移动端Tabbar 标签栏（简单）

				
			

			

				

					qq_52126119的博客
				

				

					11-13
					
					2712
					
				

			

		

		

			
				
使用组件：Vant
Vant 是一个轻量、可靠的移动端组件库

			
		

	





	

		

			

				
					
# vue3 vant4 Tabbar 标签栏组件的封装 和Popup弹出层的封装

				
			

			

				

					weixin_47432301的博客
				

				

					09-10
					
					1147
					
				

			

		

		

			
				
state.showPopupVisible  组件显示关闭的状态值。徽标样式需要调整，list现在是自己暂时再state里写的假数据。如果不是需要打开弹出层的操作，不需要写上自定义事件，需要再加上。弹出层的封装，这里是子组件和父组件的数据可以实现双向数据绑定。需求如上，标签栏里第三个是图片，整个项目有两种场景，----父组件调用弹出层时候：-----下面是再使用标签组件时候。直接引用再内容区域使用。

			
		

	





	

		

			

				
					
关于vant 的tabbar功能

				
			

			

				

					a_grain_of_wheat的博客
				

				

					10-19
					
					1130
					
				

			

		

		

			
				
关于vant 的tabbar ,  非tabbar页面和tabbar页面的高亮显示

			
		

	





	

		

			

				
					
vant4组件库van-tabbar底部栏使用

				
			

			

				

					LiliRush的博客
				

				

					08-07
					
					560
					
				

			

		

		

			
				
路由，增加图标使用命名插槽#icon，当点击是获取插槽active的值，当点击这个选择时获取active是true，相反不点击时是false，根据active更改组件cp-icon传值从而更改当前的图标。在van-tabbar-item 标签属性to值为要跳转的。ps：cp-icon图标组件在使用svg插件。

			
		

	





	

		

			

				
					
自用ict腾博选点软件4.0

				
			

			

				

					01-05
				

			

		

		

			
				
自用ICT腾博选点软件4.0是一款非常实用和高效的软件。首先，该软件具备了智能化的选点功能，能够根据用户设定的条件和要求，快速找到最佳的选点位置。这对于各种场景下的选址决策非常有帮助，可以帮助用户节省时间和...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值