精选前端各项技术连载教程，有原创也有转载
rockyxia 6年前 (2017-06-19) 9382浏览
写在前面 在绘制线段一文中，了解到如何在Canvas中绘制线段。虽然使用Canvas中API可以很轻松的绘制出线段，但里面还是有不少的细节需要了解。这篇文章咱们就来了解线段中的线型。 Canvas中的线型主要包括线宽、线段端点和线段连接点三个部分。那么咱们先来了解线宽。 线宽 通过前面的示例，我们不难发现，在Canvas中通过lineWidth属性来定义线段的粗细。我们可以给其明确指定一个value值，在没...
rockyxia 6年前 (2017-05-26) 9016浏览
写在前面 上一节中，使用moveTo()、lineTo()和stroke()可以很轻易的在Canvas中绘制出实线（线段）。整篇文章中看到的都是绘制实现。不知道你和我是不是一样的好奇，那么要在Canvas中绘制虚线和圆点线又要怎么绘制，在Canvas有没有类似的API能直接绘制呢？ 其实我也很好奇，看了一些资料，要像绘制实线那样简单或者直接，相对来说是没有的，但不用担心，通过其他的方法也是可以实现的。因为J...
rockyxia 6年前 (2017-05-16) 11393浏览
写在前面 学过了前面11个章节的知识，可以说你已经对vue2.0的基础知识有了一定程度的掌握，虽然在真正开发过程中，一些知识的使用会稍有不同，但是别慌，我们会把那部分内容在进阶系列，比如：单文件组件，过渡效果，状态管理vuex，路由vue-router，网络请求vue-resource等等。 那是不是就意味着我们现在还不能用基础知识做开发，当然不是，加强动手能力是进步的最好方式，我们今天就来用学过的基础知识...
rockyxia 6年前 (2017-05-08) 9652浏览
写在前面 在第六节《教你如何在html中绑定数据》的章节中，我们学会了如何给视图上的html标签绑定属性。 比如，给 <a> 标签绑定href属性，简单回忆一下： <!-- v-bind指令 --> <a v-bind:href="link"></a> <!-- v-bind的缩写 --> <a :href="link">...
rockyxia 6年前 (2017-05-08) 9331浏览
写在前面 第一节我们就介绍过，vue有两大核心：数据驱动和组件。 传送门:《Vue框架是什么，为什么选它？》 我们在之前的章节，已经详细地介绍了vue的数据驱动，从这一节开始，我们就来学习另一个核心：组件。 (没错，又是这张图) 组件是我们人为地把页面合理地拆分成一个个区块，让这些区块更方便我们重复使用，有了组件，我们可以更高效合理地开发和维护我们的项目。 竟然说得组件那么好用，那我们就来好好学学怎么使用...
rockyxia 6年前 (2017-05-08) 8413浏览
写在前面 这一节我们还是来继续介绍组件：组件之间如何通信。 第九节我们在介绍组件知识的时候，提到过组件可以接受参数props，这其实就是组件之间的一种通信方式：父组件→子组件传递数据。 父组件→子组件 那我们还是不厌其烦地再演示一遍：父组件→子组件传递数据。 组件实例的作用域都是孤立的，也就是子组件在模板template不能引用父组件的数据，那么，当子组件有需要使用父组件的时候，我们该怎么办呢？ 这里，...
rockyxia 6年前 (2017-04-18) 7776浏览
写在前面 上一节我们学了5个重要的指令： v-text 、 v-html 、 v-show 、 v-if 、 v-else 传送门:《 实战前必须掌握的10个指令(上) 》 这一节，我们继续学习剩下的5个指令。话不多说，撸起来！ 6. v-for 指令 有时候，我们的data中的存放的数据不是个简单的数字或者字符串，而是数组Array类型，这个时候，我们要把数组的元素展示在视图上，就需要用到vue提供...
rockyxia 6年前 (2017-04-18) 8102浏览
写在前面 这一节我们来学习并掌握在实战用一定会用到的10个指令，没错，是一定会用到，通过这些指令，可以让我们很方便的完成某些操作。掌握了这几个指令，我们距离实战就又近了一步。 1. v-text 指令 v-text 指令用于更新标签包含的文本，它的作用跟双大括号的效果一样。我们看看它的用法： <div id="app"> <p v-text="msg"></p&g...
rockyxia 6年前 (2017-04-17) 7535浏览
写在前面 在上一篇介绍Canvas坐标系统的结尾处，我们使用了Canvavs绘制了一个网格。整个效果是由直线和文本构成。在这一节中，我们来看看如何使用Canvas绘制线段。 在Canvas中，线段也是路径中的一种，被称之为线性路径。在Canvas中绘制线性路径主要用到moveTo(x,y)、lineTo(x,y)和stroke()几个方法。 先画一条简单的直线 Canvas画一下直线非常的容易。众所周之，...
rockyxia 6年前 (2017-04-17) 14140浏览
写在前面 上两节我们学习了vue的实例知识： 第4节：vue实例的4个常用选项 第5节：vue 实例的生命周期 提醒一下，这两节的内容在后面实战的时候很重要，如果落下的同学可以回去翻看学习，不必害怕难学，这里没有难学的教程。 这一节，我们学习如何在html上绑定我们实例中的数据。 Mustache 语法 什么叫Mustache语法，别被这高大上的叫法吓到了，其实就是双大括号{{ }}的写法，在之前的章节我...
rockyxia 6年前 (2017-04-08) 8183浏览
写在前面 上两节我们都是讲vue的实例，简单创建和定义实例的4个常用选项，没看过的伙伴可以先去看上两节，按顺序学习比较容易掌握。 这一节我们学习vue实例的生命周期，没错，实例也跟动物一样，有自己的“生命”，实例也会经历出生至死亡的各个阶段。 Vue把整个生命周期划分为创建、挂载、更新、销毁等阶段，每个阶段都会给一些“钩子”让我们来做一些我们想实现的动作。学习实例的生命周期，能帮助我们理解vue实例的运作机...
rockyxia 6年前 (2017-03-30) 8582浏览
写在前面 上一节我们做好了使用Canvas的准备工作，但并没有深入的介绍如何使用Canvas，比如怎么绘制图形，怎么做Canvas动画等。但并不用着急，随着我们后面的深入学习，这一切都会知道的。在深入学习之前，我们有必要先了解Canvas里的坐标系统。那么这一节，就先来了解Canvas的坐标系统。 笛卡坐标系 在数学里，我们学过一种坐标系统，叫作笛卡坐标系（Cartesian Coordinate sys...
rockyxia 6年前 (2017-03-30) 10001浏览
写在前面 上一节，我们讲过如何创建一个Vue实例，仅需4步走： ( 不厌其烦地复习一下 ) 我们知道，定义一个Vue实例的参数有el（指定挂载的DOM元素），data（实例的数据），上一节讲过除了这两个之外，还可以定义其他参数。今天，我们就来学习在开发中，我们要怎么定义一个vue实例才能满足我们的需要？ 下面，我们先用上一节的知识，先创建一个Vue实例： <div id="app">&l...
rockyxia 6年前 (2017-03-27) 8149浏览
写在前面 由于工作的需要，最近开始在学习HTML5的canvas相关的知识。这里主要记录自己学习canvas相关的知识笔记。如果文章有不对之处，还请大婶们多多指正。 今天这篇文章是学习canvas的一些准备工作。 本教程来自w3cplus.com，著作权归作者所有。 canvas元素 <canvas>也是HTML中的一个元素，可以给这个元素添加一些HTML属性，比如使用width和height...
rockyxia 6年前 (2017-03-27) 8610浏览
写在前面 我们之前说过，Vue是数据驱动视图的，只要model（模型层）的数据改变了，Vue就会帮我们改变视图上显示的内容，不用我们自己去动手写代码更新。那么，它是怎么做到的，我们的代码要怎么写才能做到这一点。 答案是：Vue实例。 先确保你的项目安装好Vue.js，安装教程：点击这里 安装好之后，我们来看看怎么创建和使用Vue实例，我们把它分成 4 步走。 第1步 创建语法 创建一个Vue实例的语法很...
rockyxia 6年前 (2017-03-23) 7007浏览
写在前面 上一节我们介绍了Vue.js框架，这一节，我们可以来试着动手写点小代码了。 1 简易安装 要使用Vue.js，我们得先把它安装到我们的项目中，说明了简易安装，我们讲解的肯定是最简单的方法，先不管那些高大上的费时间的安装方法，直接引入一个js文件，先把代码敲代码再说。 <head> <meta charset="UTF-8"> <title>简易...
rockyxia 6年前 (2017-03-16) 8786浏览
写在前面 “大白话，讲编程”系列又回来了，这个系列我们一起学习的是Vue.js基础知识。你没看错，是基础知识。所以，哪怕你入行不久，相信你在的大白话风格下，也能学会。 但还是希望你有开发过html，css，javascript的项目经验，如果你连一点项目经验都没有，亦或者你早已掌握Vue.js的知识，那么这个系列不适合你当前的学习阶段。 这一个系列的Vuejs连载教程是同步转载自 web前端教程 微信公众号...
rockyxia 7年前 (2016-07-28) 5749浏览
写在前面 在ES6之前，Javascript还不支持原生的模块化。如果要实现模块化，我们要借助一些框架，比如：requireJS或者seaJS等；什么？没用过也没听过这些框架？没关系，它们不是我们今天要讲的重点。 今天的主角是：ES6自带的模块化。 模块化的初衷 也许你要问了，好端端的，为什么要模块化？ 现在的web系统越来越庞大、复杂，需要团队分工，多人协作，大型系统的javascript文件经常存在复...
rockyxia 7年前 (2016-07-28) 5774浏览
写在前面 类class这个概念，在其他编程语言中很早就实现了，而JavaScript语言并没有实现，一直以来，开发者都是使用函数function和原型prototype来模拟类class实现面向对象的编程。 接下来的学习，前端君默认大家都了解传统的模拟类的写法，如果你已经忘记了，ES6系列的第九节有介绍JavaScript的面向对象，点击可以查看。 现在，ES6给我们带来了好消息，它给JavaScript...
rockyxia 7年前 (2016-07-28) 6273浏览
写在前面 Promise对象，ES6新增的一个全新特性，今天我们要好好学习一下它。 Promise的设计初衷 首先，我们先一起了解一下，为什么要设计出这么一个玩意儿，用它是为了解决什么问题？ 带着这个问题，我们来回想一下日常开发中，经常需要用到ajax请求数据，拿到数据后，再进行一些处理。 可有一次，你需要用ajax进行多次请求，而且，每次请求都依赖上一次请求返回的数据来作为参数，然后继续发出请求，你把代...