web前端
MelodyFreedom
这个作者很懒,什么都没留下…
展开
-
父子组件中,父子之间相互访问值。父组件获取子组件的值,用$.refs.来获取
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title&...原创 2021-06-03 18:15:50 · 358 阅读 · 0 评论 -
vue中父子组件通信,父组件中的数据传到子组件,子组件使用不影响父组件的值,解决Avoid mutating a prop directly since the value will be
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title&...原创 2021-06-03 15:55:50 · 414 阅读 · 0 评论 -
v-model在各个标签中使用实现(input,radio,checkbox,select)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.原创 2021-06-03 11:10:15 · 1225 阅读 · 0 评论 -
flex布局
flex布局就是弹性布局flex布局父项常见属性,以下六个1,flex-direction:设置主轴方向(row,row-reverse,column,column-reverse)2.justify-content:设置主轴上的子元素排列方式(flex-start,flex-end,center,space-around,space-between),先确定主轴方向,然后再设置个属性。3.flex-wrap:设置了元素是否换行(默认不换行,如果装不开,就会缩小子元素的大小)(wrap,no原创 2020-05-16 00:19:12 · 288 阅读 · 0 评论 -
前端浏览器跨域请求的方式
因为浏览器的同源策略(协议,域名,端口号),在访问不同源的数据时,就产生了跨域问题,跨域问题常见的解决方法有以下几种: 1.jsonp跨域解决方案 2.cors跨域资源共享 3.基于http proxy实现跨域请求 4.基于post message实现跨域处理 5. 基于iframe的跨域解决方案 6.websocket和nginx反向代理1.jso...原创 2020-05-14 11:21:16 · 239 阅读 · 0 评论 -
vue代理请求跨域的时候,出现了这样的问题 Request failed with status code 404
用vue-cli创建了一个项目,在做登录界面的时候,需要向服务器发送请求获取数据,因为这边做的数据是通过easymock来完成后端服务器数据模拟返回到客户端的,所以需要跨域解决,请求数据的方式是通过axios来的,但是却遇到这个问题,现在一步一步问题重现:登录界面代码这里是env.development中配置的(配置的时候路径常量一定要用VUE_APP开头)创建的统一的请求接口request,是请求axios的实例对象(一定要先下载(npm install axios)并导入ax原创 2020-05-13 22:01:54 · 9402 阅读 · 1 评论 -
BFC块级格式化上下文
BFC(block formatting context )块级格式化上下文 ,究竟是什么呢?看完就明白了。。BFC 目的是什么?目的是为了形成一个完全独立的空间,让空间中的子元素不会影响到外面的布局,怎么样才能形成这样一个独立的空间呢,可以通过设置元素的属性,如果我们设置了某个元素的属性,这个元素的属性使得这个元素形成了一个独立的空间,那么就可以说触发了BFC,到这里还没有明白怎么回事,甚至更加不明白说了什么?接下来看个例子:一:解决父元素坍塌的问题以下是一个正常的页面,我们看到效果如下.原创 2020-05-12 22:34:49 · 284 阅读 · 0 评论 -
npm包管理工具
npm是包管理工具,它更加是node.js平台的包管理工具,npm就像后端的maven一样管理包,而npm是下载上传前端的包的。需要使用npm包管理工具,首先得下载这个工具,node.js中集成了npm包管理工具,所以先去node.js官网去下载安装node.js,安装完成后,我们用npm初始化一个项目1.npm初始化项目:创建一个文件夹,打开命令行工具,使用npm init -y(这里-y指的是所有选项选择默认值)初始化一个项目,如下图左侧是文件夹,右侧是npm初始化项目命令行截图。2.初原创 2020-05-11 20:08:59 · 719 阅读 · 0 评论 -
数组API汇总
数组apies3中的方法:join(),reverse(),sort(),concat(),slice(),splice(),push(),pop(),unshift(),shift(),toString(),toLocalString();es5的时候,数组新增的方法forEach(),map(),filter(),every(),some(),reduce(),reduceRight(),indexOf(),lastIndexOf()以下详细介绍各个数组方法的用法:1.join().原创 2020-05-11 16:43:53 · 240 阅读 · 0 评论 -
点击事件不响应的问题
1/ 项目中遇到了几个点击问题不响应的问题,现在总结几点如下。 第一种 :在一个父div上面写了一个子div,刚开始时候,点击子div的时候(对子div阻止了时间冒泡),子的div的点击事件是可以触发的,但是等到第二次点击了父div后再点击子div,子div的事件不再触发,后来追踪到,是因为在触发父元素的时候,对父元素中的相关的布局进行了修改改变,改变使用的是dom重排,使用了$("newpa原创 2017-07-26 18:51:45 · 4322 阅读 · 0 评论 -
jquery选择器
1、选择器 x y和选择器 x>y 的区别。比如 x y选择的是x的后代元素y ,而x>y选择的是x的直接后代元素(不包括后代的后代);例如:#container ul{ border:red 1px solid;} List Item Child原创 2016-08-11 17:38:21 · 303 阅读 · 0 评论 -
js闭包
1、什么是闭包(摘自知乎中什么是闭包)书中:闭包是指在javascipt中,内部函数总是可以访问其所在的外部函数中申明的参数和变量,即使在外部函数被返回之后。维基百科中:闭包(Closure)是词法闭包(Lexical Closure)的简称,是引用了自由变量的函数。这个被引用的自由变量将和这个函数一同存在,即使已经离开了创造它的环境也不例外。2、示例 v转载 2016-07-12 10:41:43 · 274 阅读 · 0 评论 -
C:set 标签设置(绝对路径的设置)
1、jsp页面中添加如下代码2、引用路径时候采用的绝对路径,引用时候就可以直接如下示例:原创 2015-12-09 16:01:27 · 2988 阅读 · 0 评论 -
动态添加css样式至文件中
1、写如下代码:function includeLinkStyle(url) {var link = document.createElement("link");link.rel = "stylesheet";link.type = "text/css";link.href = url;document.getElementsByTagName("head")[0].ap原创 2016-01-08 10:47:20 · 349 阅读 · 0 评论 -
快速两次单击事件导致两次单击事件和一次单击事件的产生问题的处理
1、单击事件的快速点击两次,出现了双击事件:处理方法:1.单击事件中,对该元素的双击事件禁止。添加如下代码:ondblclick="javascript:return false;"2、单击事件中添加代码如下,就不会多次执行单击事件:$('#button').click(function(){var obj=$(this);if(obj.hasClass('buttonClic原创 2015-12-14 16:12:27 · 949 阅读 · 0 评论 -
快速单击触发双击事件解决方案
1、在该元素上禁止双击事件:ondblclick="javascript:return false;2、多次单击导致多次的事件执行多次:$("#button").click(function(){ var click_obj = $(this); if(click_obj.hasClass('hasClick')){ retur原创 2015-12-14 16:28:24 · 908 阅读 · 0 评论