如何使用 Vue 2 构建简单的单页应用程序(第 2 部分)

本教程的第1部分中讨论了构建单页应用程序的基础知识,页面链接由 Vue 自动完成。 在本教程中,您将学习如何:

  • 传递路径参数
  • 使用路由保护,设置未经认证的用户可访问路由。

从上一个教程结束开始,你可以打开 GitHub 仓库,克隆并继续完成应用程序。 继续阅读

如何使用 Vue 2 构建简单的单页应用程序(第 1 部分)

今天,我们将学习如何使用 Vue 构建单页应用程序。

Vue.js 是一个构建交互式Web界面的库。 它为 数据反应式(data-reactive) 组件提供了一个简单而灵活的API。

为了本教程的目的,术语 Vue 指的是 Vue 2.X 版本,除非另有说明。

我们将构建什么

让我们快速了解一下我们正在构建的内容,如图: 继续阅读

JavaScript 浮点数运算的精度问题

问题描述

在 JavaScript 中整数和浮点数都属于 Number 数据类型,所有数字都是以 64 位浮点数形式储存,即便整数也是如此。 所以我们在打印 1.00 这样的浮点数的结果是 1 而非 1.00 。在一些特殊的数值表示中,例如金额,这样看上去有点变扭,但是至少值是正确了。然而要命的是,当浮点数做数学运算的时候,你经常会发现一些问题,举几个例子: 继续阅读

PostCSS及其常用插件介绍

前几天,PostCSS 6.0 分布了。

PostCSS 处理了很多你不必处理的乏味工作。它很巧妙的不同于预处理器,提供了可选的且更简洁的编程语言,来编译成 CSS,如 Sass、Less 与 Stylus。得出这个结论的部分原因是:

  • 它的名字。PostCSS 既能在预处理器将源代码编译成 CSS 之前也能在其之后对文件执行操作。
  • PostCSS 能替代你的预处理器。现在有很多插件实现了一些设计,如变量、 嵌套、mixins 以及 extends。

然而,虽然你可以构建自己的预处理器,但除非你想限制功能并加快编译速度,你没有别的该这么做的理由。就我个人而言,为增强 CSS,我使用 Sass,再加以 PostCSS 辅佐。没什么波澜,可能是对于大多数前端使用者来说没什么大的影响,因为通常大家都是使用其插件。

CSS 预处理器 和 CSS 后处理器

在说 PostCSS 之前,先了解一下 pre-processor 。
继续阅读

Sass入门教程

Sass(Syntactically Awesome StyleSheets) 是对 CSS 的扩展,可以编译成传统CSS,供浏览器使用。使用 Sass 是为了解决在大型项目中传统CSS会遇到的重复、可维护性差等问题。Sass 新增了nested rules(嵌套规则), variables(变量), mixins(混入), selector inheritance(选择器继承)等特性。

使用 Sass 优点:

  • 简单简洁
  • 语义化(expressive)
  • 重复使用性好(reusable)
  • 可维护性和扩展性好

Sass 的语法分为:

  • 新的SCSS  ( Sassy CSSSass 3,扩展名为*.scss);
  • 旧的SASS  ( 学习Haml,具备不使用大括弧格式、使用缩排,不能直接使用CSS语法、学习曲线较高等特性,扩展名为*.sass)

关于两者比较的补充可以参考这篇文章 What’s the difference between SCSS and Sass?

由于新的 SCSS 语法是 CSS3 的超集合,所以传统的 CSS3 档案就算直接复制过来也不会出错,学习曲线相对较缓,因此对于前端开发工程师来说推荐使用SCSS语法。

为了方便演示,你可以将示例代码直接在线转译:http://www.sassmeister.com/

本教程仅供入门学习,如果你想完整学习Sass,或者你的团队,你的项目中正在Sass,建议你查看完整的Sass文档:http://www.css88.com/doc/sass/

使用Sass

在开始介绍Sass特性之前,我们先来学习如何将 Sass 转译成 CSS 。 继续阅读

前端开发聚合、分享、期刊订阅类网站收集

前端技术日新月异,及时了解前端开发最新最前沿的技术资讯,对于前端开发攻城狮的成长进步来说非常重要。分享这些年收藏的几个前端开发聚合、分享、期刊订阅类网站。欢迎大家留言补充。

JavaScript Weekly

一个总结 JavaScript 新闻和文章的免费电子邮件周刊。http://javascriptweekly.com/ 继续阅读

2017年前端开发工具趋势

你有两年以上的前端开发经验吗?你会用 Sass 和 Autoprefixer 等高级的CSS辅助技能吗?你的 JavaScript 知识是否融汇贯通,你是否喜欢使用 Gulp , npm 和 jQuery ?如果是这样,根据 Ashley Nolan 的前端问卷调查,你是一个典型的前端开发工程师。

谎言,该死的谎言,统计数字和调查问卷

愚人码头注:谎言,该死的谎言,统计数字(英文:Lies, damned lies, and statistics),是一句著名的西方谚语。主要描述数字的说服能力,特别是用来讽刺一些使用统计数字支持、但毫无说服力的分析报告,以及人们倾向于贬低那些不支持其立场的统计结论。 维基百科

诸如此类的调查有助于你发现新工具和你的知识短板。至本文撰写时,本次问卷调查收到了5,254份答复,这是比大多数民意调查更具有样本价值。但是,调研结果是否代表真相还是应该抱审慎态度。。。

全球性的统计结果

这次问卷调查是全球性的,但将主要来自英语国家。 在其他地方开发或使用的流行工具可能被忽略。 继续阅读

必盛互联高性价比香港虚拟主机——使用测评

香港主机由于免备案、高速稳定等的因素,受到不少站长的喜爱。不知各位有没有注意到,近期,有一家叫 必盛互联 的主机商开始活跃在各大博客论坛,邀请用户及博主们对主机进行测评。此次,本人也有幸参与其中,对其进行测评,也给各位做一个参考吧。

先介绍下必盛互联Bisend,一站式建站服务商,提供管理式云主机、香港服务器、SSL证书、域名等一系列的建站工具。下面开始进行本次的测评。 继续阅读

10道典型的JavaScript面试题

在IT界中,JavaScript开发人员的需求量一直居高不下。如果你的能力能够胜任这一角色,那么你有很多机会换一家公司,并提高薪水。但在你被一家公司聘用之前,你必须展示你的技能,以通过面试环节。在本文中,我将向您展示10个 JavaScript 技能典型问题以及其相关解决方案,来面试前端工程师。它们很有意思! 继续阅读

为什么我放弃 Gulp 和 Grunt 而使用 npm Scripts

我知道你在想什么。 什么?!Gulp不是刚刚干掉了Grunt吗? 为什么我们不能在Javascript的地盘上消停一会儿呢?我知道,但是…

我发现Gulp和Grunt是没有必要的抽象,npm Script 已经足够强大,并且通常更好用。 继续阅读