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

一、关于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 查找文件名

3. 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;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/81797.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java8 list多属性去重

大家好&#xff0c;我是三叔&#xff0c;很高兴这期又和大家见面了&#xff0c;一个奋斗在互联网的打工人。 在 Java 开发中&#xff0c;我们经常会面临对 List 中的对象属性去重的需求。然而&#xff0c;当需要根据多个属性来进行去重时&#xff0c;情况会稍微复杂一些。本篇…

STL模型修复权威指南【3D打印】

设计师和工程师通常需要软件来调整、修复和最终确定 3D 打印的 3D 模型。 幸运的是&#xff0c;手动网格编程的时代早已一去不复返了。 推荐&#xff1a;用 NSDT设计器 快速搭建可编程3D场景。 如今&#xff0c;有一系列专用工具可提供自动和手动 STL 修复功能。 自动向导足以满…

【Hystrix技术指南】(1)基本使用和配置说明

这世间许多事物皆因相信而存在&#xff0c;所以人们亲手捏出了泥菩萨&#xff0c;却选择坚定的去信仰它。 分布式系统的规模和复杂度不断增加&#xff0c;随着而来的是对分布式系统可用性的要求越来越高。在各种高可用设计模式中&#xff0c;【熔断、隔离、降级、限流】是经常被…

typora的使用

typora的使用 当出现 就会出现黄色 command option t &#xff1a;就会出现表格

W5500-EVB-PICO作为TCP Client 进行数据回环测试(五)

前言 上一章我们用W5500-EVB-PICO开发板通过DNS解析www.baidu.com&#xff08;百度域名&#xff09;成功得到其IP地址&#xff0c;那么本章我们将用我们的开发板作为客户端去连接服务器&#xff0c;并做数据回环测试&#xff1a;收到服务器发送的数据&#xff0c;并回传给服务器…

数据结构---跳表

目录标题 为什么会有跳表跳表的原理跳表的模拟实现准备工作find函数insert函数erase函数 测试效率比较 为什么会有跳表 在前面的学习过程中我们学习过链表这个容器&#xff0c;这个容器在头部和尾部插入数据的时间复杂度为O(1)&#xff0c;但是该容器存在一个缺陷就是不管数据…

linux学习——Redis基础

目录 一、noSQL 类型 特点及应用场景 二、Redis 三、安装方式 编译安装 rpm安装 四、目录结构 /etc/redis.conf 五、Redis命令 六、本地登录和远程登录 本地登录 远程登录 七、数据库操作 帮助信息 库操作 数据操作 八、Redis持久化 一、RDB类型 二、AOF模式 一…

点击下一页时表格的序号连接上一页的序号

项目场景&#xff1a; 提示&#xff1a;这里简述项目相关背景&#xff1a; 问题描述 提示&#xff1a;这里描述项目中遇到的问题&#xff1a; 平时的分页都是每页的第一条都是"1"&#xff0c;并不会连接上一页的序号&#xff0c;现在需要&#xff0c;每页都要连接…

WPF上位机8——C#与MySQL

ADO.NET 数据库连接 数据插入、删除、更改 数据查询 带单个参数 带多个参数 using MySql.Data.MySqlClient; using System; using System.Collections.Generic; using System.Configuration; using System.Linq; using System.Text; using System.Threading.Tasks;namespace Wp…

【深度学习_TensorFlow】感知机、全连接层、神经网络

写在前面 感知机、全连接层、神经网络是什么意思&#xff1f; 感知机&#xff1a; 是最简单的神经网络结构&#xff0c;可以对线性可分的数据进行分类。 全连接层&#xff1a; 是神经网络中的一种层结构&#xff0c;每个神经元与上一层的所有神经元相连接,实现全连接。 神经…

剑指Offer12.矩阵中的路径 C++

1、题目描述 给定一个 m x n 二维字符网格 board 和一个字符串单词 word 。如果 word 存在于网格中&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。单词必须按照字母顺序&#xff0c;通过相邻的单元格内的字母构成&#xff0c;其中“相邻”单元格是那些水平…

分享一个计算器

先看效果&#xff1a; 再看代码&#xff08;查看更多&#xff09;&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>计算器</title><style>* {box-sizing: border-box;}body…

k8s学习day03

第五章 Pod详解 本章节将详细介绍Pod资源的各种配置&#xff08;yaml&#xff09;和原理。 Pod介绍 Pod结构 每个Pod中都可以包含一个或者多个容器&#xff0c;这些容器可以分为两类&#xff1a; 用户程序所在的容器&#xff0c;数量可多可少 Pause容器&#xff0c;这是每个…

ChatGPT 作为 Python 编程助手

推荐&#xff1a;使用 NSDT场景编辑器 助你快速搭建可编辑的3D应用场景 简单的数据处理脚本 我认为一个好的起点是某种数据处理脚本。由于我打算让 ChatGPT 之后使用各种 Python 库编写一些机器学习脚本&#xff0c;这似乎是一个合理的起点。 目标 首先&#xff0c;我想尝试…

常用开源的弱口令检查审计工具

常用开源的弱口令检查审计工具 1、SNETCracker 1.1、超级弱口令检查工具 SNETCracker超级弱口令检查工具是一款开源的Windows平台的弱口令安全审计工具&#xff0c;支持批量多线程检查&#xff0c;可快速发现弱密码、弱口令账号&#xff0c;密码支持和用户名结合进行检查&am…

第九次作业

1. SSL工作过程是什么&#xff1f; 当客户端向一个 https 网站发起请求时&#xff0c;服务器会将 SSL 证书发送给客户端进行校验&#xff0c;SSL 证书中包含一个公钥。校验成功后&#xff0c;客户端会生成一个随机串&#xff0c;并使用受访网站的 SSL 证书公钥进行加密&#xf…

Effective Java笔记(28)列表优于数组

数组与泛型相比&#xff0c;有两个重要的不同点 。 首先&#xff0c;数组是协变的&#xff08; covariant &#xff09; 。 这个词听起来有点吓人&#xff0c;其实只是表示如果 Sub 为 Super 的子类型&#xff0c;那么数组类型 Sub[ ]就是Super[ ]的子类型。 相反&#xff0c;泛…

linux 安装go 1.18版本

首先去官网找到对应的版本 直接下载下来&#xff08;如果服务器可以直接访问到go 官网也可以wget直接下载到服务器&#xff09; 然后把该包上传到linux 的/usr/local 目录下 然后直接解压安装该包&#xff1a; sudo tar -C /usr/local -zxvf go1.18.10.linux-amd64.tar.gz 然…

Vscode-工具使用

Vscode &#xff0c;这玩意儿是开源的&#xff0c;以前用收费的破解版&#xff0c;过段时间就高版本不匹配&#xff0c;这次搞个不要钱的玩玩&#xff0c;记录使用心得 下载 下载地址&#xff1a;官网 点击下载&#xff0c;但是这里有个问题下载比较慢&#xff0c;解决办法&a…

Dockerfile部署golang,docker-compose

使用go镜像打包&#xff0c;运行在容器内 redis和mysql用外部的 项目目录结构 w1go项目&#xff1a; Dockerfile # 这种方式是docker项目加上 本地的mysql和redis环境 # go打包的容器 FROM golang:alpine AS builder# 为我们镜像设置一些必要的环境变量 ENV GO111MODULEon …