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

news2024/9/30 17:24:46

一、关于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.coloradmin.cn/o/852431.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

PHP流浪动物招领网站mysql数据库web结构apache计算机软件工程网页wamp

一、源码特点 PHP流浪动物招领网站 是一套完善的web设计系统&#xff0c;对理解php编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。 下载链接 nullhttps://download.csdn.net/download/qq_41221322/88190168视频演示 …

狂码三万字 | 三维场景点云理解与重建技术

目录 00 引言 01 点云特征提取与匹配 1.1 传统点云特征提取 1.2 点云深度学习 1.3 点云卷积 1.4 稀疏卷积 1.5 点云Transformer 1.6 点云旋转不变特征提取 1.7 点云匹配 02 场景点云语义分割 2.1 场景表征与数据集 2.1.1 室内场景表征与相关数据集 2.1.2 室外场…

motrix配合百度网盘的下载激活使用,需下载Motrix(官网)绝对安全

使用文档下载 需要下载神器motrix 有官网怕被和谐就不挂了放在上面文档里,也可baidu自行搜索 motrix下载 操作步骤 --> 简单易学↓↓↓↓ 网盘链接和提取码分开来填,操作见下图↓↓ 就是加速(点这儿解析链接) 点击后有时需要等待几秒钟 如果没…

完整版:TCP、UDP报文格式

目录 TCP报文格式 报文格式 报文示例 UDP报文格式 报文格式 报文示例 TCP报文格式 报文格式 图1 TCP首部格式 字段长度含义Source Port16比特源端口&#xff0c;标识哪个应用程序发送。Destination Port16比特目的端口&#xff0c;标识哪个应用程序接收。Sequence Numb…

安防视频监控汇聚EasyCVR平台接入Ehome告警,公网快照不显示的原因排查

智能视频监控汇聚平台TSINGSEE青犀视频EasyCVR可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等&#xff0c;视频监控管理平台…

外贸接单购物网站java开源搭建--内置客服系统+后台采集功能

搭建一个外贸接单购物网站是一个具有挑战的任务&#xff0c;需要考虑到用户界面设计、后端系统开发、客服系统和采集功能等多个方面。下面是一个大致的开发计划。 1. 用户界面设计 - 设计一个直观易用的用户界面&#xff0c;包括用户注册、登录、商品展示、下单等功能。 …

Scratch 之 3D 介绍及教程

第一章 为什么 3D 很难&#xff1f; 1.1 3D 难在何处&#xff1f; 3D 之所以会使我们觉得困难&#xff0c;是因为 Scratch 软件只有两个坐标轴&#xff0c;既&#xff1a;X轴、Y轴。 2维坐标系 而 3D 却拥有三个坐标轴&#xff1a; 3维坐标系 怎么办&#xff1f;很简单&…

Leetcode-每日一题【剑指 Offer 12. 矩阵中的路径】

题目 单词必须按照字母顺序&#xff0c;通过相邻的单元格内的字母构成&#xff0c;其中“相邻”单元格是那些水平相邻或垂直相邻的单元格。同一个单元格内的字母不允许被重复使用。 例如&#xff0c;在下面的 34 的矩阵中包含单词 "ABCCED"&#xff08;单词中的字母…

空天地光网络

空天地光网络 星座 卫星星座分类可参考卫星导航 walker星座&#xff1a; a classical inclined orbit constellation consisting of many orbits with the same height, and inclination. 参考论文Load-Balanced Virtual Network Embedding Based on Deep Reinforcement L…

Ariadne’s Thread-使用文本提示改进对感染区域的分割胸部x线图像

论文&#xff1a;https://arxiv.org/abs/2307.03942&#xff0c; Miccai 2023 代码&#xff1a;GitHub - Junelin2333/LanGuideMedSeg-MICCAI2023: Pytorch code of MICCAI 2023 Paper-Ariadne’s Thread : Using Text Prompts to Improve Segmentation of Infected Areas fro…

