夕夜大魔王的前端魔法卷轴
文章平均质量分 63
分享来自本人的前端魔法卷轴中的各种内容
会逐步更新本人在前端学习过程中的get的各种知识,分享踩过的坑
希望可以帮助到别人,也帮助自己记录知识,同时也期待着大神们的指正和建议
技术的互相分享,总是充满快乐~
YuuyaRin
努力前行中的前端爱好者
展开
-
JavaScript中鼠标事件触发顺序探索
这次是为了完成之前脑袋里比较模糊的一个疑问。大家都知道,关于鼠标的事件有非常多,如PC模式下的click、mousedown、mouseup,手机模式下的touchstart、touchend、touchmove。那么如果将他们全部绑定之后,在PC端和移动端分别做一些鼠标的常用操作,事件触发的情况会是如何呢。毕竟实践出真知,所以今天我就实验了一下。首先打开了百度,然后f12,切换到手机模式原创 2017-02-18 16:34:21 · 4436 阅读 · 0 评论 -
vue.js之路(1)——vue-cli脚手架的搭建
相比于主流的angular和react前端框架,vue在近年来也变得非常火热。他吸取了前两者的优点,同时学习曲线也更加平缓。所以本魔王准备入坑了~~首先从vue的脚手架搭建开始吧。这里不得不吐槽,window相对mac和linux确实在软件开发方面,非常不方便,代码打包,环境搭建等,简直爆炸~~..然而,嗯,本魔王就是在用win10,哎~嘛,废话不多说,今天的任务就是把脚手架搭好,虽然原创 2017-01-03 16:34:32 · 30216 阅读 · 2 评论 -
vue.js之路(2)——为WebStrom添加vue的相关支持
WebStrom作为老牌的前端开发利器,它的插件功能也是非常全面和强大的。虽然webStrom自身不会识别*.vue的文件,但是可以通过一系列设置和插件解决这些问题。废话不多说,这里说一下我的设置流程(本喵用的是windows系统,WebStrom版本是2016.3.2)1.添加ES6语法支持:因为vue是基于ES6语法的,所以必须要保证IDE能够支持ES6。首先打开设置: win原创 2017-01-06 13:35:25 · 6810 阅读 · 0 评论 -
vue.js之路(3)——vue2版本的路由
在使用vue编写单页应用时,通过点击不同的连接想要局部刷新出不同页面的内容,通过vue-router会非常方便。 然而在vue2和vue1中,路由的使用有着非常多不同的地方,当我们用npm搭建的是vue2版本的脚手架时,vue-router2.0以后的版本是不再兼容之前的写法的,这个我也踩了很多坑,各种百度和看文档,然后把原本Vue Router1版本的写法改了过来。这里来对比一下原创 2017-01-07 17:38:42 · 7862 阅读 · 2 评论 -
vue.js之路(4)——vue2.0s中eventBus实现兄弟组件通信
在vue1.0中,组件之间的通信主要通过vm.$dispatch沿着父链向上传播和用vm.$broadcast向下广播来实现。然而在vue2.0中,已经废除了这种用法。vuex加入后,对组件之间的通信有了更加清晰的操作,对于中大型的项目来说,一开始就把vuex的使用计划在内是明智的选择。然而在一些小型的项目,或者说像我这样写到一半才发现vue2.0用不了$.broadcast和$dispa原创 2017-01-16 16:39:16 · 35940 阅读 · 5 评论 -
gulp入坑系列(1)——安装gulp
前言 好吧,我承认我是为了搞定Sass编译CSS文件的问题,迷一样的着手入gulp的坑,sass和gulp的爬坑历程大概会一起更新。然后感觉这里windows和mac的流程差不多,不过mac的通常在指令前加sudo ,本喵是windows的本本,所以就以windows的流程为例了。1. 安装淘宝cnpm镜像 因为很多npm包都是国外的,所以安装起来很慢,所以我们可以利用淘宝的镜像服务器来进行安原创 2016-12-09 19:05:22 · 6552 阅读 · 0 评论 -
gulp入坑系列(2)——初试JS代码合并与压缩
在上一篇里成功安装了gulp到项目中,现在来测试一下gulp的合并与压缩功能gulp入坑系列(1)——安装gulp(传送门):http://blog.csdn.net/u013034014/article/details/53543223在之前建立的项目中写入,在根目录新建js文件夹,并在文件夹中新建两个js文件,代码如下:index.js:var index={};in原创 2016-12-09 19:53:47 · 3662 阅读 · 2 评论 -
gulp入坑系列(3)——创建多个gulp.task
继续gulp的爬坑路,在准备get更多gulp的具体操作之前,先来明确一下在gulp中创建和使用多个task任务的情况。 gulp所要做的操作都写在gulp.task()中,系统有一个默认的default任务,如下: var gulp = require('gulp');//gulp自身 gulp.task('default',['task1','task2'], functi原创 2016-12-10 12:36:14 · 8154 阅读 · 0 评论 -
gulp入坑系列(4)——gulp的代码转换
终于进入正题了,当初也是为了将Sass和SCSS代码转换成CSS才从Sass的学习路径忽然跳到了gulp的大坑里╮( ̄▽ ̄")╭当然,gulp不仅仅能转换Sass,这里会提到如下转换:jsx转换成常规的JavaScript(说到jsx,玩过react的同学应该是知道的)es6转换为es5Less,Sass转换为CSS首先,新建一个文件夹,然后继续和之前的方法一样,在文件夹里np原创 2016-12-10 16:04:06 · 1979 阅读 · 0 评论 -
Sass学习之路(1)——Sass简介
Sass是CSS的一种预处理器语言,类似的语言还有Less,Stylus等。那么什么是CSS预处理器?CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。换言之就是说,CSS预处理器是一种专门的变成语言,在通过这种语言编写之后,再将其编译成正常的CS原创 2016-12-09 15:11:41 · 1054 阅读 · 3 评论 -
Sass学习之路(2)——Sass环境安装(windows版)
因为本喵目前用的是window10的本子,所以这里就发windows版本的安装流程啦。(希望有朋友可以赞助我一个mac(┳_┳));第一步:安装ruby因为Sass是基于ruby编写的,所以先去官网下载ruby(百度一下,你就知道)。当然了,国外的网站,动不动上不去,或者下载不了都有可能,所以百度软件中心这个也是可以的,亲测可用点开以后选择普通下载,原创 2016-12-09 15:54:14 · 692 阅读 · 0 评论 -
Sass学习之路(3)——Sass编译
Sass的编译也是在我们使用Sass的时候必须要经过的一个步骤,因为".sass"和".scss"文件并不能直接使用标签引用,最终其实还是要将他们转换成CSS文件来在项目中使用。所以要让web页面真正使用到Sass缩写的东西,编译这个过程是必须要有的。这里会提到3种编译方法:1.命令行编译顾名思义,就是通过电脑里的终端(命令行工具)通过指令来编译Sass文件(个人觉得,这种方式比较原创 2016-12-11 13:35:45 · 884 阅读 · 0 评论 -
Sass学习之路(4)——不同样式风格的输出方式
因为每个前端工程师编写代码的风格都不太一样,所以Sass的编译也非常人性化的提供了不同风格的编译方式,主要分为4种。 比如下面这一段Sass代码,我们来看看在不同风格下,会编译成什么样吧:nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-blo原创 2016-12-12 14:52:13 · 3605 阅读 · 1 评论 -
Sass学习之路(5)——变量
1.定义变量:Sass中定义变量的关键字是'$'(毕竟程序员缺钱),并使用冒号(:)进行赋值,例如:$width:200px;//定义了一个名为width的变量,值为200px 2.普通变量和默认变量:普通变量便是我们在大括号外用上面的方式声明的变量,可全局使用。默认变量需要在声明的变量后加上 !default,如下: $lineHeight:1.原创 2016-12-12 15:29:57 · 1914 阅读 · 1 评论 -
Sass学习之路(6)——嵌套
Sass中提供了嵌套的功能,让样式代码显得非常有层次感,可以将选择器,样式等按层级一层一层嵌套下去。Sass嵌套分为3种:1.选择器嵌套:比如这样一段HTML: Home About Blog比如我们想给a标签设置样式,CSS的写法是这样的:nav a { color:red;}/*或者*/header nav a { color原创 2016-12-12 16:21:34 · 641 阅读 · 0 评论 -
Sass学习之路(7)——混合宏
在Sass的使用中,如果整个网站中有一些小的样式类似,比如字体、宽高、颜色,可以通过变量来统一处理。但是当我们需要重复使用大段的样式时,使用变量就不能很方便的处理了,这时,Sass的混合宏就体现出了他的作用。1.声明混合宏无参混合宏:@mixin border-radius { -webkit-border-radius: 10px; border-radius原创 2016-12-13 13:57:59 · 1161 阅读 · 0 评论 -
Sass学习之路(8)——拓展/继承/占位符
1.拓展/继承Sass中和CSS一样,也具有继承的用户,也是继承类中的样式代码块。Sass中是通过关键词"@extend"来继承已存在的类样式块,从而实现代码的继承。举个栗子://SCSS.btn { border: 1px solid #ccc; padding: 6px 10px; font-size: 14px;}.btn-primary { backgr原创 2016-12-14 15:18:23 · 1316 阅读 · 0 评论 -
Sass学习之路(9)——插值 #{}
在Sass中,除了在设置属性的值的时候,我们可以使用变量或循环等方式赋值以外。属性的名称,选择器名称等,都可以使用一种叫插值的方式将字符串插入进来。下边我们来看一个例子:$properties: (margin, padding);@mixin set-value($side, $value) { @each $prop in $properties { #{$pro原创 2016-12-15 15:39:38 · 1852 阅读 · 0 评论 -
Sass学习之路(10)——注释、数据类型
1.Sass的注释:在说Sass的数据类型之前,先提一提Sass中注释的两种方式。(1).类似CSS的注释方式,如: /* 这里是一段注释 */(2).类似JavaScript的注释方式,如 //这里是一段注释这两种方式都可以用来在Sass中注释,但是有一些区别。第一种方式,注释的内容也会在编译出的CSS中显示,而第二种不会显示。我们来看一个例子://定义一个占位符%m原创 2016-12-16 12:36:30 · 3216 阅读 · 0 评论 -
Sass学习之路(11)——Sass运算
程序中的运算是非常唱见的一件事情,而运算也是Sass中的一项基本属性,在Sass中可以进行各种数学计算。1.加法在变量和属性中,都可以做加法运算。看一个例子:.box { width: 20px + 8in;}编译出的CSS:.box { width: 788px;} 这里解释一下in这个单位,in是指英寸,1英寸等于96px,所以最后编译的结果是20px+8*96原创 2016-12-17 13:25:09 · 1276 阅读 · 0 评论 -
Sass学习之路(12)——控制命令
Sass的控制命令其实和JS以及其他一些语言中的非常相似:1.@if@if指令是一个SassScript,可以根据条件来处理样式块,在条件为true或false时,会返回不同的样式块。它也可以配合@else if 以及@else一起使用。下边是一个通过@if来控制元素显示隐藏的例子://SCSS@mixin blockOrHidden($boolean:true) { @if原创 2016-12-17 14:57:20 · 645 阅读 · 0 评论 -
Sass学习之路(13)——字符串函数
字符串函数,顾名思义就是用来处理字符串的函数。下边来列举一下Sass中主要的字符串函数:1.unquote($string)unquote()函数主要用来删除字符串中的引号,如果字符串本来就没有引号,则不会做任何更改。下面来看下对不同字符串的使用效果://SCSS.test1 { content: unquote('Hello Sass!') ;}.test2 {原创 2016-12-18 15:27:07 · 1004 阅读 · 1 评论 -
Sass学习之路(14)——数字函数
Sass中除了之前写到的用来处理字符串的字符串函数,还有关于数字处理的数字函数。(其实Sass中的数字函数和Js中的Math函数还是非常相似的)1.percentage()percentage()函数主要是用来将一个不带单位的数字转化成百分比(这样算弹性布局的时候应该很方便)。来看一个例子:.footer{ width : percentage(5px / 10px)原创 2016-12-20 11:58:15 · 976 阅读 · 0 评论 -
Sass学习之路(15)——列表函数(一)
在Sass中,列表函数主要是用来值列表进行一些函数操作。如果一一列举回来,会发现列表函数的种类会比数字函数和字符串函数多很多,所以就分开来写好了。(其实也是因为最近在自己写一些前端的小东西,所以时间有点紧)。那么回归正题:1.length()函数:length()函数和JS中的Array.length的作用基本一样,用来返回一个列表中的值的个数(或者说是列表长度):.length{原创 2016-12-22 17:27:03 · 487 阅读 · 0 评论