前端常识小积累

小叶_01

已于 2022-08-05 14:50:37 修改

阅读量409

点赞数 4

分类专栏：工作+面试文章标签：前端 vue.js javascript

于 2022-07-18 18:06:38 首次发布

本文链接：https://blog.csdn.net/qq_38799387/article/details/125856773

版权

工作+面试专栏收录该内容

9 篇文章 0 订阅

订阅专栏

$event,方法占位符；e.preventDefault阻止默认行为；e.stopPropagation:阻止冒泡
事件正常经历的阶段是事件捕获->事件冒泡（默认情况下事件冒泡的时候才处理事件）-给一个事件加上捕获模式，他在捕获阶段就触发事件。
wheel鼠标滚轮事件 scroll滚动条事件
键盘事件 keydown keyup
Vue开发者工具，页面没用到，开发者工具现在是不更新的
计算属性不能开启异步任务维护数据
定时器的回调是js引擎调的，普通函数：this指的是window；箭头函数：没有自己this，往外找，找到vm实列
Math.floor(Math.random()*3)随机生成0、1、2
vue中template只能配合v-if ，不能配合v-show，v-show=false，不生效
一个字符串是包含空字符的 往往第一个位置是0
vue注解可以通过//#region //#endregion 可以折起来
slice、filter、map、concat:返回一个新数组，reduce、join、这些都是有返回，不会改变原数组
push、unshift、pop、shift、splice、sort、revert:会修改原数组且在vue中会触发响应式。forEach可以修改原数组
sort(a,b=>a-b)升序，b-a降序；
arr.reduce(function(prev, cur, index, arr) {return prev + cur;}，0)
vue提供了个api set 可以维持响应式Vue.set(target,key,Value) ，vm.$set 一样， vue只能给data的某个属性追加属性，不能给data追加属性—响应式
vue；v-for循环的时候需要过滤，最好用计算属性，用数组的方法可能在一些小程序开发出现问题。比如字节、飞书
验证一个元素是真实dom 可以用 console.dir||或者判断是否（a instanceof HtmlElement）
指令命名多个单词的命名，kebab-case命名（user-name）、camelCase命名（userName）驼峰命名
vue中data必须写成函数？避免组件被复用时，数据存在引用关系。
props优先级高于data;mixins使用时，生命周期，混入优先级高，其他地方自身优先级高;Watch和 computed的优先级是watch慢
uuid是个全球通用的不可能重复的id，简化版本nanoid (小很多)
修改对象中的值（es6） var obj ={…a,…b} 重复的用后面的对象里面的数据，合并对象;解构赋值 {data:ret}=res 获取对象的data赋值给ret
组件之间通信

1.props

父->子 props

子->父 props 方法，调用父组件方法回调

2.自定义事件 $emit

3.全局事件总线

4.消息订阅与发布（pubsub，例）

5.依赖注入（provide和inject）

6.vuex

7.v-attrs

8.缓存

9. $p a re n t 和$ children

10.ref
插槽，子向父传数据。父：scope=‘child’ 就可以用child.game;子： scope=“{game}“或者slot-scope=”{game}”
脚手架main.js中会让导入都上升到最顶部
vue2中，vuex与vue-router用3版本，vue3用4版本
路由守卫的执行顺序beforeRouteLeave->beforeEach->beforeEnter->beforeRouteEnter->afterEach
vue2中，vuex与vue-router用3版本，vue3用4版本
绝对定位(absolute),将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位,原来的位置会被后面的内容占据。绝对定位的元素脱离文档流，margin属性值无效。相对定位的元素不会脱离文档流，占用文档流的空间，Left; Right; Top和Bottom属性与margin属性混合使用会产生累加效果。
单例（Singleton）模式的定义：指一个类只有一个实例，且该类能自行创建这个实例的一种模式

单例模式有 3 个特点：
1. 单例类只有一个实例对象；
2. 该单例对象必须由单例类自行创建；
3. 单例类对外提供一个访问该单例的全局访问点；
vue配置了axios.defaults.baseURL；使用axios的时候，某个界面要写完整的地址。

import axios from ‘axios’

// 由于我们现在获取的地图矢量数据并不是后台数据, 所以咱们不能使用this. $h ttp （ main . j s 配置的， V u e . p ro t o t y p e .$ http = axios）
const ret = await axios.get(‘http://localhost:8999/static/map/china.json’)
接口取消

1
export function getDocumentList(params,f) {
  return request({
    url: `/sale-project/project/project-document-list`,
    method: 'get',
    params,
    cancelToken:f
  })
}
2
cancelRequest() {
   if (typeof this.cancelFun === 'function') {
     this.cancelFun()
   }
 },


   this.cancelRequest();
   let params = this.ArrayToString(this.searchForm)
   getListMilestoneTaskFollow(params,new axios.CancelToken((c) => 			 {
     this.cancelFun = c
    }))

34.图片间有间距：加个样式display：block
35.find() 数组中找到第一个符合要求的否则返回undefined （最适合编辑某对象数组的某条数据）
filter找到符合要求的数组（适合找出符合条件的数组）
map()方法返回一个新数组，数组中的元素为原始数组元素调用函数处理的后值（适合批量处理数组的数据）
它创建一个新数组,新数组中的元素是通过检查指定数组中符合条件的所有元素
forEach：修改原数组。
注意
1.使用这三个操作的方法不会改变原始数组
2.修改获取后的对象或者对象数组会修改原数组
36.call&apply&bind的区别
首先了解三个的作用是一样的，是用来改变this的指向。
它们的区别主要是在于方法的实现形式和参数传递上的不同。
1.函数.call(对象,arg1,arg2…)
2.函数.apply(对象，[arg1,arg2,…])
3.函数.bind(对象,arg1,arg2,…)()
bind只有第一次有用
37.吸顶（粘性布局，位置内相对定位，超出即是绝对定位）

.search-box { 
	// 设置定位效果为“吸顶” 
	position: sticky; 
	// 吸顶的“位置” 
	top: 0; 
	// 提高层级，防止覆盖 
	z-index: 999; 
}

38 小程序中动态绑定类
class=“needle {{isPlay && ‘needleRotate’}}”
class=“needle {{isPlay ? ‘needleRotate’:‘’}}”
39.小程序跳转传参注意
转成json字符串太长会被截取
40.垂直居中
margin:auto