前端
迪迦 • 奥特曼
C/C++ coder
展开
-
关于谷歌浏览器的CSS调式中的Hover样式
今天的调式代码的时候,想找到网站的Hover样式,可是找了很长时都都没有找到。之后在百度一下,才明白当打开网页的时候,默认是非hover样式,如果需要看hover样式,需要进行勾选一下。勾选之后,才是hover样式。注:在勾选前要选中要调式的元素。原创 2023-03-29 11:36:13 · 717 阅读 · 0 评论 -
VScode 高亮选中内容
(1) 打开设置(2)在搜索框中搜索 workbench.colorCustomizations(3)(4) 添加如下代码:"workbench.colorCustomizations": { "editor.selectionHighlightBackground": "#f4f806" }添加完成后如下所示:转载 2021-11-09 10:12:57 · 707 阅读 · 0 评论 -
hammer.js的基本使用
一、前言移动端框架当前还处在初级阶段,但相对于移动端的应用来说已经有很长时间了。虽然暂时还没有PC端开发的需求量大,但移动端的Web必然是一种趋 势,在接触移动端脚本的过程中,最开始想到的是juqery。Jquery2.0版本及以上已经开始偏向移动端,如对h5的支持,但支持还是不够完善,希 望jq在后面的版本能够逐渐支持起来。最初在开发移动端Web的时候使用w3c标准的语法结构和原生的js开发,但相对来说开发量比较大,而且每一步都要考虑各移动端浏览器的兼容,像比 较让程序员头痛的大wp手机,很多事件都向转载 2021-11-09 09:26:07 · 1480 阅读 · 0 评论 -
axios拦截器之axios.interceptors.request.use和axios.interceptors.response.use(附示例代码)
1.请求拦截器(在请求之前进行一些配置)axios.interceptors.request.use(function(config){ //比如是否需要设置 token config.headers.token='wwwwwsdsdf' return config})2.响应了拦截器(在响应之后对数据进行一些处理)axios.interceptors.response.use(res=>{ let data=res.data //比如响应一些报错信息 return data}转载 2021-01-20 19:01:36 · 4249 阅读 · 0 评论 -
WebStorm关闭自动拆叠
很简单File -> Setting -> Editor -> CodeFolding把里面的所有的钩全部取消,点Apply就可以了。原创 2021-01-02 21:40:08 · 675 阅读 · 0 评论 -
overflow:hidden;的两个作用
overflow:hidden;1. 隐藏溢出当内容超过其父元素时,可以使用该属性和值将溢出的部分裁剪掉,使页面更加美观2. 清除浮动当子元素浮动时,给父元素添加overflow:hidden,按照它的第一个特性,应该将子元素超出的部分截掉,但是因为子元素有浮动,无法裁剪,所有只能由父元素增加高度去包裹住子元素,使得父元素拥有了高度,而这个高度是跟随子元素自适应的高度,这样就把浮动的子元素包含在父元素内了。...转载 2020-08-14 16:46:05 · 188 阅读 · 0 评论 -
user-select用法
前言做网页的时候,有些文字我们需要能被选中,有些我们不要能被选中,那么这就需要用到一个css属性了,那就是 user-select使用方法user-select: none|auto|text|contain|all; /*firefox浏览器*/-moz-user-select: none|text|all; /*safari、chrome浏览器*/-webkit-user-select: none|text|all; /*Safari中不支持该属性值,只能使用none或者text,或者转载 2020-08-14 16:38:41 · 949 阅读 · 0 评论 -
requestAnimationFrame详解
为什么要说它,源于看到的一道面试题:问题是用js实现一个无限循环的动画。首先想到的是定时器<!doctype html><html lang="en"><head> <title>Document</title> <style> #e{ width: 100px; height: 100px; background: red;转载 2020-08-13 21:19:27 · 2223 阅读 · 0 评论 -
css 规则中两个类连在一起是什么意思?
比如: .c1.c2 { text-decoration:underline; } 选择器中 .c1 与 .c2 直接连在一起,中间无空格、无逗号,表示什么意思?看个例子: head style type="text/css".c1 { color:#ff0000; }.c2 { font-style:italic; }.c1.c2 { text-decoration:underline; }比如:.c1.c2{text-decoration:underline;}选择器中 .c1转载 2020-08-10 18:32:50 · 2342 阅读 · 1 评论 -
vue学习之(prop传参、v-bind传参、$emit向父级发送消息、input组件上使用 v-model、事件抛值)
基本示例组件是可复用的 Vue 实例,且带有一个名字:在这个例子中是 。我们可以在一个通过 new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使用 <div id="components-demo"> <button-counter></button-counter> </div> <script> Vue.component('button-counter', {转载 2020-08-08 18:25:26 · 1906 阅读 · 0 评论 -
console 打印消息时,可以使用 %c 指定随后的文本样式; %s 可引用参数变量。
1. console.log 使用 加%cconsole.log('%c Merry Christmas!!', 'color:green;background:yellow;text-shadow:2px 2px black;padding: 10px;font-size: 30px')2、console.log 使用 加%sconsole.log('%c Merry %s', 'color:green;background:yellow;text-shadow:2px 2px black;pa转载 2020-08-01 15:56:29 · 832 阅读 · 0 评论 -
JS中的bind()方法
bind()方法主要就是将函数绑定到某个对象,bind()会创建一个函数,函数体内的this对象的值会被绑定到传入bind()第一个参数的值,例如,f.bind(obj),实际上可以理解为obj.f(),这时,f函数体内的this自然指向的是obj例子var a = { b : function(){ var func = function(){ console.log(this.c); } func(); },转载 2020-07-19 22:00:43 · 306 阅读 · 0 评论 -
nodejs 运行后报错 Error: Couldn‘t find preset “es2015“ relative to directory
亲测可用,但是可能有其他同学也是这样改的,但是不能修改,那这样的话,请大家留言哈,如果有其他的解决方法,我来更新哈。我是直接执行下面的命令,目录是自己放项目的地方,安装下就行了:```cnpm install --save-dev babel-clinpm install --save-dev babel-preset-es2015```这个时候在你的项目下就会有生成babel包新建.babelrc{ "presets": ["es2015"]}...转载 2020-07-17 21:50:45 · 470 阅读 · 0 评论 -
Vue中的scoped和scoped穿透
1.什么是scoped&emsp在Vue文件中的style标签上有一个特殊的属性,scoped。当一个style标签拥有scoped属性时候,它的css样式只能用于当前的Vue组件,可以使组件的样式不相互污染。如果一个项目的所有style标签都加上了scoped属性,相当于实现了样式的模块化。...转载 2020-05-24 22:49:29 · 627 阅读 · 0 评论 -
彻底理解js中this的指向
首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然网上大部分的文章都是这样说的,虽然在很多情况下那样去理解不会出什么问题,但是实际上那样理解是不准确的,所以在你理解this的时候会有种琢磨不透的感觉),那么接下来我会深入的探讨这个问题。 为什...转载 2020-04-19 19:19:50 · 191 阅读 · 0 评论 -
JavaScript函数的传参
JavaScript 中的函数传参是按值传递还是按引用传递呢?JavaScript 中的函数传参是按值传递还是按引用传递呢?ECMAScript 中所有函数的参数都是按值传递的。 摘自 JavaScript高级程序设计下面我们看一段代码function changeStuff(a, b, c) { a = a * 10; b.item = "ch...转载 2020-04-19 17:30:28 · 468 阅读 · 0 评论 -
浅谈JS变量提升
1. 变量提升 ES6之前我们一般使用var来声明变量,提升简单来说就是把我们所写的类似于var a = 123;这样的代码,声明提升到它所在作用域的顶端去执行,到我们代码所在的位置来赋值。function test () { console.log(a); //undefined ...转载 2020-04-19 17:07:19 · 241 阅读 · 0 评论 -
Vue中的插槽和作用域插槽
Vue中插槽的作用和使用方法定义一个名child子组件,为该子组件添加内容应该在子组件的template中定义,直接在父组件的<child>标签中定义的内容不会被渲染,如下例。<div id="root"> <child> 需要插槽才能渲染的内容 <p>Dell</p>...转载 2020-03-25 12:45:49 · 546 阅读 · 0 评论 -
VSCode vetur 格式化设置缩进为4个空格
在个人设置的json文 件里面添加如下代码: "vetur.format.options.tabSize": 4, "vetur.format.options.useTabs": false原创 2020-03-24 21:45:21 · 5959 阅读 · 5 评论 -
vue import 传入变量
直接看看样例:const item_component = item.component;item.component = () => import(`@/views/${item_component}`)对的,就是把那个变量放在${}就可以解析了,这个是在js里面解析变量的变法。但是它不是两具单引号,是键盘tab键上之上,1左面的那个键上的值,大家可以自己去找一下。注:再加一个...原创 2020-03-23 15:38:26 · 3806 阅读 · 2 评论 -
javascript中的getElementById、getElementsByName、getElementByTagName详解
getElementById、getElementsByTageName、getElementsByName的区别1、getElementById根据指定Id得到html元素,所以只能得到唯一的html元素对象, 如:<input type="text" id="username">var username=document.getElementById('username'...转载 2020-03-20 14:53:14 · 1969 阅读 · 1 评论 -
JavaScript中Math对象
先说我最关心的问题:Math不用new,因为它在装载脚本引擎时,就会new创建好了。JavaScript中Math对象是是一个固有对象,提供基本数学函数和常数。使用方法:```js Math.[{property | method}]```其中property是必选项。Math 对象的一个属性名,method是必选项。Math.对象的一个方法名。JavaScript中Math对...转载 2020-03-19 19:09:43 · 443 阅读 · 0 评论 -
vue中'. native'修饰符的使用
native是什么?.native - 监听组件根元素的原生事件。主要是给自定义的组件添加原生事件。官网的解释:你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。通俗点讲:就是在父组件中给子组件绑定一个原生的事件,就将子组件变成了普通的HTML标签,不加’. native’事件是无法触 发的(我觉的这个说法一点也不通俗)。举列说明这时点...转载 2020-03-05 11:56:51 · 1593 阅读 · 0 评论 -
vue中render: h => h(App)的详细解释
render: h => h(App) 是下面内容的缩写:render: function (createElement) { return createElement(App);}进一步缩写为(ES6 语法):render (createElement) { return createElement(App);}再进一步缩写为:render (h){ ...转载 2020-03-04 19:08:49 · 2189 阅读 · 0 评论 -
jQueryAjax同步异步区别
在项目开发过程中,要实现这么一个功能<!-- 当我点击就业的时候,触发onclick时间,check()方法里通过ajax请求返回数据, 如果该用户已经毕业可以跳转到job.html如果没有毕业不能跳转页面同时弹框提示 --> <a href="job.html" onclick="return check()">就业</a>我们都知道...转载 2020-02-28 22:12:48 · 338 阅读 · 0 评论 -
js中(function(){…})()立即执行函数写法理解
( function(){…} )()和( function (){…} () )是两种javascript立即执行函数的常见写法,最初我以为是一个括号包裹匿名函数,再在后面加个括号调用函数,最后达到函数定义后立即执行的目的,后来发现加括号的原因并非如此。要理解立即执行函数,需要先理解一些函数的基本概念,函数声明、函数表达式、匿名函数。函数声明:function fnName () {…}...转载 2020-02-27 23:31:13 · 412 阅读 · 0 评论 -
js中冒号的作用
js中常用到冒号的地方有三处,分别是:A ? B : C 三元操作符;switch case语句中;对象直接量;很明显上面的问题与这三者没有关系。标签语句。在js中,任何语句都可以通过在它前面加上标志符和冒号来标记:identifier: statement,这样就可以在任何地方使用该标记,最常用于for循环中。标签语句在for循环中的作用;代码如下:label1: for...转载 2019-12-31 17:12:40 · 718 阅读 · 0 评论 -
使用Vue写一个登录页面
上一博客讲到构建了一个vue项目,现在在那个项目之上实现一个登录页面。因为用到了element-ui组件,所以需要先安装element-ui组件,进入项目根目录后执行cnpm i element-ui构建项目的目录App.vue<template> <div id="app"> <router-view/> </div&...转载 2019-10-28 12:24:41 · 6092 阅读 · 8 评论 -
vue如何新建一个项目并使用webstorm运行
vue创建项目(npm安装→初始化项目)第一步npm安装首先:先从nodejs.org中下载nodejs双击安装,在安装界面一直Next直到Finish完成安装。打开控制命令行程序(CMD),检查是否正常使用淘宝NPM 镜像大家都知道国内直接使用npm 的官方镜像是非常慢的,这里推荐使用淘宝 NPM 镜像。$ npm install -g cnpm --regi...转载 2019-10-27 22:41:43 · 936 阅读 · 0 评论 -
在js中if条件为null/undefined/0/NaN/""表达式时,统统被解释为false,此外均为true哦
在js中if条件为null/undefined/0/NaN/""表达式时,统统被解释为false,此外均为true哦。Boolean 表达式一个值为 true 或者 false 的表达式。如果需要,非 Boolean 表达式也可以被转换为 Boolean 值,但是要遵循下列规则:所有的对象都被当作 true。当且仅当字符串为空时,该字符串被当作 false。null 和 undefin...转载 2019-07-26 11:12:09 · 1817 阅读 · 0 评论 -
ES6 对象内函数的两种写法
<script>// 写法1var person1 = { name: "p1", sayThis() { console.log(this); }};// 写法2var person2 = { name: "p2", sayThis:()=> { console.log(this); }...转载 2019-07-25 15:32:39 · 1310 阅读 · 1 评论 -
<a>中的协议
例子:<a href="javascript:;">我的大学</a>javascript: 是一个伪协议javascript:是表示在触发<a>默认动作时,执行一段JavaScript代码,而 javascript:; 表示什么都不执行,这样点击<a>时就没有任何反应。href="javascript:;"就是去掉a标签的默认行为,跟hre...转载 2019-04-07 08:11:21 · 236 阅读 · 0 评论 -
jquery表单form提交阻止页面全部刷新
在js里form表单用submit(),最后return false<script type="text/javascript">$(document).ready(function(){ $("#form1").submit(function(){ //事件处理 return false; });});</sc...转载 2019-03-08 07:26:25 · 1979 阅读 · 0 评论 -
去除vue上方的60px空白
新建的项目在app.vue的style中有个#app样式里面有个margin-top: 60px;的,把这个去掉就行了短短一句话,解决大问题啊!原创 2019-03-17 14:13:27 · 2218 阅读 · 7 评论 -
vue-cli · Failed to download repo vuejs-templates/webpaack: Response code 404
解决方法:执行三个命令检查环境1.node -v2.vue -v (没有显示版本,npm i vue-cli -g)3.webpack-v(需要重新安装,npm install webpack -g)三个条件满足时,运行vue init webpack demo(demo项目名)...转载 2019-03-16 08:36:30 · 3818 阅读 · 0 评论