前端
源辰_付
这个作者很懒,什么都没留下…
展开
-
axios跨域写了withCredentials还是取不到值
http://127.0.0.1:8080/xxx即可。通过后台的输出课间,sessionId不一致。跨域请求的ip地址,不能写localhost。之后,session还是取不到值。原创 2023-07-17 11:14:44 · 503 阅读 · 0 评论 -
JQuery针对select下拉框的各项操作
JQuery针对select下拉框的各项操作转载 2023-01-03 11:06:23 · 1044 阅读 · 0 评论 -
vw/vh 与 百分比的区别
首先,vw与vh是一种视窗单位,也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗(Viewport)大小来决定的,单位 1,代表类似于 1%。 视窗(Viewport)是你的浏览器实际显示内容的区域—,换句话说是你的不包括工具栏和按钮的网页浏览器。vh和vw是要优于rem的,但是兼容性比较差,建议PC端可以优先使用百分比就不多解释了,都明白,那么来看看区别首先,vw,在浏览器没有横向滚动条的时候,vw和百分比,没多少区别,可能唯一的区别在于,百分比依赖父级大小,而vw没有,vw的浏览原创 2022-05-29 09:42:49 · 2336 阅读 · 0 评论 -
vue3.0 使用 less问题
今天在3.0版本里面,使用了less,还是很舒服的,当当当,在vue ui里面一路安装下来,发现冒得问题,还在感慨,不错,兼容,然后嗒嗒嗒开始敲代码,敲了两行css,发现,问题来了Syntax Error: TypeError: this.getOptions is not a function报的是less的错,诶,我就知道,于是乎,开始捣鼓1、首先,看看,less与less-loader兼不兼容vue3.0兼容2、版本问题首先,先看看我的版本:"less": "^4.1原创 2022-05-29 09:22:35 · 1584 阅读 · 0 评论 -
computed和methods的区别
computed在vue中是一种计算属性,在使用中有以下特点:1.在书写时computed有个很明显的特点--必有返回值,2.在系统刚运行的时候会调用一次,在数值发生变化的时候会一直执行,而不是调用的时候执行,所以在持续输入时会很消耗性能3.在调用时直接将返回值 视为一个变量值就可使用,无需进行函数调用。4.当计算结果不变时,该函数仅会调用一次,这是computed的缓存功能,合理使用会大大提高代码的运行速度methods在vue中是一种方法,特点如下:1.页面刚加载时调用一次,后期只有被调用时才原创 2022-03-28 11:39:52 · 1154 阅读 · 0 评论 -
VM1158:32 Uncaught SyntaxError: Unexpected token ‘}‘
今天来说说,不使用大前端开发系列工具的情况下,直接用cnd引入vue做项目,遇到的一个小bug首先,报错提示如图:这个错误提示,还是很明显的,波浪线位置为:<img :src="`images/${image}`/">但是,我们实际的书写代码为:<img :src=`images/${image}`/>主要是用到模板字符串,来拼接v-for循环的内容,思前想后,没问题啊,咋可能这样又问题,这括号也没错啊后来,在我不经意间,巧了一个空格之后,世界又恢原创 2022-03-14 21:55:45 · 619 阅读 · 0 评论 -
Vue3.x的小问题: Unhandled error during execution of scheduler flush
首先,抛出问题嗷,一个警告,然后一个很明显不可能发生的错误:Unhandled error during execution of scheduler flush上面这是一个警告,错误是说,我的name属性不对Uncaught (in promise) TypeError: Cannotread property 'name’ of null但是,我的网页是一切正常的,于是,陷入了沉思......思考了一阵过后,开始逐行排查,发现,问题出在这一行代码<h3>{{g原创 2022-02-14 09:38:23 · 32695 阅读 · 1 评论 -
axios在vue3.0的版本下解决跨域
首先,这种跨域,是一种伪跨域,使用的是代理的方式1、vue.config.js由于vue3.0隐藏了vue.config.js,因此,我们首先要在项目的根目录创建一个vue.config.js文件,进行跨域的配置2、编码module.exports = { devServer: { proxy: { '/api': { // /api是习惯性的写法,可以随意改 target: 'xxxxxxx', //接口域名原创 2022-01-22 16:18:56 · 1883 阅读 · 0 评论 -
你不了解的querySelector
1.API介绍先看看MDN上怎么介绍这个API的:概述返回当前文档中匹配一个特定选择器的所有的元素(使用深度优先,前序遍历规则这样的规则遍历所有文档节点) .返回的对象类型是 NodeList.语法elementList = document.querySelectorAll(selectors);elementList 是一个non-live的 NodeList 类型的对象.selectors 是一个由逗号连接的包含一个或多个CSS选择器的字符串.如果 selectors参数中包转载 2021-12-14 16:32:56 · 2117 阅读 · 0 评论 -
CSS案例-爱心飘落
需要借助插件 实现类似雪花飘落的爱心飘落<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>爱心飘落</title> <meta name="keywords" content="爱心飘落,html,css,js"> <meta name='description' conte...转载 2021-12-14 16:19:57 · 268 阅读 · 0 评论 -
关于Vue3.0引入Element-plus报错
应该是版本问题,用vue-cli新建vue3.0的项目没问题,然后引入Element-plus则项目直接报错,是版本不兼容,如果要用的话,建议不要使用npm安装Element-plus了,可以使用vue add element-plus详情参考我的:https://blog.csdn.net/u011724770/article/details/113996287?spm=1001.2014.3001.5501...原创 2021-08-15 23:52:27 · 10773 阅读 · 2 评论 -
js日常迷惑行为
前几天无意间看到一个有趣的问题:if(a==1&&a==10){console.log("hello world");}请问到a为何值时,会输出hello world我咋一看的时候,觉得这不是神经嘛,变量a怎么可能同时等于两个值,不过后来想了下,发现,我陷入了惯性思维,默认吧a当做是一个普通的变量了。如果是普通的变量,那么是不太可能(应该吧)同时等于两个值的,要同时等于两个值,那么势必要有能力在执行的时候能够动态改动值。如果出于这种出发点,我们是...原创 2021-07-12 09:15:10 · 178 阅读 · 0 评论 -
JavaScript交换两个变量值的七种解决方案
这篇文章总结了七种办法来交换a和b的变量值 1 2 var a = 123; var b = 456; 交换变量值方案一最最最简单的办法就是使用一个临时变量了,不过使用临时变量的方法实在是太low了 1 2 3 4 var t; t = a; a = b; b = t; 首先把a的值存储到临时变量中,然后b赋值给a,最后拿出临时变量中的a值赋给b,这个办转载 2021-07-05 10:25:42 · 2469 阅读 · 0 评论 -
react 解决this.setState修改数据异步问题
解决异步:1、nextState(推荐)importReactfrom'react'classHomeextendsReact.Component{constructor(props){super(props);this.state={data:0}}componentDidMount(){this.timer=setInterv...转载 2021-05-21 11:13:51 · 913 阅读 · 0 评论 -
vue中ref的作用
vue中的ref其实功能很强大,下面介绍一下如何使用。基本用法,本页面获取dom元素<template> <div id="app"> <div ref="testDom">11111</div> <button @click="getTest">获取test节点</button> </div></template><script>export defa.转载 2021-04-07 13:25:08 · 285 阅读 · 1 评论 -
vue3.0引入axios
首先,我们要知道axios是一个库,并不是vue中的第三方插件,使用时不能通过Vue.use()安装插件,需要在原型上进行绑定import Vue from 'vue'import axios from ‘axios’Vue.prototype.$http = axios然而,在vue3.0,并不是直接创建的vue实例,而是通过createApp来创建的createApp(App)那么问题就来了,这样的话,没办法获取到vue的实例(ps:如果有办法获得,去绑定原形链,也麻烦告知一原创 2021-03-05 17:10:49 · 15793 阅读 · 4 评论 -
Vue3.x引入element-ui
注意目前element-ui只支持Vue2.6以下的版本,如果想在Vue3.0使用这个组件库,就要使用element-plus注意!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!不叫element-ui了,叫element-plus,去他喵的.......安装起来也很简单,进入到根目录,然后vue add element-plus即可,会自动安装然后在main.js 中引入即可import { createApp } from 'v..原创 2021-02-23 17:08:59 · 9491 阅读 · 7 评论 -
Error: Cannot find module ‘webpack-cli/bin/config-yargs
前文:在安装了webpack,webpack-cli 以及 webpack-server后,npm run dev出错原因:版本不兼容附带我目前的版本信息:"webpack": "^5.23.0","webpack-cli": "^4.5.0","webpack-dev-server": "^3.11.2"参考网址:https://github.com/webpack/webpack-dev-server/issues/2759解决方法:修改package.json..原创 2021-02-21 16:28:45 · 143 阅读 · 0 评论 -
安装vue-devtools
1、首先,下载git ps:原始的git地址,下载速度很慢,推荐使用idm下载2、下载安装好git后,在桌面进入git,然后切换到你需要安装的磁盘目录,不要有中文 git clone https://github.com/vuejs/vue-devtools3、切换到vue-devtools目录 cd vue-devtools4、安装 npm install 如果npm太慢了,那么建议使用淘宝镜像,先安装淘宝镜像 npm install -g ..原创 2021-01-25 17:05:43 · 125 阅读 · 0 评论 -
requestAnimationFrame详解
为什么要说它,源于看到的一道面试题:问题是用js实现一个无限循环的动画。首先想到的是定时器<!doctype html><html lang="en"><head> <title>Document</title> <style> #e{ width: 100px; height: 100px; background.转载 2020-12-03 20:50:03 · 2169 阅读 · 0 评论 -
img和div之间有间隙的原因及解决方法
原因:div 中 存在 img标签,由于img标签的display:inline-block属性。 display:inline-block布局的元素在chrome下会出现几像素的间隙,原因是因为我们在编辑器里写代码的时候,同级别的标签不写在同一 行以保持代码的整齐可读性,即inline-block布局的元素在编辑器里不在同一行,即存在换行符,因此这就是著名的inline-block“换行 符/空格间隙问题”。如果inline-block元素间有空格或是换行产生了间隙,那是正常的,应该...原创 2020-11-29 19:30:20 · 3804 阅读 · 1 评论 -
JS生成不重复随机数
对于随机数,我们可以通过Math.random()的方法轻松的生成 一个随机的数字,但是这个数字可能是重复的。有时候,我们需要一个不重复的随机数,可以用很多的方法来实现这个要求,以下方法是效率在我看来是最高的,利用的是随机排序 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&g...原创 2020-10-26 20:32:23 · 3100 阅读 · 0 评论 -
用CSS3实现无限循环的无缝滚动
导语: 在页面中循环展示信息的功能之前一般是用js来实现的,那么用CSS3该如何实现实现呢有时候在页面的某个模块中,需要无限循环的滚动一些消息。那么如果我们用js实现无缝衔接滚动的思路是什么呢(比如我们这个模块是向上滚动的)? 克隆A一份完全一样的数据B放在原数据A的后面; 使用setInterval向上滚动A的父级容器; 当向上滚动的距离L正好的A的高度时(L==A.height()),L=0,重新开始滚动,无限循环。 克隆一份数据放在后面,是为了当A向上移动时,后面有数转载 2020-10-19 16:18:28 · 1265 阅读 · 1 评论 -
CSS八种让人眼前一亮的HOVER效果
一.发送效果HTML<divid="send-btn"> <button> // 这里是一个svg的占位 Send </button></div>CSS#send-btn{ display: flex; align-items: center; justify-content: center; height: 100vh;}button { background: #5f55af; b...转载 2020-09-07 11:26:03 · 253 阅读 · 0 评论 -
css中常见margin塌陷问题之解决办法
当两个盒子在垂直方向上设置margin值时,会出现一个有趣的塌陷现象。①垂直并列 首先设置两个DIV,并为其制定宽高 1 /*HTML部分*/ 2 <body> 3 <div class="box1">box1</div> 4 <div class="box2">box2</div>...转载 2020-04-06 10:40:09 · 797 阅读 · 0 评论 -
js对象的深度克隆
在聊JavaScript(以下简称js)深度克隆之前,我们先来了解一下js中对象的组成。在js中一切实例皆是对象,具体分为原始类型和合成类型:原始类型对象指的是Undefined、Null、Boolean、Number和String,按值传递。合成类型对象指的是array、object以及function,按址传递,传递的时候是内存中的地址。克隆或...转载 2020-02-24 10:42:46 · 1132 阅读 · 0 评论 -
vue实现侧边栏手风琴效果
模板代码如下html<template> <div class="header"> <ul> <!-- 循环数据在点击调用changeli方法时将当前索引和本条数据传进去,并使用当前数据show的bool值添加或移除样式 --> <li :class=...转载 2020-02-03 10:00:57 · 1385 阅读 · 0 评论 -
canvas结合js画字_1
上一篇文章已经讲解了一下canvas的常用API,所以本章不再重复一遍,首先,我们先把页面做出来:无标题文档 canvas{ display:block; margin:0pxauto; } 你的浏览器不支持canvas,请更新浏览器原创 2016-03-20 10:47:19 · 1256 阅读 · 0 评论 -
30个你 “ 不可能全部会做 ” 的javascript题目及答案
1,以下表达式的运行结果是:["1","2","3"].map(parseInt)A.["1","2","3"]B.[1,2,3]C.[0,1,2]D.其他 2,以下表达式的运行结果是:[typeof null, null instanceof Object]A.["object",false]B.[null,false]转载 2016-04-05 12:52:12 · 588 阅读 · 0 评论 -
canvas的应用
OK,今天,我们来一起讲一讲画布canvas的一些简单应用,在网页上"画"出自己的姓名出来。那么首先,我们要理解一下canvas有哪些常用的API,一起来看看:canvas.getContext('2d'); 获取上下文beginPath():开始绘制closePath():绘制结束strokeStyle():画笔样式stroke():绘制lineWidth():原创 2016-03-14 12:26:41 · 855 阅读 · 0 评论 -
被玩坏了的web前端:前端冷知识
前端已经被玩儿坏了!像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Quora上一个帖子,瞬间又GET了好多前端技能,一些属于技巧,一些则是闻所未闻的冷知识,一时间还消化不过来。现分类整理出来分享给大家,也补充了一些平时的积累和扩展了一些内容。HTML篇浏览器地址栏运行JavaScript代码转载 2016-04-10 10:45:36 · 106202 阅读 · 0 评论 -
js实现360度拖拽图片
3D拖拽相册 body{ background-color:#000; } *{ padding:0px; margin:0px; }#perspective{ perspective: 1000px; /*设置视角距舞台的距离还可已设置是否透视,默认为否*/}#wrap{widt转载 2016-04-18 14:20:39 · 1043 阅读 · 0 评论 -
Jquery 获取对象的几种方式详细介绍
1、JQuery的核心的一些方法 each(callback) '就像循环 $("Element").length; ‘元素的个数,是个属性 $("Element").size(); '也是元素的个数,不过带括号是个方法 $("Element").get(); ‘某个元素在页面中的集合,以数组的形式存储 $("Element").get(index); '功能和上面的相同,in转载 2016-05-02 10:59:35 · 593 阅读 · 0 评论 -
20常用正则表达式
正则表达式经常被用于字段或任意字符串的校验,如下面这段校验基本日期格式的JavaScript代码: var reg = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/; var r = fieldValue.match(reg); if(r==null)alert('Date format error!'); 1 . 校验密码强度转载 2016-05-16 14:17:30 · 231 阅读 · 0 评论 -
JS鼠标事件大全
一般事件 事件 浏览器支持 描述 onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 onDblClick IE4|N4|O 鼠标双击事件 onMouseDown IE4|N4|O 鼠标上的按钮被按下了 onMouseUp IE4|N4|O 鼠标按下后,松开时激发的事件 onMouseOver IE3|N2|O3 当鼠标移动到某对象范围的上方转载 2016-05-28 19:53:11 · 216 阅读 · 0 评论 -
js实际应用之一:密码加密
对于利用js密码加密这一块,我们一般要用到其他的API,在这里,我们用的是CryptoCrypto下载地址:https://code.google.com/archive/p/crypto-js/downloads Crypto的API:https://code.google.com/archive/p/crypto-js/ 代码如下:原创 2016-05-09 08:29:12 · 344 阅读 · 0 评论 -
基于视窗单位的排版
我之前有写过基于rem和em的响应式排版,并且也有写过两篇有关模块化组件的博客。在这些文章中,有关视窗单位的评论不可避免的形成了一个话题。曾经一段时间我十分抵制使用视窗单位,因为其中的计算实在让人感到十分痛苦。上周,我终于克服了这个困难,决定探索一下视窗单位以及如何在响应式排版中使用它们。在我们开始探索视窗单位以及如何运用它们之前,让我们先了解一下什么是视窗单位。什转载 2016-04-24 21:14:01 · 349 阅读 · 0 评论 -
JavaScript类和模块
转载地址:http://blog.csdn.net/byrantch/article/details/51477400类在JavaScript中,类的实现是基于原型继承机制的。如果两个实例都从同一个原型对象上继承了属性,我们说它们是同一个类的实例。构造函数从某种意义上讲,定义构造函数即是定义类,所以构造函数名首字母要大写,而普通的函数都是首字母小写。// 构造函转载 2016-05-23 10:32:01 · 250 阅读 · 0 评论 -
onunload、onbeforeunload事件详解
onunload,onbeforeunload都是在刷新或关闭时调用,可以在脚本中通过 window.onunload来调用。区别在于onbeforeunload在onunload之前执行,它还可 以阻止onunload的执行。onbeforeunload 是正要去服务器读 取新的页面时调用,此时还没开始读取;而onunload则已经从服务器上读到了需要加载的新的页面,在即将替换掉当前页面转载 2016-06-06 10:10:25 · 2425 阅读 · 0 评论 -
js事件流
这些日子我就把js的相关知识梳理一下,今天来说javascript中的事件流。1.事件流事件流:从页面中接收事件的顺序。也就是说当一个事件产生时,这个事件的传播过程,就是事件流。IE的事件流 IE中的事件流叫事件冒泡;事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档)。对于html来说,就是当一个元素产生了一个事件,它会把这个事件传转载 2016-06-13 17:52:38 · 311 阅读 · 0 评论