前端
关注
分享
扫一扫
微风--轻许--
纵一生，与君相伴，不负岁月，不负卿 ...
展开
-
什么是响应式布局设计
1. 看一个例子：Mashable的首页：浏览器窗口最大化时：缩小浏览器窗口：再缩小：再缩小：以上就是一个响应式的实例。2.理论上，响应式界面能够适应不同的设备。描述响应式界面最著名的一句话就是“Content is like water”，成中文 “ 如果将屏幕看作容器，那么内容就像水一样 ” 。3. 大白话解说：很久很久以前，...转载 2019-05-14 15:20:27 · 305 阅读 · 0 评论 -
操纵浏览器历史记录 : popstate() 、 history.pushState() 、 window.history.pushState（）
一、历史记录前进与后退1.后退：window.history.back() -- 相当于用户在浏览器的工具栏上点击返回按钮；2.前进：window.history.forward() -- 相当于用户在浏览器的工具栏上点击前进按钮；3.移动到指定历史记录点：通过go()方法，指定一个相对于当前页面位置的数值，从当前会话的历史记录中加载页面（当前位置页面索引：0，上一页：-1...转载 2018-11-19 17:26:23 · 27795 阅读 · 0 评论 -
Vue.js 极简小例：读值、样式调用、if判断、a 标签、点击事件、管道
1. 写法：<template><div id="app"> <!-- 三目运算符使用 ‘ok’ 的值定义在 data 中--> {{ ok ? 'YES' : 'NO' }}<br><br> <!-- 修改样式 class1 设置为 true 时显示样式 (页面上勾选单选框即设置为 ..原创 2018-11-16 19:53:55 · 527 阅读 · 0 评论 -
不要再问我跨域的问题了
跨域这两个字就像一块狗皮膏药一样黏在每一个前端开发者身上，无论你在工作上或者面试中无可避免会遇到这个问题。为了应付面试，我每次都随便背几个方案，也不知道为什么要这样干，反正面完就可以扔了，我想工作上也不会用到那么多乱七八糟的方案。到了真正工作，开发环境有webpack-dev-server搞定，上线了服务端的大佬们也会配好，配了什么我不管，反正不会跨域就是了。日子也就这么混过去了，终于有一天，我觉...转载 2018-11-21 09:30:04 · 471 阅读 · 0 评论 -
this 的指向问题
this的指向已经是一个老生常谈的问题，每逢面试都要去复习复习，近来巩固js的基础，决心彻底掌握这个知识点，一劳永逸。说明一下，为了不影响大家的思考过程，下面的代码都不会去注释答案，想知道答案，只需要去控制台执行一下。四类场景逐一击破首先，分析this的指向共有四种类型，在分析之前，我们首先带好两个锦囊：1.函数被调用时（即运行时）才会确定该函数内this的指向。因为在函数中this与a...转载 2018-11-21 09:12:42 · 220 阅读 · 0 评论 -
VSCode 多开、环境对比
多开：第一种：win10的开始菜单，在vscode图标右键选择“新开窗口”，这样就多了一个vscode。第二种：就是增加启动选项 -new。在快捷方式中目标增加-new就可以了："C:\Program Files (x86)\Microsoft VS Code\Code.exe" -new, 这种比较方便。第三种：vscode的File菜单->新建窗口 。或者直接： ctrl+shi...转载 2018-11-12 09:34:30 · 1510 阅读 · 0 评论 -
VS Code 的常用快捷键
VS Code 的常用快捷键和插件一、vs code 的常用快捷键1、注释： a)单行注释：[ctrl+k,ctrl+c] 或 ctrl+/ b)取消单行注释：[ctrl+k,ctrl+u] (按下ctrl不放，再按k + u) c)多行注释：[alt+shift+A] d)多行注释：/**2、移动行：alt+up/down3、显示/隐藏左侧目录栏...转载 2018-11-12 09:11:39 · 628 阅读 · 1 评论 -
Node.js 多版本安装配置（Window、Ubuntu 、CentOS 、Mac OS、Cloud Studio）
向大家介绍在window和Linux上安装Node.js的方法。本安装教程以Node.js v4.4.3 LTS(长期支持版本)版本为例。Node.js安装包及源码下载地址为：https://nodejs.org/en/download/。你可以根据不同平台系统选择你需要的Node.js安装包。Node.js 历史版本下载地址：https://nodejs.org/dist/...转载 2018-11-08 15:26:10 · 1849 阅读 · 1 评论 -
vscode 配置 git （配置、暂存、推送、拉取、免密）
vscode 中对 git 进行了集成，很多操作只需点击就能操作，无需写一些 git 指令。不过这就需要你对 vscode 进行配置。下面我会讲到 git 的配置与免密码上传 github。1.vscode 中 git 的配置首先需要你的电脑上已经安装了git，且window电脑里git添加到环境变量中去了。这样你的电脑就可以使用 git 了，但是想要在 vccode 中使...转载 2018-11-13 17:08:57 · 24979 阅读 · 1 评论 -
在 vscode 中使用 Git ：拉取、提交、克隆
PS：转载此文后，网友在评论中提到还有其它方法，不过目前个人尚在研究中，有兴趣的朋友们也可自行一探究竟 ...-------------------------------------------------------------------------1、将代码放到码云到码云里新建一个仓库，完成后码云会有一个命令教程按上面的来就行了 码云中的使用教程：Git 全局设置:...转载 2018-11-13 16:53:15 · 273197 阅读 · 15 评论 -
vuex 最简单、最详细的入门文档
如果你在使用vue.js, 那么我想你可能会对 vue 组件之间的通信感到崩溃 。我在使用基于 vue.js 2.0 的UI框架ElementUI开发网站的时候 , 就遇到了这种问题 : 一个页面有很多表单 , 我试图将表单写成一个单文件组件 , 但是表单 ( 子组件 ) 里的数据和页面 ( 父组件 ) 按钮交互的时候 , 它们之间的通讯很麻烦 :<!--父组件中引入子组件...转载 2018-11-08 09:42:45 · 321 阅读 · 0 评论 -
vue.js 三种方式安装 ( vue-cli ) 、安装详解、创建项目
Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。 一、下面介绍三种 Vue.js 的安装方法：1.独立版本我们可以在Vue.js的官网上直接下载vue.js...转载 2018-11-08 09:06:53 · 29937 阅读 · 3 评论 -
Visual Studio Code 常用快捷键
一、常用快捷键编辑器与窗口管理打开一个新窗口：Ctrl+Shift+N关闭窗口：Ctrl+Shift+W新建文件Ctrl+N文件之间切换Ctrl+Tab切出一个新的编辑器（最多3个）Ctrl+\左中右3个编辑器的快捷键Ctrl+1Ctrl+2Ctrl+3代码编辑格式调整代码行缩进Ctrl+[、Ctrl+]Ctrl+C、Ctrl+V复制或...转载 2018-11-07 23:08:00 · 349 阅读 · 0 评论 -
学会用好 Visual Studio Code
Visual Studio Code是个牛逼的编辑器，启动非常快，完全可以用来代替其他文本文件编辑工具。又可以用来做开发，支持各种语言，相比其他IDE，轻量级完全可配置还集成Git感觉非常的适合前端开发，是微软亲生的想必TypeScript会支持的非常好。 所以我仔细研究了一下文档未来可能会作为主力工具使用。主命令框 Command Palette最重要的功能就是F1或Ctrl+Sh...转载 2018-11-07 23:06:13 · 733 阅读 · 0 评论 -
Node.js -- Stream 使用小例 ( 流运用 ：读取、写入、写出、拷贝）
Stream 是一个抽象接口，Node 中有很多对象实现了这个接口。例如，对http 服务器发起请求的request 对象就是一个 Stream，还有stdout（标准输出）。Node.js，Stream 有四种流类型： Readable- 可读操作。 Writable- 可写操作。 Duplex- 可读可写操作. Transform- 操作被写入数...原创 2018-11-07 16:34:32 · 1699 阅读 · 0 评论 -
node、npm、vue安装 -- VUE 项目 demo 实例
1. 安装node：sudo yum install epel-releasesudo yum install nodejsnode --version // 安装好后查看版本2.安装 npm 和express： sudo yum install npm --enablerepo=epel sudo npm install -g express sudo npm i...原创 2018-11-09 18:18:40 · 556 阅读 · 0 评论 -
axios 中文文档、使用说明
以下内容全文转自 Axios 文档：https://www.kancloud.cn/yunye/axios/234845##AxiosAxios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。Features从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API 拦截请求...转载 2018-11-28 09:20:05 · 333 阅读 · 0 评论 -
Vue 生命周期中 mounted( ) 和 created( ) 的区别
一、什么是生命周期？用通俗的语言来说，就是Vue中实例或者组件从创建到消灭中间经过的一系列过程。虽然不太严谨，但是也基本上可以理解。通过一系列实践，现在把所有遇到的问题整理一遍，今天记录一下created和mounted的区别：二、created和mounted区别？created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。mounted:在模板渲染成htm...转载 2018-12-13 10:52:22 · 3130 阅读 · 0 评论 -
解决：Request header field Content-Type is not allowed by Access-Control-Allow-Headers
1. 前端 vue 工程 post 请求后端接口，报错：Request header field Content-Type is not allowed by Access-Control-Allow-Headers前端请求方式： this.$ajax({ method: "post", url: this.GLOBAL.BASE_URL + "/...原创 2018-12-20 17:22:11 · 28434 阅读 · 0 评论 -
JS 中去除空格和换行的正则表达式写法
//去除空格String.prototype.Trim = function() {return this.replace(/\s+/g, "");}//去除换行function ClearBr(key) {key = key.replace(/<\/?.+?>/g,"");key = key.replace(/[\r\n]/g, "")...转载 2019-05-06 17:44:12 · 3107 阅读 · 0 评论 -
Bootstrap 中： data-toggle 与 data-target 的作用
<button type="button" class="update-button" style="width:70px; height:40px;" data-toggle="modal" data-target=".update-Dialog" > 编辑 </button> <...原创 2019-03-18 19:26:04 · 5676 阅读 · 0 评论 -
js 验证用户输入的是否为数字、检查只能为数字
方法一如果判断输入的是否是数字，如果不是数字弹出一个提示：简易代码如下：<body><inputtype="text"id="inp"></table></body><script> varoInp=document.getElementById('inp'); oInp.onblur=function(...转载 2019-03-25 11:40:32 · 16703 阅读 · 0 评论 -
VUE项目中 获得多个复选框 checkbox 选中的值（jquery）+ 解决 Uncaught TypeError: Cannot read property ‘push‘ of undefine
1. 表格生成后第一列是复选框，效果：表格是直接循环展示的后台返回数据，代码写法：2. 得复选框中已选中的值： // 得复选框已选中的值 var boxs = $('input[name="userId"]'); var userIds = []; for (var x in boxs) { if (boxs[x].chec...原创 2019-02-20 14:46:01 · 6623 阅读 · 0 评论 -
在 js 中怎样获得 checkbox 里选中的多个值？(jQuery)
思路：利用name属性值获取checkbox对象，然后循环判断checked属性（true表示被选中，false表示未选中）。下面进行实例演示：1、HTML结构<input type="checkbox" name="test" value="1"/><span>1</span><input type="checkbox" name="test...转载 2019-02-20 14:20:33 · 2993 阅读 · 0 评论 -
如何和何时使用 CSS 的权重设置 !important （建议：永不使用！）
特别声明：此篇文章由David根据Louis Lazaris的英文文章原名《!important CSS Declarations: How and When to Use Them》进行翻译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://coding.smashingmagazine.com/2010/11/02/the...转载 2019-01-29 11:44:06 · 7645 阅读 · 0 评论 -
input 框 去掉下面的提示文字、提示选项
1. 我的一个输入框总是有提示文字：2. 去掉方法，给 input 加一个属性：autocomplete="off"3. 运行效果：原创 2019-01-15 18:31:51 · 5860 阅读 · 0 评论 -
修改 input 框里的字体、颜色
/* WebKit browsers */input::-webkit-input-placeholder {color: #C0C0C0;font-size: 14px;}/* Mozilla Firefox 4 to 18 */input:-moz-placeholder {color: #C0C0C0;opacity: 1;font...转载 2019-01-09 16:48:12 · 30112 阅读 · 0 评论 -
jQuery 实现表格与 ckeckbox 的全选、单选功能
功能点 1. 用户点击头的checkbox时，所有表格数据行的checkbox全选或反选。当数据行某一行没有选中时，头checkbox去选。当所有数据行的checkbox全选时，头的checkbox也选上。html代码示例，关注高亮部分即可：jQuery代码，可以参考如下：功能点 2. 表格无数据行时，隐藏下面两个铵钮，反之显示它们如下面代码示例：...转载 2019-01-09 17:52:24 · 487 阅读 · 0 评论 -
css background-attachment:fixed 固定背景、不随内容一起滚动
兼容性：全兼容，只不过IE滚动时会有一点不流畅。background-attachment 有 3 个选项：scroll / fixed / inherit 。锁定背景：background-attachment:fixed;要有比较好的体验，建议让background-image:url(""),background-color:""一起使用。这样无图片时也能有很好的体验。...转载 2019-01-17 11:41:31 · 2930 阅读 · 0 评论 -
JS 中 Map 与 JSON 转换
1. JSON数据 转字符串JSON.stringify(jsondata)2. 字符串 转 JSONJSON.parse(str)3. Map 转 JSON，需要先将Map转化为Object（对象）_strMapToObj(strMap){ let obj= Object.create(null); for (let[k,v] of strMap) ...转载 2019-01-11 11:45:08 · 12686 阅读 · 0 评论 -
CSS 中 的 margin、border、padding 区别 （内边距、外边距）
图解CSS padding、margin、border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中，设计师可以通过创建定义来控制这个盒的属性，这些对像包括段落、列表、标题、图片以及层。盒模型主要定义四个区域：内容(content)、内边距(padding)、边框(border)和外边距(margin)。对于初学者，经常会搞不清楚margin，background-color，ba...转载 2018-12-25 10:42:15 · 6576 阅读 · 0 评论 -
vue 项目 引用（外部） js、css
我的工程结构：1. 引入 css 有 2 种方式：方式 1<script type="text/javascript"> import '../../../static/home/hoverifyBootnav.css'<script >方式 2<style scoped> @import "https://...原创 2018-12-18 20:00:11 · 1413 阅读 · 0 评论 -
html 标签内背景图片自适应 div 大小
只需通过css设置background-size属性为contain，即background-size:contain注意：一定要在先设置background之后再设置background-size属性，这样才有效转自：https://blog.csdn.net/m0_37828249/article/details/78385348...转载 2018-12-17 15:25:31 · 4860 阅读 · 3 评论 -
DIV 半透明层、 CSS实现网页 背景半透明
DIV半透明实现，使用CSS实现DIV成半透明效果，CSS实现层与背景半透明效果。一、DIV CSS半透明基础介绍 - 设置DIV半透明CSS代码：div{filter:alpha(Opacity=80);-moz-opacity:0.5;opacity:0.5;}说明：1、filter：对win IE设置半透明滤镜效果，filter:alpha(Opacity=8...转载 2018-12-17 10:04:23 · 3893 阅读 · 0 评论 -
script 放置最佳位置以及 html 执行顺序
看到知乎上有很多讨论关于javascript位置的文章。所以特意留意了这方面的问题。 首先要了解到的是： html文件是自上而下的执行方式，但引入的css和javascript的顺序有所不同，css引入执行加载时，程序仍然往下执行，而执行到<script>脚本是则中断线程，待该script脚本执行结束之后程序才继续往下执行。 所以，大部分网上讨论是将scrip...转载 2018-11-09 16:15:06 · 735 阅读 · 0 评论 -
script 标签到底该放在哪里
一般script标签会被放在头部或尾部。头部就是<head>里面，尾部一般指<body>里。将script放在<head>里，浏览器解析HTML，发现script标签时，会先下载完所有这些script，再往下解析其他的HTML。讨厌的是浏览器在下载JS时，是不能多个JS并发一起下载的。不管JS是不来来自同一个host，浏览器最多只能同时下载两个JS...转载 2018-11-09 16:04:53 · 601 阅读 · 0 评论 -
JavaScript onerror 事件（ window.onerror = ）
见：http://www.w3school.com.cn/js/js_onerror.asp使用 onerror 事件是一种老式的标准的在网页中捕获 Javascript 错误的方法。实例onerror 事件如何使用 onerror 事件捕获网页中的错误。（chrome、opera、safari 浏览器不支持）onerro转载 2017-06-02 16:07:20 · 2439 阅读 · 0 评论 -
fn:substring()函数
见：http://www.runoob.com/jsp/jstl-function-substring.htmlfn:substring()函数返回字符串中指定开始和结束索引的子串。语法fn:substring()函数的语法如下：${fn:substring(string>, , )}实例演示以下实例演示了这个函数的功能： pag转载 2017-06-02 15:30:40 · 4578 阅读 · 0 评论 -
应该把script标签放在哪里
见 ：http://www.uw3c.com/jsviews/js29.html概述：如果在页面中写JS的话，那必然会用到script标签，理论上script标签放在哪里都是可以的，但是到底放在哪里好？我们今天来讨论一下。script标签放在底部的好处：虽然理论上放在哪里都是可以的，但是对于前端页面优化来讲，还是放在底部是最佳的，因为如果JS执转载 2016-11-04 14:55:40 · 970 阅读 · 0 评论 -
怎么用js动态 设置select中的某个值为选中项
可以使用javascript和jQuery两种实现方式1：使用javascript实现无标题文档 111 // 111 是显示给用户的信息 222 333 444 555function display(optionID){ var all_options = document.getElementById("jumpMenu").o转载 2017-05-15 16:46:02 · 23593 阅读 · 0 评论