[保研/考研机试] KY129 简单计算器 浙江大学复试上机题 C++实现

描述 读入一个只包含 , -, *, / 的非负整数计算表达式&#xff0c;计算该表达式的值。 输入描述&#xff1a; 测试输入包含若干测试用例&#xff0c;每个测试用例占一行&#xff0c;每行不超过200个字符&#xff0c;整数和运算符之间用一个空格分隔。没有非法表达式。当一行中…

聪明灵犀:智能AI对话问答工具

这是一款功能强大的人工智能软件&#xff0c;支持ai智能对话与聊天。简单输入问题&#xff0c;即可快速获取相应答案&#xff0c;能够帮助用户快速生成各类文章&#xff0c;内容连贯、结构完整&#xff0c;能够满足用户的写作需求&#xff0c;有效提高写作效率。具备广泛的知识…

消息队列 (9)-消费者核心类的实现

目录 前言消费者类设计思路核心API总体代码 前言 我们上一篇博客,写了虚拟主机的实现, 在虚拟主机中需要用到俩个未实现的类,分别是验证绑定关键字和消费者类,接下来我们实现消费者类的核心代码 消费者类设计思路 在这个类中,首先我们要持有virtualHost对象来操作数据, 然后…

第十六次CCF计算机软件能力认证

第一题&#xff1a;小中大 在数据分析中&#xff0c;最小值最大值以及中位数是常用的统计信息。 老师给了你 n 个整数组成的测量数据&#xff0c;保证有序&#xff08;可能为升序或降序)&#xff0c;可能存在重复的数据。 请统计出这组测量数据中的最大值、中位数以及最小值&am…

【数据结构】‘双向链表’冲冲冲

&#x1f490; &#x1f338; &#x1f337; &#x1f340; &#x1f339; &#x1f33b; &#x1f33a; &#x1f341; &#x1f343; &#x1f342; &#x1f33f; &#x1f344;&#x1f35d; &#x1f35b; &#x1f364; &#x1f4c3;个人主页 &#xff1a;阿然成长日记 …

【雕爷学编程】Arduino动手做(199)---8x32位WS2812B全彩屏模块6

37款传感器与模块的提法&#xff0c;在网络上广泛流传&#xff0c;其实Arduino能够兼容的传感器模块肯定是不止37种的。鉴于本人手头积累了一些传感器和执行器模块&#xff0c;依照实践出真知&#xff08;一定要动手做&#xff09;的理念&#xff0c;以学习和交流为目的&#x…

git 报错 protocol ‘https‘ is not supported解决

报错原因&#xff1a;选择不了其他分支代码&#xff0c;甚至都看不到其他分支&#xff0c;我这边解决了两次报错&#xff0c;情况如下&#xff1a; 第一种报错&#xff1a; idea中刷新分支报错如下&#xff1a; Fetch Failed protocol https is not supported 话不多说&#…

echats词云无法显示空白问题解决

<script src"https://cdn.jsdelivr.net/npm/echarts5.4.3/dist/echarts.min.js"></script> <script src"https://oisanjavax.github.io/echarts-wordcloud/dist/echarts-wordcloud.min.js"></script>展示为空 原因为导入版本过高不…

如何共享笔记本电脑网络

为了让手机连接笔记本网络&#xff0c;我们通常通过在笔记本上安装诸如WiFi共享精灵来实现&#xff0c;其实没有那么麻烦&#xff1a; 1、在电脑上打开“设置”—>选择“网络和Internet”—>选择“移动热点”&#xff08;如果系统是Windows 7或更低版本&#xff0c;则需要…

Ansible从入门到精通【六】

大家好&#xff0c;我是早九晚十二&#xff0c;目前是做运维相关的工作。写博客是为了积累&#xff0c;希望大家一起进步&#xff01; 我的主页&#xff1a;早九晚十二 专栏名称&#xff1a;Ansible从入门到精通 立志成为ansible大佬 ansible templates 模板&#xff08;templa…