前端
佛系小菜鸡
这个作者很懒,什么都没留下…
展开
-
webpack入门
webpack安装webpack4.0以上的需要安装webpack-cli ,注意最好不要使用全局安装,踩了很多坑,还是没搞好,最好还是采用了局部安装,可能是我能力不太行。npm i webpack -Dnpm i webpack-cli -D在项目更目录下输入命 npm init -y会产生一个package.json文件,目录结构如下在项目根目录中,创建名为webpack.conf...原创 2020-03-01 17:28:00 · 127 阅读 · 0 评论 -
vscode中eslint语法报错问题
问题我们使用vue-cli创建项目,默认会启用eslint语法检验,虽然是个好东西,可以让我们的代码格式非常的规范,但是他过于严格的语法规范,比如不能加分号,使用单引号,代码结尾还有有一个空行等等过于严格的要求,让代码经常报错,与修改一个空格,一个分号的事就大大降低了开发效率,所以需要解除一些工具帮我们自动按照esllint进行代码自动规范化。解决我是使用了三个插件来实现保存自动进行代码规范...原创 2020-02-26 15:11:14 · 4255 阅读 · 3 评论 -
vue脚手架+Element-UI
vue脚手架vue脚手架用于快速生成Vue项目基础结构官方网址:https://cli.vuejs.org/zh/guide/installation.html安装npm install -g @vue/cli安装vue cli的包项目创建创建项目命令:vue create 项目名可以选择默认方式default,或者自定义安装,本次我所演示的是自定安装选择要安装的...原创 2020-02-26 14:23:36 · 523 阅读 · 0 评论 -
axios解决跨域问题
什么是跨域浏览器基于安全考虑,有同源策略的限制。所谓同源,就是两个页面具有相同的协议,域名以及端口号。所以如果请求页面的url和被请求页面的url的协议、域名或端口号中三者有一各不同,那么这个请求就被视为跨域了。axios解决跨域问题因为服务器端是不存在跨域问题,所以我们可以对发送的axios请求进行代理。具体步骤:1)在项目根目录下新建vue.config.js文件2)进行代理配置...原创 2020-02-26 14:22:31 · 889 阅读 · 0 评论 -
vscode终端无法使用webpack命令
问题在cmd中命令运行都是正常的,但是在vscode中就报错了,一脸懵,错误如下解决方案经过了多方百度查找,最终终于解决了输入命令Set-ExecutionPolicy -Scope CurrentUser然后再输入RemoteSigned成功解决...原创 2020-02-22 10:32:40 · 2409 阅读 · 9 评论 -
watch、computed和methods对比
watch通过watch 来监视data中的特定数据的变化,一旦数据发生变化,则调用function函数代码示例: // 通过wath监视data数据的变化,一旦变化就出发function,function的第一个参数为新数据,第二个参数为老数据 watch: { //firstName为data中的数据 firstName:func...原创 2020-02-22 10:30:55 · 144 阅读 · 0 评论 -
vue组件
vue组件组件的出现,就是为了拆分vue实例的代码量,能够让我们以不同的组件,来划分不同的功能模块,以后去调用即可。组件化和模块化的不同:模块化是从代码逻辑的角度进行划分的,方便后台代码的分层开发,保证每个功能模块的只能单一组件化是从UI界面的角度进行划分的,前端的组件化,方便UI组件的重用vue组件的创建方式1<body> <div id="app...原创 2020-02-20 12:03:58 · 132 阅读 · 0 评论 -
vue实例的生命周期
vue实例生命周期概念从Vue实例创建、运行到销毁期间,总是伴随着各种各样的事件,这些事件,我们统称为生命周期。生命周期钩子=生命周期函数=生命周期事件生命周期钩子beforeCreate()这是我们执行过程中遇到的第一个生命周期函数,表示实例完全被创建出来之前,会执行它注意:在beforeCreate生命周期函数执行的时候,date和methods中的数据都还没有被初始化crea...原创 2020-02-19 14:43:52 · 150 阅读 · 0 评论 -
vscode插件 livereload实现网页自动刷新
第一步在vscode中安裝livereload插件打开livereload快捷键ctrl+shift+p,搜索livereload,点击打开在chrome安装livereload插件插件下载地址:https://www.jb51.net/softs/568725.html#downintro2将crx文件的后缀改为.zip并进行解压进入扩展程序加载之前解压的插件,即能安装成功...原创 2020-02-17 15:00:01 · 9342 阅读 · 2 评论 -
v-show和v-if
共同点两者的作用都是根据表达式的真假切换元素的显示状态不同点v-if1)原理是修改元素的display样式,实现显示和隐藏的效果2)消耗的性能小v-show1)v-if的本质是通过操纵dom元素来切换现实状态,表达式的值为true,元素存在于dom树中,为flase,从dom树中移除。2)消耗的性能大适用场景频繁的切换使用v-show,否则使用v-if,因为v-if切换消耗...原创 2020-02-17 13:18:52 · 157 阅读 · 0 评论 -
Less
Less基础css存在的弊端css是一门非程序式与语言,没有变量、函数、scope(作用域)等概念css需要书写大量看似没有逻辑的代码,css冗余度是比较高的不方便维护和扩展,不利于复用css没有很好的计算能力非前端开发工程师,往往因为缺少css编写经验而很难写出组织良好且易于维护的css代码项目Less介绍Less是一门css预处理语言,它扩展了css的动态特性。在css的基...原创 2020-02-14 13:43:58 · 245 阅读 · 0 评论 -
CSS精灵技术
精灵技术css精灵其实是将网页中的一些小背景图像整合到一张大图中(精灵图),然而,各个网页元素通常只需要精灵页面中不同位置的小图。需要用到的cssbackground-imagebackground-repeatbackground-position属性进行背景定位其中最关键的就是使用background-position进行精确的定位为什么需要精灵技术为了有效减少服务器接收...原创 2020-02-14 11:47:39 · 303 阅读 · 0 评论 -
响应式开发(bootstrap)
响应式开发响应式开发原理使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目度。响应式需要一个父级作为布局容器,来配合子级元素来实现效果变化。就是在不同的屏幕下,通过配体查询来改变这个布局容器的大小,再改变子元素的排列方式呵呵大小,从而实现不同屏幕下,看到不同的页面布局和样式变化。常用的尺寸手机:设置宽度为100%平板:设置宽度为750px桌面显示器:设置宽度...原创 2020-02-13 23:19:17 · 344 阅读 · 0 评论 -
rem布局
rem基础em单位em单位是相对于父元素的,相对于字体大小来说的比如,父设置font-size=10px,非根元素设置width:2em,转换成px就是20pxrem单位rem,是一个相对单位,是相对于html也就是根元素,相对于字体大小来说的。比如,根元素(html)设置font-size=10px,非根元素设置width:2rem,转换成px就是20pxrem的优点:就是可以通...原创 2020-02-13 14:35:30 · 177 阅读 · 0 评论 -
flex布局(弹性布局)
传统布局与flex布局传统布局(float布局)兼容性好布局繁琐局限性,不能在移动端很好的布局flex布局操作方便,布 局极为简单,移动端应用很广泛pc端浏览器支持情况较差ie11或更低版本,不支持或仅部分支持建议如果PC端页面布局,我们还是使用传统布局,也就是float浮动布局如果是移动端或者不考虑兼容性问题的PC端页面布局,我们还是使用flex弹性布局fle...原创 2020-02-12 15:29:34 · 183 阅读 · 0 评论 -
jquery ui 菜单默认纵向改为横向
关键样式代码 .menu:after{ content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .menu>.ui-menu-item{ display: inline-block; ...原创 2020-02-11 15:09:14 · 335 阅读 · 0 评论 -
css实现瀑布流效果
多列在css3中,可以创建多列对文本或者区域进行布局属性:column-count:列的数量column-gap:列之间的距离column-rule: 列之间线的颜色,宽度等用多列实现瀑布流效果html代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <...原创 2020-02-05 14:03:36 · 228 阅读 · 0 评论 -
行内元素,块级元素,行内块元素
行内元素不能设置宽度和高度margin只能设置左右外边距不会自动换行,不能独占一行行内元素只能包括文字或行内元素、行内块元素,不能包括块级元素块级元素可以设置高度和宽度可以设置上下左右外边距块级元素独占一行,当没有设置宽高时,它默认设置为100%.块级元素可以包行内元素、块级元素多个块状元素标签写在一起,默认排列方式为从上至下行内块元素不能独占一行可以设置高度和...原创 2020-02-04 19:00:12 · 334 阅读 · 0 评论 -
CSS定位
CSS定位改变元素在页面上的位置CSS定位机制普通流元素按照其在HTML中的位置顺序决定排布的过程浮动绝对布局CSS position属性static(静态布局)与相对布局相差不大,但是偏移量对其不起作用relative(相对布局)相对布局,占据位置,可以通过left,right等属性进行位置的相对偏移通过更改z-index属性可以改变覆盖的顺序,谁的值大,谁在上面...原创 2020-02-04 14:22:38 · 210 阅读 · 0 评论 -
html5 表单新增元素与属性
表单内元素的form属性可以将比如textarea 写在form外面,而不是一定要加在form里面 <form id="testform"> <input type="text" name="name" /> <input type="submit" value="提交" formaction="提交地址1"/> <input typ...原创 2020-02-04 11:29:16 · 147 阅读 · 0 评论 -
html5新增主体结构元素
article定义和用法<article> 标签规定独立的自包含内容一篇文章应有其自身的意义,应该有可能独立于站点的其余部分对其进行分发。<article> 元素的潜在来源:论坛帖子报纸文章博客条目用户评论用article实现页面嵌套代码: <article> <h1>这是一个内嵌页面</h1> <...原创 2020-02-03 20:10:09 · 146 阅读 · 0 评论 -
内联框架iframe
通过iframe能够实现的功能是在网页中嵌套别的网页代码展示:iframeA<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body bgcolor="#808080" >...原创 2020-02-03 15:54:40 · 135 阅读 · 0 评论 -
HTML块
HTML块html块元素块元素在显示时,通常以新行开始如:<h1> <p> <ul>HTML内联元素内联元素通常不会以新行开始如:<b> <a> <img>HTML div元素div元素被称为块级元素,其主要是组合HTML元素的容器HTML span元素span元素是内联元素,可以作为文本的...原创 2020-02-03 14:07:07 · 116 阅读 · 0 评论