柚子讴歌的博客

柚子讴歌的博客

温柔只给意中人,真情只待有缘人

vue中遇到的一些问题总结

1、今天在公司修改样式的时候发现引入Element-UI的tooltip组件之后,想对tootip的样式进行自定义修改,结果发现无论怎么设置选择器的优先级,都渲染不到页面上,后来经过一系列的尝试之后发现是由于给style设置scoped造成的,本身设置scoped是为了防止全局样式冲突,结果没想到会造成自定义的样式渲染不上,后来经过思考测试,其实是可以将组件内修改tooltp的样式放到全局css中,不过需要给对应的元素设置类型,比如tooltip可以通过popper-class=”tooltip”设置类名,然后给这个类名添加样式。 2、在进行vue页面编写时经常会用到数据绑定,在渲染页面...

利用hover控制其他元素样式

之前在项目中有一个需求是鼠标移入元素上时该元素改变样式的同时另外元素样式也要改变,刚开始想利用js来实现,不过有点麻烦,之后发现可以通过css直接来实现这个功能,本着人无我有,人有我优的原则,在这里记录一下具体过程。 首先我经过尝试以及网上查找之后,发现利用hover来实现这个功能是有一定局限性的,如果你要改变其他元素的样式,那么它们必须是相邻同级元素或者是同一父元素的子元素,不然效果是出不来的(呜~) 相邻同级元素HTML <div class="div1"> <div class="son1">son1 </div> <...

深拷贝与浅拷贝

浅拷贝 浅拷贝指只是指向被复制的内存地址,如果原地址中对象被改变了,那么浅拷贝的对象也随之改变(假设B复制了A,当A被修改时,B也会改变) demo: let a = [1,2,3,4]; b = a; console.log(a === b); //判断a,b是否相等 a[2] = 1; console.log(a,b); 深拷贝 深拷贝不仅将原对象的各个属性复制,而且将原对象各个属性所包含的对象递归复制到新对象上。 demo: function deep(obj){ let objClone = Array.isArray(obj)?[]:{}; i...

函数的防抖与节流

函数防抖 函数防抖指的是多次触发某一事件之后,事件只执行一次,而且是最后一次触发的时候(可以理解为函数执行过一次之后,在等待时间段内不能再次执行;如果在等待时间内触发函数,就重新计算等待时间)【参考坐电梯】 使用场景: 文本输入验证 mousemove和mousedown事件 demo: const _.debouce = (func,wait) => { let timer; return () => { clearTimeout(timer); timer = setTimeout(func,wait); } } 函...

Web安全攻击方式

xssxss是跨站脚本攻击,指攻击者在网页中嵌入客户端脚本,当用户浏览次页面时,脚本就会在用户浏览器上执行,从而达到攻击目的 比如我们下载有这么一个代码 <input type=”text” name=”address” value=”valuefrom”> valuefrom是来自用户的输入,如果用户不是输入valuefrom而是输入”/><script>alert(document.cookie)>/script><!-,即变成 <input type=”text” name=”address” value=””/>&...

安装mongodb遇到的坑

mongodb是一个基于分布式文件存储的开源数据库系统,它主要为WEB应用提供可扩展的高性能数据存储解决方案。下面我说说具体的安装过程 我在官网上下载最新3.6版本并在windows下安装会出现进度条长时间不动的情况,这是因为3.6版本在windows下有不适配的问题,需要我们下载3.4版本安装 (我的安装路径是C:\Program Files\MongoDB) 下载安装完成之后,需要添加安装路径到path环境变量:C:\Program Files\MongoDB\Server\3.4\bin 我们在D盘创建如下文件夹D:\mongodb\data D:\mongodb\logs 在命...

使用express配置前端服务器

使用webpack打包vue项目之后会生成dist文件夹,dist文件夹下面有html文件和其他的css,js和img等文件,如果你要查看打包之后的文件怎么办,这时候我们可以将生成的dist文件部署到express服务器上运行。 首先我们需要安装express-generator生成器 npm install express-generator -g 创建express项目 express expressname(项目名称) 进入项目目录,安装相关项目依赖 cd expressnamenpm install 将dist文件夹下生成的文件复制到express项目下的public文件夹...

自适应布局的几种方法

自适应布局的几种方法 百分比1<meta name="viewport" content="width-device-width,initial-scale=1" viewport是网页默认的宽度和高度,width=device-width即网页宽度默认等于屏幕宽度,initial-scale=1即原始缩放比例为1.0,网页初始大小占屏幕面积的100%。 由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用绝对宽度的元素,如css不能指定像素宽度,只能指定百分比宽度,字体不能使用绝对大小px,而只能使用相对大小em。 @me...

优雅降级与渐进增强

优雅降级与渐进增强 优雅降级(Graceful Degradation):一开始就构建站点的完整功能,然后针对浏览器测试和修复。比如一开始使用CSS3的特性构建了一个应用,然后逐步针对各大浏览器进行测试使其可以再低版本浏览器上正常浏览。 渐进增强(Progressive Enhancement):一开始就针对低版本浏览器进行构建页面,完成基本的功能,然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。 渐进增强相当于向上兼容,而优雅降级相当于向下兼容,向下兼容指的是高版本支持低版本的或者说后期开发的版本支持和兼容早期开发的版本,向上兼容的很少,大多数软件都是向下兼容的 区别 优...

了解Vue-router

Vue-router通过Vue我们可以实现组件化开发,而各组件之间如何跳转呢,在我们第一次项目用gulp构建工具开发时,页面跳转是通过a标签的href属性实现的,不过在Vue中,页面跳转是通过路由实现的,路由的配置就成了一个需要学习的问题 路由实现页面跳转首先需要安装插件 npm install vue-router –save 之后在 main.js 里面写入 import VueRouter from ‘vue-router’ Vue.use(VueRouter) 通过它来引入 vue-router ,之后进入 /router/index.js 文件,同样先引入 impo...
柚子讴歌
喜欢是淡淡的爱
FRIENDS
bilibili dilidili