开发中的花样玩法(前端打工人须知)

一、关于vue使用vant的van-popup,子元素设定固定定位失效问题。

position: fixed;

原因是该组件使用了transform导致,父元素使用了transform会导致子元素在使用固定定位时失效,解决方法就是把要设置固定定位的子元素放在跟组件平级的位置,变成兄弟元素。这样就能解决

二、当浏览器因为有缓存导致页面新增内容不生效的问题解决方法

直接Ctrl+F5强制刷新------不走缓存

三、代码的另类写法

<van-button type="default">默认按钮</van-button>

<component is="van-button" type="default">默认按钮</component >

四、解决git项目中文件夹首字母改成大写后在远程出现两个文件夹的问题

最好的解决方法,直接把原文件复制一份,原文件删了,复制的文件重命名一个新名字------跟原文件名字不一样

然后更改所有引用的地方

五、chrome 源代码调试快捷键

1.ctrl+shift+f 全文查找

2.ctrl+o 查找文件名

  1. ctrl+shift+o 查找 js 函数名

六、父组件获取到子组件的属性和方法

$refs

$children

子传父$emit

七、子组件获取到父组件的属性和方法

$attrs

父传子props

$parent

$root

八、Vue.observable()

相当于初版vuex,vuex的雏形,在js文件里借助Vue.observable去写一个对象,在当前js文件再写一个mutation方法去修改对象的值,导出这两个对象、方法,在需要用到该参数的地方引入,通过computed去监听对象,完成全局参数传递

九、子组件直接修改父组件的变量值

父组件

<HandleLogs :detail.sync="detail"></HandleLogs>

子组件

this.$emit('update:detail',{})

十、字符串转数字

const num = "1000" * 1;

十一、使用":not"选择器

除了最后一个元素之外的所有元素都需要一些样式,使用 not 选择器会非常容易。

li:not(:last-child) {

border-bottom: 1px solid #ebedf0;

}

十二、使用"caret-color"修改光标颜色

caret-color: #ffd476;

十三、不允许选择文本

user-select: none;

十四、现在开始说一下事件总线bus传参

bus传参其实是新建了没有一个dom元素的vue实例,然后挂载到了vue的原型上,成为一个全局可用的传参方法,该方法使用emit去传值编辑值,使用on去监听获取值,使用$off去关闭监听

十五、delete和Vue.delete的区别

Vue.delete在 vue2能用到,Vue.delete和this.set一样都是为了触发视图更新而存在,只不过vue.delete是删除元素的里的值用的 用法:this.delete

十六、vue3新增fragment

(跟template用法差不多)有时候我们写了一些没必要的div就是为了做判断或循环用的,这时候可以用fragment代替,fragment不会作为标签被渲染到页面上

十七、vue2和vue3的区别

vue2是借助了Object.difineProprty去做的订阅者发布者模式,通过get和set去监听并修改对象的属性

vue3则是通过es6的proxy的做的对象代理,性能上更强大,不必进行数组重写

vue3不再进行全量dom更新,它只会更新并渲染带有响应式标识的元素,此乃是diff算法优化

十八、手写冒泡排序------自认为比较简单易懂的写法

var arr = [453,23,0,9,65,51, 2, 3, 4, 5, 6, 7, 8, 9,10];
for(var i =0;i<arr.length;i++){for(var k =0;k<arr.length+i;k++){if(arr[k]>arr[k+1]){[arr[k],arr[k+1]]=[arr[k+1],arr[k]]}}}
console.log(arr)

十九、名词解释------脚手架

是一个可以让开发者快速构建项目的工具,通过脚手架可以配置开发所需要的依赖,可以选用各种预编译语言和组件库等快速搭建项目开发环境,可以理解为项目模版,里面存在开发所需的基本文件结构和基础配置

二十、Flexbox布局中的 gap

gap能让flex布局中的元素保持一定的间隔

gap:6px;

相关推荐
weixin-a1530030831614 分钟前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
DCTANT37 分钟前
【原创】国产化适配-全量迁移MySQL数据到OpenGauss数据库
java·数据库·spring boot·mysql·opengauss
ai小鬼头41 分钟前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
Touper.1 小时前
SpringBoot -- 自动配置原理
java·spring boot·后端
wen's1 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
黄雪超1 小时前
JVM——函数式语法糖:如何使用Function、Stream来编写函数式程序?
java·开发语言·jvm
ThetaarSofVenice1 小时前
对象的finalization机制Test
java·开发语言·jvm
思则变1 小时前
[Pytest] [Part 2]增加 log功能
开发语言·python·pytest
一只叫煤球的猫1 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈
vvilkim1 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron