![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端学习
沉迷学习-
这个作者很懒,什么都没留下…
展开
-
webpack中测试、演示、发布环境下打出不同的包(vue 、react)
1.不同环境下打包不同出不同的包vuevue项目中使用在.env.xxx(如:.env.test)中设置环境变量如:VUE_APP_REDIRECT_ADDRESS = ‘自定义变量值’.package.json中设置脚本即可获取对应.env.xxx的环境变量 “build:xxx”: “vue-cli-servicebuild --mode xxx”.代码中可以使用 process.env.VUE_APP_REDIRECT_ADDRESS 获取到变量的值(注意:如果要在客户端中使用这些原创 2021-09-27 18:54:37 · 195 阅读 · 0 评论 -
前端知识点
事件冒泡与捕获clientX,clientY,screenX,screenY,offsetX,offsetY区别更新中…原创 2020-05-28 15:46:05 · 167 阅读 · 0 评论 -
移动端使用fixed定位,导致ios底部内容显示空白
事情是这样的,在开发一个WabApp的时候使用到了购物车组件所以想通过fixed定位固定在浏览器底部,PC浏览器中调试用的iphone和Android都正常显示,如下图:Android手机真机同样正常显示,但是ios的真机测试的时候购物车组件就不能正常显示了,好像被东西挡住了,如下图。后来查阅资料后发现,原来是因为ios高度默认设置为100%,使用fixed定位悬浮元素是不算入高度的。...原创 2020-03-16 02:58:22 · 2272 阅读 · 2 评论 -
css实现文本超出部分...效果
第一种方法:先设定好文本的宽度,使用white-space设置不换行,超出部分隐藏,使用text-overflo属性ellipsis展示省略号#qw{ width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}使用第一种方法快速简单,但是有一定的局限性:只能单行文本实现…效果如果要...原创 2020-03-15 14:02:12 · 1352 阅读 · 0 评论 -
关于移动端适配的问题
移动端适配,就是WebAPP在不同屏幕上等比显示第一:使用viewport(配置视口)通过使用H5的标签进行适配不同设备 meta的使用>><meta name="viewport" content="width=device-width, //设置视口为设备屏幕的宽度, initial-scale=1.0, //设置页面的初始缩放值,为一个数字,可以带小数 ma...原创 2020-03-15 02:01:38 · 192 阅读 · 0 评论 -
常用的H5和CSS3总结
HTML5H5新增的语义化标签(常见): header 头部标签 nav 导航标签 article 内容标签 section 块级标签 aside 侧边栏标签 footer 尾部标签新增的多媒体标签: audio 音频 常见的属性: autoplay 音频在就绪后马上播放 controls 向用户显示控件,比如播放按钮 loop 每当音频结束时重新播放...原创 2019-11-25 23:02:36 · 277 阅读 · 0 评论 -
(前端学习)07 使用vue框架制作购物车小球动画效果
最近在学习前端制作了一个购物车小球的动画效果直接上图看看效果下面介绍一下制作这个动画的详细过程:1.因为使用vue锁业需要使用transition标签包裹 并指定动画三个动画生命周期函数<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"> ...原创 2019-09-24 14:33:24 · 955 阅读 · 0 评论 -
(前端学习)06-Vue.js框架Vue的生命周期
Vue的生命周期官方分为了三个阶段分为是,初始化运行中销毁而以我的个人理解是分为了两个阶段创建阶段监听阶段下面就以我的个人对Vue的理解来介绍一下Vue的生命周期的流程:Vue的生命周期一共有8个钩子函数List item//创建阶段 beforeCreate() {//这是我们遇到的第一个生命周期函数,表示实例完全被创建出来之前,会执行它 //cons...原创 2019-09-05 23:12:58 · 121 阅读 · 0 评论 -
(前端学习)05- 原生JS实现简单轮播图
HTML<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="carousel.css" /> </head&g...原创 2019-09-03 16:21:04 · 162 阅读 · 0 评论 -
(前端学习)04-jQuery基本使用
选择器:$("#xx") id选择器$(".xx") class选择器$("xx") 元素选择器事件:event.stopPropagation() 阻止父级事件event.stopImmediatePropagation() 阻止所有冒泡事件.bind("click",function) 事件绑定.unbind("click",function) 解除绑定H...原创 2019-09-03 15:33:28 · 97 阅读 · 0 评论 -
(前端学习)03-Javascript
var声明局部变量 没有var则为全局变量JS数据类型1.字符串(String)2.数字(Number)3.布尔(Boolean)4.数组(Array)[]5.对象(Object)6.空(null)7.未定义(Undefined)8.可以通过赋值为null的方式清除变量布尔类型("10"==10为true)===("10"===为false)!=(10!="10"为fals...原创 2019-09-02 21:02:16 · 119 阅读 · 0 评论 -
(前端学习)02-CSS
选择器abc 元素#abc id.abc class[abc] 属性加空格 派生选择器背景background-repeat 设置重复background-attachment 背景图像是否固定或者随着页面滚动background-position left top; (0px 0px;坐标距离上和左多少px)/* 两个值1.在哪里显示 2.在图片的哪个位置开始显示默认ce...原创 2019-09-02 20:54:32 · 110 阅读 · 0 评论 -
(前端学习)01-HTML
1.什么是HTML?HTML是用来描述网页的一种语言HTML指超文本标记语言(Hyper Text Markuo Language)HTML不是变成语言,是一种标记语言2.HTML5的新特性:用于绘画的canvas标签用于媒介回放的video和audio元素对本地离线存储的更好支持新的特殊内容元素如:article、footer、header、nav、section新的表单控...原创 2019-09-02 20:47:59 · 79 阅读 · 0 评论 -
JS基础知识整理01-字符串和数组
字符串 length属性 返回字符串的长度 检索匹配: indexOf/lastIndexOf(字符串,检索起始位置) 方法返回字符串中指定文本首次/最后出现的索引(位置):(无则返回-1) search(字符串) 作用跟indexOf一样,区别(1.没有第二参数,2.indexOf不支持正则,search支持) 提取部分字符串:(负值位置不适用 Internet...原创 2019-09-28 03:00:21 · 299 阅读 · 0 评论 -
CSS中Position详解
CSS中的position的四个属性值:static(默认):按照正常文档流进行排列;relative(相对定位):不脱离文档流,参考自身静态位置通过 top, bottom, left, right 定位;absolute(绝对定位):参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位;fixed(固定定位):所固定的参照对像是可视窗口。...原创 2019-10-10 18:22:34 · 196 阅读 · 0 评论 -
CSS中常用的display以及flex布局详解
CSS中常用的display整理:点击了解详细块元素与内联元素的具体区别none 此元素不会被显示inline 将元素变为内联元素(行内元素)block 将内联元素变为块元素 inline-block 将元素变为内联块元素(即可以设置长宽,也可以让padding和margin生效,又可以和其他内联元素并排)flex 弹性布局flex布局: 带*的个人觉得比较常用 ...原创 2019-10-08 15:21:13 · 500 阅读 · 0 评论 -
html中内联元素和块级元素的区别
1.下表列出了内联元素和块级元素的主要区别块级元素行内元素独占一行,默认情况下,其宽度自动填满其父元素宽度相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化可以设置width,height属性行内元素设置width,height属性无效可以设置margin和padding属性行内元素起边距作用的只有margin-left、ma...转载 2019-10-08 12:29:19 · 441 阅读 · 0 评论 -
JS 中的 __proto__ 、prototype、constructor
JS 中的 proto 、prototype、constructor 首先 先解释这三个属性:(1) prototype : 它是函数独有的,从一个函数指向一个对象(函数的原型),含义是函数的原型对象,也就是这个函数所创建的实例的原型对象。(普通函数的该属性没有作用)作用:让每一个实例共享同一套方法。(2) proto: 它是对象独有的,从一个对象指向一个对象。(即指向他们的原型对象,可以理...转载 2019-10-06 00:51:06 · 239 阅读 · 0 评论 -
JS基础知识整理06-函数
函数:使用function关键字定义函数函数声明会被提升(Hoisting),将声明移动到当前作用域顶端的默认行为。参数: 如果函数调用的参数太多(超过声明),则可以使用函数的内置对象arguments arguments.length 会返回函数被调用时收到的参数数目 arguments[index]可以得到相应的参数 传递对象的时候是使用引用来传递的,如果函数修改了对象...原创 2019-10-05 01:16:12 · 297 阅读 · 0 评论 -
(前端学习)-08 使用MUI的numbox的坑
今天在使用MUI的numbox的时候发现点击+和-都没有效果并且控制台也没有报错,卡了半天,这里就记录一下。首先是按照了官方文档一样导入包初始化import mui from '../../lib/mui/js/mui.js'在vue实例中初始化一下,一开始想在页面渲染好都可以进行初始化了所以就在mounted钩子函数中初始化mounted(){ mui(".mui-numbox...原创 2019-09-25 18:54:49 · 785 阅读 · 0 评论 -
JS基础知识整理04-一些零散的知识点
其他:Hoisting: Hoisting 是 JavaScript 将所有声明提升到当前作用域顶部的默认行为(提升到当前脚本或当前函数的顶部)。 1.会将函数提升到最上面, 2.然后再到变量的声明(var声明的才会被提升,let声明的不会提升), 3.最后再到正常的代码执行。this关键字: this指的是它的所属对象,它拥有不同的值,具体取决于它的使用位置: 在方法中...原创 2019-10-04 13:52:28 · 142 阅读 · 0 评论 -
JS基础知识整理03-正则表达式和Date对象
正则表达式:语法:/pattern/attributes; /模式/修饰符常用在: search() 返回首个匹配的位置。 match() 找到一个或多个正则表达式的匹配。 replace() 方法返回模式被替换处修改后的字符串。 split() 把字符串分割为字符串数组。 注意:参数传入的是正则表达式不是字符串,如下: var n = str.search(/abc...原创 2019-10-01 01:08:39 · 180 阅读 · 0 评论 -
JS基础知识整理02-数字、布尔和Math对象
数字:JS中只有一种数值类型 始终是64位的浮点数 var x = 123; //123 var x = 123.0; //123 var x = 123e5; //12300000 var x = 123e-5; //0.00123 关键字NaN -非数值(Not a Number) 指不是一个合法数 typeof NaN 返回为number类型 使用一个数除以一个非数...原创 2019-09-29 02:56:52 · 144 阅读 · 0 评论 -
JS基础知识整理05- JavaScript对象
JavaScript对象:JS对象是一种特殊的数据,拥有属性和方法 以键值对的形式储存定义对象如下:var person = { firstName: "Bill", lastName : "Gates", id : 678, fullName : function() { return this.firstName + " " + this.lastName;...原创 2019-10-04 23:34:43 · 113 阅读 · 0 评论