Vue可以说是现在最火的MVVM前端UI框架了吧，整体性能优于React，比Angular也更轻量，具体可参考官网对比其他框架
官方文档: https://cn.vuejs.org/v2/api/

Hello World

首先我们开始从学每门语言的hello world入门Vue吧
html代码，同angular一样，采用双大括号的形式实现数据绑定:

1
2
3

<div id="app">
  {{ message }}
</div>

js代码，通过el获取到html的节点，向节点中插入data里的message的值:

1
2
3
4
5
6

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello VueJs'
  }
})

运行结果:

1

Hello VueJs

注:el指明了创建的Vue实例对象的作用域，data则是用于存储Vue实例的数据对象

阅读更多

使用Github Pages搭建自己的静态网站、博客

链接:https://pages.github.com
可参考我的这篇文章github上搭建hexo博客教你如何使用hexo以及Github Pages搭建个人博客

Github短网址生成

链接:https://git.io

注意:只能使用github.com域名下的网址

Github简历

链接:https://resume.github.io

阅读更多

经常在Chrome应用商店下载扩展程序也就是插件，有时候在想可不可以自己也开发一个插件用用呢？本文就是在这样的背景下产生的，以一个生活必需的简单获取天气的插件作为开发演示，下面就开始我们的Chrome插件开发之旅吧！
源码地址: https://github.com/leoyaojy/chrome-plugin-weather.git
目录结构：

1
2
3
4
5
6
7
8
9
10
11
12

├── css
│   └── main.css
├── imgs
│   ├── icon-128.png
│   ├── icon-16.png
│   ├── icon-19.png
│   └── icon-38.png
├── js
│   ├── jquery.js
│   └── main.js
├── manifest.json
└── popup.html

效果图:

阅读更多

对于验证码，我们并不陌生，随处可见，比如:登录注册、论坛灌水、刷票、密码破解等，主要作用是屏蔽机器请求，保障业务不受机器提交请求干扰
下面就来写一个验证码demo，使用最常见的字母加数字验证码，加上干扰点和干扰线，使用的GD库生成的，如果你没有安装的话，请自行谷歌安装，另如何判断是否安装启用，请直接在phpinfo页面搜GD库即可
效果如下图:

阅读更多

接上文less入门初体验，接下来讲讲sass，sass有两种文件后缀名，一种是.sass，另一种是.scss。前者类似于ruby的语法规则，没有花括号，没有分号，具有严格的缩进；而后者更贴近于css的语法规则，易于阅读，更具语义性，所以本文采用.scss后缀名来编写sass代码

编译

1、Ruby:
sass是由Ruby语言编写的，所以我们可以通过Ruby来编辑sass代码，首先需要安装ruby，然后再安装sass，之后通过sass命令编译文件

1
2
3

sudo apt install ruby
sudo gem install sass
sass style.scss style.css

sass提供四个编译风格的选项:

nested：嵌套缩进的css代码，默认值
expanded：没有缩进的、扩展的css代码
compact：简洁格式的css代码
compressed：压缩后的css代码

生产环境中一般使用最后一个

1

sass --style compressed style.scss style.css

阅读更多

css有众多的预处理器，其中比较流行的三个是less、sass、stylus，本文就一起来体验less编写css代码
官方文档:http://lesscss.org/
官网栗子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

@base: #f938ab;
.box-shadow(@style, @c) when (iscolor(@c)) {
    -webkit-box-shadow: @style @c;
    box-shadow:         @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
    .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
    color: saturate(@base, 5%);
    border-color: lighten(@base, 30%);
    div { .box-shadow(0 0 5px, 30%) }
}

编译成css文件:

1
2
3
4
5
6
7
8

.box {
    color: #fe33ac;
    border-color: #fdcdea;
}
.box div {
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

阅读更多

之前介绍过linux常用命令一文，接下来我们来一起学习一下linux里好玩的命令

screenfetch:显示系统、主题信息

安装使用:

1
2

sudo apt install screenfetch
screenfetch

效果图:

阅读更多

e的兼容

1
2
3

function fn(e){
	var event = e || window.event;
}

FireFox里的Event跟IE里的不同，IE里的是全局变量，随时可用。FireFox里的要用参数引导才能用，是运行时的临时变量
在IE/Opera中是window.event，在FireFox中是event。而事件的对象，在IE中是window.event.srcElement，在Firefox中是event.target，Opera中两者都可用

阻止事件冒泡

W3C的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true
stopPropagation是事件对象Event的一个方法，作用是阻止目标元素的冒泡事件，但是不会阻止默认行为
什么是冒泡事件？如在一个按钮是绑定一个click事件，那么click事件会依次在它的父级元素中被触发，stopPropagation就是阻止目标元素的事件冒泡到父级元素
了解更多请点这:理解DOM中的事件流

阅读更多

注册.me域名

先看下图优惠码:

图①:SSL证书申请地址，价值$9/年，点击之后会进入类似购物车的页面，在Promo Code输入优惠码，点Apply即可免费使用了
图②:.me域名申请地址，价值$18.99/年，点击之后会出现一个需要github进行认证的页面，点击Login With Github成功认证通过之后就会进入.me域名搜索注册页面，之后添加进购物车购买即可，难度在于英语要好

转移DNS服务到DNSPod

为什么转移到DNSPod？，老实说就是我之前的几个域名都是DNSPod进行管理的，如果你用其他的(比如:digitalocean)，可仿照此步骤进行。登录到namecheap(PS:怎么注册我就略过了)，输入用户名、密码登录成功之后进入到控制面板Dashboard，选择左侧Domain List，选择右侧域名后的Manage按钮，鼠标滑动到NAMESERVERS选项，右侧选择第三项Custom DNS，ADD NAMESERVER两条记录(f1g1ns1.dnspod.net、f1g1ns2.dnspod.net)，之后等48小时全球DNS更新即可，如下图所示:

购置VPS服务器

点击图中所示区域或者直接点这注册，进入注册页面，点击页面右上角Sign Up按钮之后输入邮箱、密码进行注册(自己任意邮箱即可)，之后网站会向你的邮箱发送一封验证邮件，你进邮箱验证成功之后就是第二步验证了，需要你有一张信用卡或贷记卡或者PayPal(本人穷屌丝一枚，没有信用卡也没有贷记卡，只有几个银行的借记卡，如果你和我一样的话，直接注册一个PayPal好了注册链接)，注册好了之后选择PayPal验证，需要支付5美金人民币也就35块左右吧；第三步是创建一个VPS，网站称之为Droplets的东西，看自己情况进行选购，之后也就验证成功了
我的配置为:

阅读更多