![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端开发
文章平均质量分 91
夏天的风欧阳冰嫣
这个作者很懒,什么都没留下…
展开
-
轮播的实现
轮播效果:hover的时候过度改变图标。实现方法: 对a标签添加两个伪类:before,:after,inline-block,使用content:' ' 占位,给两个伪类添加背景图片。 <div class="header-logo"> <a href="/#/index" ></a> </div>CSS:...原创 2020-04-09 09:58:23 · 243 阅读 · 0 评论 -
Nginx 静态资源文件管理服务
启动服务启动 nginx 服务:sudo nginx1重启 nginx 服务:sudo nginx -s reload1停止 nginx 服务:sudo nginx -s stop1检查配置文件是否存在语法错误:sudo nginx -t1访问地址:http:http://localhost:8089 https:htt...原创 2020-02-04 20:31:48 · 410 阅读 · 0 评论 -
process.env.NODE_ENV = 'production'
在node中,有全局变量process表示的是当前的node进程。process.env包含着关于系统环境的信息。但是process.env中并不存在NODE_ENV这个东西。NODE_ENV是用户一个自定义的变量,在webpack中它的用途是判断生产环境或开发环境的依据的。为了查看 process的基本信息,新建一个 process.js 文件,在里面加一句代码:console.l...原创 2020-01-21 11:00:12 · 10826 阅读 · 0 评论 -
前端向后端发送请求的方式
1、link标签的href属性2、script标签的src属性3、img标签的src属性4、ajax发送请求5、表单提交发送请求6、a标签的href发送请求7、iframe的src属性发送请求1.form表单前端代码:<!--post代表提交方式,action代表提交的地址--><form method="post" a...原创 2019-10-22 12:51:14 · 12103 阅读 · 3 评论 -
标准模式与混杂模式
标准模式与混杂模式DOCTYPE 的一个重要作用就是告诉浏览器,它该以何种模式呈现。我们通过document.compatMode这个属性来检测,当前页面处于何种模式:CSS1Compat:标准模式BackCompat:混杂模式在标准模式中,浏览器以其支持的最高标准呈现页面,;在混杂模式中,页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。 模式触发浏览...原创 2018-02-27 18:58:14 · 573 阅读 · 0 评论 -
canvas画时钟
效果如上,可以获取当前时间显示,秒针可以动.1.文件结构:2.html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="./原创 2018-03-07 17:22:26 · 303 阅读 · 0 评论 -
css实现等边三角形(CVTE笔试题)
知识点: transform-origin: 设置基准点,结合transform使用也就是该元素围绕着那个点变形或旋转,该属性只有在设置了transform属性的时候起作用;没有使用transform-origin改变元素基点位置的情况下,transform进行的rotate,translate,scale,skew,matrix等操作都是以元素自己中心位置进行变化的。div{ borde...原创 2018-03-14 21:20:22 · 1398 阅读 · 0 评论 -
前端基础知识
帧元素 (有窗口元素:select元素,object元素,插件 IFrame)> HTML元素优先(帧元素: )表单(文本区域,列表框,各种输入框) > 非表单元素浏览器显示中的HTML显示顺序也不一样,一般是从上到下显示。JS基本数据类型: NULL, Undefined,Number,String,Boolean( 两个不一般的null和undefined,三个NBS)在ht...原创 2018-03-12 21:23:30 · 286 阅读 · 0 评论 -
es6快速入门
转载说明:原文地址 ES6快速入门上次分享了es6开发环境的搭建,本次接着分享es6常用的特性。1.变量声明let和const我们都是知道在ES6以前,var关键字声明变量。无论声明在何处,都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升例如:function aa() { if(bool) { var test = 'hello man...转载 2018-02-28 21:19:05 · 207 阅读 · 0 评论 -
Doctype是什么与浏览器模式详解(标准模式&混杂模式)
Doctype是什么与浏览器模式详解(标准模式&混杂模式)DOCTYPE 的一个重要作用就是告诉浏览器,它该以何种模式呈现。我们通过document.compatMode这个属性来检测,当前页面处于何种模式:CSS1Compat:标准模式BackCompat:混杂模式Doctype是什么<!doctype>声明必须处于HTML文档的头部,在<html>标签之前,HT...原创 2018-02-27 18:57:27 · 274 阅读 · 0 评论 -
github-git push 出错
error: 无法推送一些引用到 'https://github.com/vickyxia/vue_sellfood.git'提示:更新被拒绝,因为远程版本库包含您本地尚不存在的提交。这通常是因为另外提示:一个版本库已向该引用进行了推送。再次推送前,您可能需要先整合远程变更提示:(如 'git pull ...')。提示:详见 'git push --help' 中的 'Note about fa...原创 2018-03-07 10:30:07 · 611 阅读 · 0 评论 -
vue实现todo应用总结
慕课网上的vue+webpack实现的TODO列表的开发,本人采用vue-cli方式进行项目初始化,后面可以修改webpack配置和安装响应的包等.用了部分es6语法.1.项目创建使用vue-cli创建(ps:vue-cli: 2.9.2版本):$npm init webpack vuetodo 进入项目目录:$ cd vuetodo下载依赖:$ npm install运行项目:$ np...原创 2018-03-06 19:44:29 · 2850 阅读 · 0 评论 -
ES6学习笔记二--构建工具脚本
安装依赖包:~/es6 $ npm install gulp gulp-if gulp-concat webpack webpack-stream vinyl-named gulp-livereload gulp-plumber gulp-rename gulp-uglify gulp-util yargs --save-dev安装babel: ~/es6 $ npm install ba原创 2018-01-20 12:03:20 · 913 阅读 · 1 评论 -
gulp入门--基于流的创建工具
gulp是什么?gulp是一个基于流的构建工具,可以自动执行指定的任务,简洁且高效 (所以有管道pipe啊~~)gulp能做什么开发环境下,想要能够按模块组织代码,监听实时变化css/js预编译,postcss等方案,浏览器前缀自动补全等条件输出不同的网页,比如app页面和mobile页面线上环境下,我想要合并、压缩 html/css/javascritp/图片,减少网络请求,同时原创 2018-01-20 10:09:29 · 205 阅读 · 0 评论 -
ES6学习笔记一创建项目目录
项目架构分析:1.基础架构:业务逻辑(页面和交互)2.任务自动化:自动构建gulp工具,文件合并,资源压缩,自动刷新.gulp通过string二进制流构建速度快.3.编译工具: babel工具:es6编译成es5或es3(ie8); webpack工具:处理模块化项目依赖.import a.js编译时打包进来.用webpack-stream对gulp的支持.4.代码原创 2018-01-19 21:36:24 · 317 阅读 · 0 评论 -
图片上传存储数据库2种方法
数据库Mysql存储,读取图片在项目中,很多情况下都对图片的存储读取有需求,而图片怎样存入数据库的方式可谓是五花八门,现在就整理一下数据库与图片不可不说的关系。1,路径存储在数据库:数据库的存储资源是有限的,最起码比磁盘比起来花费会昂贵很多,不可能将图片视频等存入数据库,那么最有可能的就是中介了,即数据库中存入的只是图片或者视频的地址,路径等,并不存储真正的东西,需要的时候就去原创 2018-01-24 20:31:36 · 3309 阅读 · 0 评论 -
DocumentFragment() 创建碎片,减少reflow回流
js中的DocumentFragment() 纯增加性能的方法 |document.createDocumentFragment()说白了就是为了节约使用DOM。每次JavaScript对DOM的操作都会改变页面的变现,并重新刷新整个页面,从而消耗了大量的时间。为解决这个问题,可以创建一个文档碎片,把所有的新节点附加其上,然后把文档碎片的内容一次性添加到document中。 var oui=d...原创 2018-03-15 11:15:05 · 250 阅读 · 0 评论 -
标准盒模型和IE怪异盒模型
以上几种DOCTYPE都是标准的文档类型,无论使用哪种模式完整定义DOCTYPE,都会触发标准模式,而如果DOCTYPE缺失则在ie6,ie7,ie8下将会触发怪异模式(quirks 模式)。首先定义一个div块用来演示标准模式和怪异模式的区别,以下是Css样式.box { width: 200px; height: 200px; border: 20px solid bl...原创 2018-03-02 14:29:22 · 6578 阅读 · 1 评论 -
vuex 使用过程+ ...mapState+...mapMutation + localStorage
vuex使用过程: vuex官网连接按照官网的过程:从components开始-> actions->mutations->改变state创建一个src/store/index.js:先引入:vuex, vue中使用插件是用Vue.use(vuex), 输出一个Vuex.Store实例// state放公用数据//action放 异步操作或者批量处理同步操作 (简单情况...原创 2018-05-07 10:57:43 · 11275 阅读 · 2 评论 -
插件vue-awesome-swiper(----------vue轮播图绝佳Travel项目使用)
vue-awesome-swipervue-awesome-swiper资源地址:轮播图githubswiper2.x官方使用文档: swiper2官方文档API全部配置的说明文档: swiper3.x配置文档使用:1.先npm install依赖(我用的2.6.7版本)npm install vue-awesome-swiper@2.6.7 --save2.全局引入的方法: 在main.js...原创 2018-05-03 09:12:05 · 789 阅读 · 0 评论 -
eslint --报错no-tabs
vue项目eslint报错:[eslint] Unexpected tab character. (no-tabs)解决:在.eslintrc.js文件里添加: 'no-tabs': 'off'原创 2018-05-02 15:52:50 · 9330 阅读 · 0 评论 -
码云创建分支_上传到分支_合并分支(vue_Travel项目)
一.创建分支并在分支上进行项目组件开发1.在码云项目上点击"两个分支",进入创建分支,分支名为:index-swiper创建完成的图:2.此时本地是没有新分支的,所以要先在项目目录下git pull把分支拉下来:3.切换分支:git checkout index-swiper查看分支:git status 现在在这个分支上开发二.提交到分支上直接: git add .git commit -m ...原创 2018-05-02 15:50:37 · 37737 阅读 · 0 评论 -
Vue路由使用
Vue路由使用1.App.vue写上 <router-view>这句话是会去找当前路由下的内容(根据url),该去找路由配置项了->2./router/index.js(路由配置项)写路由配置项:{ path:'/' --地址(这个是根地址) name:' Home' --路由项的名字 component: Home --该地址下显示的组件的名字(不用引号)}组件要先在上面进行导入,这里...原创 2018-05-02 13:57:57 · 324 阅读 · 0 评论 -
float总结分析
参考: https://www.cnblogs.com/acorn/p/5249089.htmlCSS浮动(float,clear)通俗讲解很早以前就接触过CSS,但对于浮动始终非常迷惑,遇到一篇通俗的教程。 教程开始: 首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流。如下图: 可以看出,即使div1的宽度很小,页面中一行可以...原创 2018-03-28 17:09:40 · 241 阅读 · 0 评论 -
nvm 安装 node
nvm 安装 node github的nvm原文: https://blog.csdn.net/weibo392/article/details/77368550安装命令(当前最新版本是0.33.2,最新版本可以在此处查看):curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash安...原创 2018-03-27 15:42:39 · 178 阅读 · 0 评论 -
Angular学习笔记-
1. angular添加input ,做双向绑定时遇到:解决措施: 在 app.module.ts 里面添加:import { FormsModule, ReactiveFormsModule } from "@angular/forms";@NgModule({ imports: [ FormsModule ] })...原创 2018-04-09 14:42:07 · 165 阅读 · 0 评论 -
使用stylus出错
引入新 footer.styl 和global.styl文件出现如下错误:webpack配置:最后出错还是没有解决,换成css写法了.原创 2018-03-06 17:05:45 · 1164 阅读 · 0 评论 -
sublime创建vue模板+高亮+快捷方式设置
原文网址本文介绍了 Sublime Text新建.vue模板并高亮(图文教程),分享给大家,也给自己留个笔记。准备工作下载安装新建文件模板插件 SublimeTmpl下载安装vue语法高亮插件 Vue Syntax HighlightSublime Text安装插件的方法有两种:1、使用Sublime Text自带的安装库 Package Control 去安装点击菜单栏的 Preferences...原创 2018-03-05 16:14:46 · 5984 阅读 · 1 评论 -
Nodejs爬虫--cheerio
cheerio解析html,通读cheerio API: 参考文档:http://cnodejs.org/topic/5203a71844e76d216a727d2e 通读cheerioAPIhttps://www.cnblogs.com/CraryPrimitiveMan/p/3674421.html nodejs博客http://blog.csdn.net/qq_212原创 2018-01-23 21:41:08 · 406 阅读 · 0 评论 -
call()和apply()
下面有关JavaScript中 call和apply的描述,错误的是?正确答案: B 你的答案: B (正确)call与apply都属于Function.prototype的一个方法,所以每个function实例都有call、apply属性两者传递的参数不同,call函数第一个参数都是要传入给当前对象的对象,apply不是apply传入的是一原创 2018-01-23 19:52:20 · 547 阅读 · 0 评论 -
父元素清除浮动
清除浮动float (:after方法)1. 什么时候需要清除浮动?清除浮动有哪些方法?(1)对元素进行了浮动(float)后,该元素就会脱离文档流,浮动在文档之上。在CSS中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。float主要流行与页面布局,然后在使用后没有清除浮动,就会后患无穷。先看实例:div class="outer">原创 2017-12-08 10:55:25 · 1450 阅读 · 0 评论 -
sublime各种报错 unexpected indent Vue的ESlint缩进问题
用Vue-cli构建项目的时候,用stylus写样式,各种报错 unexpected indent 。浪费了两个小时的时间终于搞明白了问题。踩坑如下图:添加background-size属性的时候,就会报出这个错误。很明显意思就是缩进错误。但是我怎么看也看不出所以然。尝试解决各种搜索,google, stractoverflow…原创 2017-12-07 20:30:30 · 2484 阅读 · 0 评论 -
linkActiveClass
linkActiveClass类型: string默认值: "router-link-active" //router到这个地方会自动生成这个class全局配置 的默认『激活 class 类名』 .tab display: flex width: 100% height: 40px l原创 2017-12-07 11:03:31 · 1965 阅读 · 0 评论 -
vue router报错
b6db:2611[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option. 原因:自己把ROuter.js里面的一句话删了:Vue.use(ro原创 2017-12-07 10:12:04 · 2070 阅读 · 0 评论 -
JSON.parse()和JSON.stringify()
JSON.parse()和JSON.stringify()parse用于从一个字符串中解析出json对象,如var str = '{"name":"huangxiaojian","age":"23"}'结果:JSON.parse(str)Objectage: "23"name: "huangxiaojian"原创 2017-12-05 19:53:09 · 130 阅读 · 0 评论 -
vue 父组件和子组件的通信
Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学请自行百度哦)环境搭建步骤:打开git ,运行 npm install --global vue-cli 这是安装vue的命令行vue init webpack vue-demo原创 2017-12-05 19:45:19 · 528 阅读 · 0 评论 -
Failed to resolve directive: el vue2报错 (vue v-sl)
vue2报错 Failed to resolve directive: el为什么会报这个错呢,主要还是因为vue升级的时候,v-el在vue2.x以后被淘汰。使用新的标签ref替换v-el,接下来告诉大家怎么使用。之前v-el的写法div class="menu-wrapper" v-el="menu-wrapper"> ul class="menu">原创 2017-12-13 14:51:19 · 2503 阅读 · 0 评论 -
在vue-cli的组件模板里使用font-awesome
方法一:npm install font-awesome在main.js里添加import 'font-awesome/css/font-awesome.css'方法二:在官网下载代码到本地,现在应该是font-awesome-4.7,把整个文件夹放到static文件夹中,然后在index.html中加上<link rel="stylesheet" href="原创 2017-12-12 16:01:38 · 3030 阅读 · 0 评论 -
flexbox学习文档
Flexbox学习文档,很好!http://caibaojian.com/demo/flexbox/align-content.htmlhttp://caibaojian.com/flexbox-guide.htmlhttp://caibaojian.com/demo/flexbox/align-content.html原创 2017-11-12 21:36:15 · 229 阅读 · 0 评论 -
浮动(float)
浮动(float)是基于CSS的现代Web设计用到的主要功能之一,可以用它来创建多累的网页布局,从无序列表创建导航工具条,不是用table而创建类似表格的对其方式等。float属性的取值是:none(不浮动),left(向左浮动),right(向右浮动)。float会引起 高度塌陷(倒数第二个图的clear跑到上面去了就是高度塌陷,需要清除浮动(对块元素)) 为使元素浮动到左边或原创 2017-11-12 21:06:14 · 439 阅读 · 0 评论