前端
关注
分享
扫一扫
文章平均质量分 82
千霜
未来的码农
展开
-
pandao editor.md 学习笔记
底层使用了marked和CodeMirror，marked是一个比较底层的markdown编辑器和解析器，CodeMirror提供代码高亮。使用时需引入editormd的css、js，引入editormd的js代码依赖jquery，因此也要提前引入jquery。简单使用： //第一个参数为挂载点的ID，第二个为配置选项对象 var editor = editormd("e...原创 2019-05-18 17:36:45 · 1834 阅读 · 0 评论 -
Vue使用Iconfont
介绍Iconfont是阿里打造的图标平台，拥有大量的图片，提供将图片转化为字体供前端人员使用的功能，十分方便。国外也有类似的图标字体库，如Font Awesome使用方法使用方法如下：首先进入官网iconfont，找到图片并加入购物车将购物的图片添加到项目中进入项目，生成在线链接，如：//at.alicdn.com/t/font_1199749_deo2fjl10md.css...原创 2019-05-20 11:51:28 · 1542 阅读 · 1 评论 -
架构模式（MVVM、MVC）
架构模式的最终目标都是将不同的逻辑分离出来，即逻辑分层，降低项目的复杂性。如业务逻辑与展示层逻辑的分离，某个层逻辑的变动不会造成其他层的变动。比如后端的MVC（Model-View-Controller）架构中：数据逻辑（Model）：dao、service层处理数据并转化为View可用的Model；交互逻辑（Controller）：controller层处理前端的请求渲染逻辑...原创 2019-05-19 19:16:19 · 256 阅读 · 0 评论 -
javascript之promise
promise相当于一个代理，表示一个异步操作成功或失败的结果，即使不能立马获得promise表示的值，但可以为promise附上成功或失败的回调函数。例子function myAsyncFunction(url) { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); ...原创 2019-05-13 22:09:23 · 632 阅读 · 0 评论 -
轮播图实现
原理使用transform:translateX(offset);实现切换transition: transform 1s;实现动态效果transition-duration开启或关闭动态效果。图解现有三张图片A、B和C但为了实现C到A的无缝切换，需调整为A到C的切换效果很好实现，重点在于C与A的切换：C以动画效果切换A后（索引3），停止动画效果（transition-dur...原创 2019-05-01 11:57:11 · 258 阅读 · 0 评论 -
css之自定义文件上传
思路点击label元素与点击input元素有相同的效果，因此隐藏input即可。代码html<label for="file" class="file-label"> <span class="label-placeholder">文件上传</span> <img src="" alt="" id="img"></la...原创 2019-04-25 12:31:58 · 1202 阅读 · 0 评论 -
JQuery上传含有文件的表单
关键在于使用FormData包裹表单数据 $("#register-form").submit(function (event) { event.preventDefault(); $.ajax({ url:"/user/register", type:"POST", dat...原创 2019-04-25 11:50:41 · 1656 阅读 · 0 评论 -
webpack学习笔记
原创 2019-05-04 18:12:31 · 112 阅读 · 0 评论 -
跨域 CORS
目录一 介绍二 原理三 头部字段四 使用参考一 介绍当HTTP请求一个域名、协议、端口任意之一与当前网页都不同的资源时，即为跨域请求。在浏览器中，为了安全，会限制脚本的跨域请求。CORS（Cross-Origin Resource Sharing）则一个通过HTTP头部实现脚本跨域的机制。二 原理当浏览器在域名A的网页内向域名B的资源发起跨域请求时，域名B的服务器会设置响应头部，告诉浏览器...原创 2019-05-03 15:38:19 · 203 阅读 · 0 评论 -
vue之树状导航栏（TreeNav）
功能传入一个普通对象，生成菜单能够代开和关闭某个节点。效果实现后效果如下原理重点在于Vue组件可以嵌套使用。思路首先实现一个组件TreeNavItrem，它表示树中的其他子树或叶子结点。然后实现TreeNav组件，它表示树的根节点，根节点没有内容，只作为一个容器。代码注意，使用了阿里的图标iconfont。TreeNavItem.vue<template&g...原创 2019-05-20 13:41:20 · 4433 阅读 · 1 评论 -
vue之多页面
常见配置翻阅了网上一些多页面的实现，很多都是配置webpack的配置文件实现的，对于本初学者来说，不是很好理解。并且vue的配置文件中给出pages选项，能够实现多页面，没有必要配置webpack了。如下所示，给出了一个多页面的vue配置：vue.config.jsmodule.exports = { pages:{ index:{ entr...原创 2019-05-24 12:37:42 · 565 阅读 · 0 评论 -
scss 学习笔记
目录介绍样式规则嵌套普通嵌套（nesting）嵌套列表嵌套组合（combinators）父类选择器`&`插值参考介绍scss最终会被编译成css。scss允许使用变量、嵌套语法、混合、函数等特性，并且兼容css语法。scss其实只是sass的一种语法形式（css超集，后缀.scss），sass还有缩进语法（后缀.sass）。默认编码utf-8但scss语法错误时，scss会直接...原创 2019-05-23 14:47:33 · 679 阅读 · 0 评论 -
vue整合editor.md
editor.md是一个很好的开源markdown编辑器，editor.md没有提供与vue整合的直接方案，需要自己将editor.md封装到vue组件中。首先editor.md使用原始的;(function(factory){...}(function(){...}));进行模块化的，它会最终将editormd暴露给用户用，该对象附着在window，并且editormd的初始化依赖jQuery...原创 2019-05-18 13:45:14 · 10294 阅读 · 13 评论 -
Vue之弹出框
弹出框有很多种，有的适合使用v-if加上一个控制变量来控制弹窗的显示或否。但是有的框，如提示框，适合使用时插入，结束时删除元素。如下图所示：且看vue如何实现这种方式的弹窗，这里使用的是vue-cli建立的项目。思路我所知，组件实例化有三种方式，见vue学习笔记3.1小节。通过$mount方法可以将组件以编程时的方式动态插入DOM中，$destroy方法可以清理组件实例，然后再删除DOM元...原创 2019-05-22 23:21:58 · 26075 阅读 · 0 评论 -
vue 多页面
vue通过配置选项pages可实现多页面。过程如下：目录结构：配置文件vue.config.js：重点看pages选项，其他的选项与本文章无关联。 module.exports = { //防止eslint乱报错 lintOnSave: false, //配置服务器 devServer:{ //devServer监听的端口 port...原创 2019-05-22 14:40:04 · 1392 阅读 · 0 评论 -
vue-cli 学习笔记
目录单文件组件组成部分安装基础快速原型设计vue servevue build创建项目插件CLI ServiceHTML和静态资源cssvue配置pagesdevServereslint其他Vue DevtoolsHot Reload入口单文件组件全局组件的缺点：全局定义造成名字污染模板字符串没有语法高亮没有css支持，即css不能与组件放在一块没有构建工具，只能是有H...原创 2019-05-22 13:01:22 · 481 阅读 · 0 评论 -
Is Jquery Going to Die in 2019?
目录IntroWhat is JQuery & How it became so popular?What's changed since then?Modern Javascript Libraries & Frameworks vs JQueryIs Jquery still relevant yet? What are the current trends?Should yo...转载 2019-05-25 09:16:15 · 417 阅读 · 0 评论 -
vue之过渡或动画
目录介绍例子：过渡生命周期例子：动画参考介绍vue简化了过渡和动画的使用，在以下环境中，可使用内置组件transition包裹加上指定class，以提供动画效果：条件渲染v-if条件显示v-show动态组件例子：过渡<div id="demo"> <button v-on:click="show = !show"> Toggle </...原创 2019-05-24 18:12:05 · 201 阅读 · 0 评论 -
css之重启动画
过程设置animation属性为none触发浏览器重画样式或布局，参考What forces layout / reflow，这里使用offsetHeight属性设置animation属性为""，以重新继承css样式。代码代码中使用了vue，但并不影响理解。。。<template> <div id="app"> <button ...原创 2019-05-24 14:10:58 · 672 阅读 · 1 评论 -
Node.js
目录一 介绍二 模块2.1 module2.1.1 module wrapper2.1.2 require2.1.3 exports2.2 package三 使用3.1 安装Node.js3.2 npm init && node3.3 npm install3.4 npm list3.5 npm uninstall3.6 npm update3.7 npm search3.8 np...原创 2019-05-02 19:12:48 · 259 阅读 · 0 评论 -
javascript之修改网页url但不加载
修改url并重新加载可以使用Location.assign(),Location.replace()方法。如果修改url但不重新加载，可以使用html5后引入的History.pushState(),History.replaceState()。pushState方法往历史记录中添加新记录，replaceState方法修改当前历史记录。有相同的参数，如下所示：state:一个状态任意属性的对...原创 2019-04-26 19:30:23 · 1445 阅读 · 0 评论 -
Vue学习笔记
目录指令(directive)组件组件实例Data and Methods生命周期模板语法插值文本插值Raw HTML属性表达式指令参数动态参数Modifiers缩写computed、watchclass和style数据绑定class数据绑定styles数据绑定条件性渲染v-ifv-showlist渲染v-for与数组v-for与对象key数组中元素改变探测对象中属性更改检测其他事件处理事件处理器...原创 2019-04-22 15:42:38 · 767 阅读 · 0 评论 -
markdown语法
目录一、介绍二、基础语法2.1、标题2.2、段落2.3、区块引用2.4、代码块2.4.1、code blocks2.4.2、inline code2.4.3、扩展代码块2.5、强调2.6、列表2.7、分割线2.8、链接2.8.1、行内式2.8.2、参考式2.8.3、自动链接2.9、图片2.10、转义三、扩展语法3.1、目录3.2、扩展代码块参考一、介绍Markdown是一种轻量级标记语言，它以...原创 2018-11-04 13:19:15 · 385 阅读 · 0 评论 -
css之word-break及word-wrap(overflow-wrap)
目录一、介绍二、word-break2.1、normal2.2、break-all2.3、keep-all2.3、break-word三、overflow-wrap参考一、介绍今天学习markdown时，遇到了一个概念，“hard-wrapped”，然后网上搜索，发现一堆名词，如：line break、word wrapping、word wrap、line...原创 2018-11-03 15:44:54 · 11551 阅读 · 0 评论 -
Line breaking 换行
目录一、介绍二、换行2.1、软换行、硬换行2.2、line wrap和word wrap三、使用3.1、文本编辑器的使用3.2、html中的换行参考一、介绍小小的换行，隐藏着很多小知识点困扰着我们，尤其是在学习css、markdown或其他文本编辑器（Microsoft Word、csdn的富文本编辑器等）的使用时。这里会讲解一部分相关内容。一般文章都由段落...原创 2018-11-03 14:22:13 · 2037 阅读 · 0 评论 -
provisional headers are shown
介绍使用chrome时，如果打开开发工具发现提示：provisional headers are shown，说明有两种情况发生。第一种，由于http1.1支持持久连接，因此一个tcp可以持续连接一段时间。而一个http请求会造成多个http请求的产生，都在一个tcp中进行处理，被浏览器产生的这些请求是临时生成的。因此查看开发工具就会显示：provisional headers are s...原创 2018-11-01 15:34:15 · 60693 阅读 · 0 评论 -
inline-block中居中元素
<span class="a"> <span class="b">luo</span></span>有这样一个父元素，被显示为inline-block元素，那问题是，如何居中里面的元素呢？先看看父元素的样式： .a{ display:inline-block; text-align:center; ...原创 2018-08-02 16:01:25 · 6756 阅读 · 0 评论 -
viewport meta 元素
viewport是用户在网页中的可视范围。如果网页面积比viewport（视窗）的面积大，那么浏览器会提供滚动条（包含水平滚动）供用户滑动来查看完整网页（或许读者在使用早期的手机时会见到这种情况，现在很少见到这种情况了，因为浏览器通过viewport来缩放了网页）。如果网页显示不小，超出了viewport的大小，会出现水平滚动的情况，这样会造成糟糕的用户体验。于是手机浏览器采用了一个小技巧来解...原创 2018-08-01 14:54:37 · 3216 阅读 · 0 评论 -
javascript属性和方法
转载：这样剖析JavaScript中的属性和方法，也许这样你就会更清楚玩转JavaScript，你得有很扎实的基础，这些基础体现在哪里？其中一个最重要的点就是对JavaScript的属性和方法有足够的了解和认识。这里，我会带大家一起来彻底消灭这些盲点（对JavaScript属性和方法的分类还存在模糊的印象）。首先来说一下属性：在JavaScript中属性有四种类型：私有属性，原型属性，...转载 2018-07-26 08:35:09 · 1063 阅读 · 0 评论 -
javascript之单击获得单词
有时我们有这样的一个需求，对于一篇英语文章，我们想要单击来获取单词，而不是双击获取单词。经过了谷歌一番，我也大致找到了办法。废话不多说，直接上代码： <html><body><p>hello how are you ?</p> <script src="js/jquery.min.js"></script&原创 2016-07-22 20:39:18 · 2425 阅读 · 0 评论 -
html
文章目录一、介绍二、组成2.1、模板2.2、元素2.3、注释三、[元素][5]3.1、属性3.2、basic 元素3.3、formatting 元素3.3、Links 元素3.3.1、a3.3.2、link3.4、images 元素3.4.1、img3.5、Lists 元素3.6 tables 元素3.7、frames 元素3.8、forms and input[3.8.1、form][6]3.8...原创 2018-11-20 16:29:43 · 755 阅读 · 0 评论 -
css
目录一、介绍二、基础知识2.1、应用css样式表2.1.1、外部样式一、介绍二、基础知识css（Cascading Style Sheets）叠层样式表，用于改变网页样式，最终和html形成DOM（Document Object Model ），而浏览器则将DOM展示出来。过程如下：一个最简单的例子：index.html:&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;a原创 2018-11-28 20:11:02 · 1948 阅读 · 0 评论 -
css之全屏居中
<div class="container"> <div class="item">item</div></div>.container{ background-color: rgb(0,0,0,0.5); position:fixed; top:0; bottom:0; left:0; ...原创 2019-04-17 09:37:34 · 1282 阅读 · 0 评论 -
javascript之“;(function(){})();”
有的框架会使用这样的语法：;(function(arg){ //some js code in here})(param);其实它就是创建了一个匿名函数function(arg){ //some js code in here }，然后再执行且只执行该函数一次，param为实参。最前面加;是为了防止其他语句的影响，因为语句结束符;可有可无。如：new(function() { ...原创 2019-04-12 22:13:23 · 987 阅读 · 0 评论 -
css之动态固定高宽比
宽（width）可以使用百分比（如100%）动态改变宽度，那如何动态固定高度，与宽成比例呢？有个小技巧，width:<percent>与padding-top:<percent>之比就是宽高比。因此例子如下：css.container { background-color: red; position: relative; width: 50%; ...原创 2019-04-07 22:27:44 · 912 阅读 · 0 评论 -
JavaScript从URL上获得参数值
function findGetParameter(parameterName) { var result = null, tmp = []; location.search //search字段返回查询url的查询参数部分，如?paramter=value¶meter2=value2 .substr(1) //去掉前面的问号（?）...原创 2019-03-26 17:54:06 · 162 阅读 · 0 评论 -
Bootstrap入门--未完成
目录一 介绍二 使用2.1 容器2.2 网格布局2.3 文字排版2.4 颜色2.5 表格2.6 Utilities参考一 介绍bootstrap是一个为前端快速搭建网站而设计的前端框架，提供了很多可用的模板。通过bootstrap可以快速搭建出网站，但是个性化的样式仍需要自己设计。bootstrap是响应式的，能够根据设备宽度而呈现不同样式；也是mobile-first的，所有的样式最先为小...原创 2019-03-25 23:28:47 · 301 阅读 · 0 评论 -
jQuery入门
目录一、介绍二、核心知识2.1、引入jQuery2.2、操作DOM2.2.1、getting和setting2.2.2、adding2.2.3、removing2.2.4、attributes2.2.5、styles2.3、Traversing DOM2.4、获得元素三、事件参考一、介绍二、核心知识jQuery库的所有内容都被包含在jQuery名字空间中，而$默认为jQuery的匿名。通过方...原创 2018-12-10 22:21:03 · 241 阅读 · 0 评论 -
javascript入门
记录javascript入门所需知识原创 2018-12-08 12:33:55 · 485 阅读 · 0 评论 -
利用搜索引擎来搜索特定网站中的关键词
谷歌: (关键词) site: (域名) 比如: htmlsite:w3school.com.cn百度: (关键词) site: (域名) 比如: htmlsite:w3school.com.cn原创 2019-04-08 16:14:39 · 16859 阅读 · 1 评论