最新消息:Rockyxia Web技术博客全新改版,响应式布局满足各种设备各种尺寸的访问需求。

最新发布

Canvas学习5:线型
Canvas

Canvas学习5:线型

rockyxia 6个月前 (06-19) 978浏览

写在前面 在绘制线段一文中,了解到如何在Canvas中绘制线段。虽然使用Canvas中API可以很轻松的绘制出线段,但里面还是有不少的细节需要了解。这篇文章咱们就来了解线段中的线型。 Canvas中的线型主要包括线宽、线段端点和线段连接点三个部分。那么咱们先来了解线宽。 线宽 通过前面的示例,我们不难发现,在Canvas中通过lineWidth属性来定义线段的粗细。我们可以给其明确指定一个value值,在没...

Js/Jquery

15个常用的javaScript正则表达式

rockyxia 7个月前 (06-01) 951浏览

摘要 收集整理了15个常用的javaScript正则表达式,其中包括用户名、密码强度、整数、数字、电子邮件地址(Email)、手机号码、身份证号、URL地址、 IPv4地址、 十六进制颜色、 日期、 QQ号码、 微信号、车牌号、中文正则。表单验证处理必备,赶紧收藏吧! 1 用户名正则 //用户名正则,4到16位(字母,数字,下划线,减号) var uPattern = /^[a-zA-Z0-9_-]{...

Canvas学习4:绘制虚线和圆点线
Canvas

Canvas学习4:绘制虚线和圆点线

rockyxia 7个月前 (05-26) 970浏览

写在前面 上一节中,使用moveTo()、lineTo()和stroke()可以很轻易的在Canvas中绘制出实线(线段)。整篇文章中看到的都是绘制实现。不知道你和我是不是一样的好奇,那么要在Canvas中绘制虚线和圆点线又要怎么绘制,在Canvas有没有类似的API能直接绘制呢? 其实我也很好奇,看了一些资料,要像绘制实线那样简单或者直接,相对来说是没有的,但不用担心,通过其他的方法也是可以实现的。因为J...

Vue实战案例:用学过的知识做一个小demo
Vuejs

Vue实战案例:用学过的知识做一个小demo

rockyxia 7个月前 (05-16) 1619浏览

写在前面 学过了前面11个章节的知识,可以说你已经对vue2.0的基础知识有了一定程度的掌握,虽然在真正开发过程中,一些知识的使用会稍有不同,但是别慌,我们会把那部分内容在进阶系列,比如:单文件组件,过渡效果,状态管理vuex,路由vue-router,网络请求vue-resource等等。 那是不是就意味着我们现在还不能用基础知识做开发,当然不是,加强动手能力是进步的最好方式,我们今天就来用学过的基础知识...

Vue第十一节:动态绑定class和style
Vuejs

Vue第十一节:动态绑定class和style

rockyxia 7个月前 (05-08) 1166浏览

写在前面 在第六节《教你如何在html中绑定数据》的章节中,我们学会了如何给视图上的html标签绑定属性。 比如,给 <a> 标签绑定href属性,简单回忆一下: <!-- v-bind指令 --> <a v-bind:href="link"></a> <!-- v-bind的缩写 --> <a :href="link">...

Vue第九节:掌握vue的另一个核心:组件
Vuejs

Vue第九节:掌握vue的另一个核心:组件

rockyxia 7个月前 (05-08) 1279浏览

写在前面 第一节我们就介绍过,vue有两大核心:数据驱动和组件。 传送门:《Vue框架是什么,为什么选它?》 我们在之前的章节,已经详细地介绍了vue的数据驱动,从这一节开始,我们就来学习另一个核心:组件。 (没错,又是这张图) 组件是我们人为地把页面合理地拆分成一个个区块,让这些区块更方便我们重复使用,有了组件,我们可以更高效合理地开发和维护我们的项目。 竟然说得组件那么好用,那我们就来好好学学怎么使用...

Vue第十节:实现vue组件之间的通信
Vuejs

Vue第十节:实现vue组件之间的通信

rockyxia 7个月前 (05-08) 1267浏览

写在前面 这一节我们还是来继续介绍组件:组件之间如何通信。 第九节我们在介绍组件知识的时候,提到过组件可以接受参数props,这其实就是组件之间的一种通信方式:父组件→子组件传递数据。 父组件→子组件 那我们还是不厌其烦地再演示一遍:父组件→子组件传递数据。 组件实例的作用域都是孤立的,也就是子组件在模板template不能引用父组件的数据,那么,当子组件有需要使用父组件的时候,我们该怎么办呢? 这里,...

Vue第八节:实战前必须掌握的10个指令(下)
Vuejs

Vue第八节:实战前必须掌握的10个指令(下)

rockyxia 8个月前 (04-18) 1182浏览

写在前面 上一节我们学了5个重要的指令: v-text 、 v-html 、 v-show 、 v-if 、 v-else 传送门:《 实战前必须掌握的10个指令(上) 》 这一节,我们继续学习剩下的5个指令。话不多说,撸起来! 6. v-for 指令 有时候,我们的data中的存放的数据不是个简单的数字或者字符串,而是数组Array类型,这个时候,我们要把数组的元素展示在视图上,就需要用到vue提供...

Vue第七节:实战前必须掌握的10个指令(上)
Vuejs

Vue第七节:实战前必须掌握的10个指令(上)

rockyxia 8个月前 (04-18) 1166浏览

写在前面 这一节我们来学习并掌握在实战用一定会用到的10个指令,没错,是一定会用到,通过这些指令,可以让我们很方便的完成某些操作。掌握了这几个指令,我们距离实战就又近了一步。 1. v-text 指令 v-text 指令用于更新标签包含的文本,它的作用跟双大括号的效果一样。我们看看它的用法: <div id="app"> <p v-text="msg"></p&g...

Canvas学习3:绘制线段
Canvas

Canvas学习3:绘制线段

rockyxia 8个月前 (04-17) 941浏览

写在前面 在上一篇介绍Canvas坐标系统的结尾处,我们使用了Canvavs绘制了一个网格。整个效果是由直线和文本构成。在这一节中,我们来看看如何使用Canvas绘制线段。 在Canvas中,线段也是路径中的一种,被称之为线性路径。在Canvas中绘制线性路径主要用到moveTo(x,y)、lineTo(x,y)和stroke()几个方法。 先画一条简单的直线 Canvas画一下直线非常的容易。众所周之,...

Vue第六节:教你如何在html中绑定数据
Vuejs

Vue第六节:教你如何在html中绑定数据

rockyxia 8个月前 (04-17) 1220浏览

写在前面 上两节我们学习了vue的实例知识: 第4节:vue实例的4个常用选项 第5节:vue 实例的生命周期 提醒一下,这两节的内容在后面实战的时候很重要,如果落下的同学可以回去翻看学习,不必害怕难学,这里没有难学的教程。 这一节,我们学习如何在html上绑定我们实例中的数据。 Mustache 语法 什么叫Mustache语法,别被这高大上的叫法吓到了,其实就是双大括号{{ }}的写法,在之前的章节我...

Vue第五节:轻松掌握 vue 实例的生命周期
Vuejs

Vue第五节:轻松掌握 vue 实例的生命周期

rockyxia 8个月前 (04-08) 1407浏览

写在前面 上两节我们都是讲vue的实例,简单创建和定义实例的4个常用选项,没看过的伙伴可以先去看上两节,按顺序学习比较容易掌握。 这一节我们学习vue实例的生命周期,没错,实例也跟动物一样,有自己的“生命”,实例也会经历出生至死亡的各个阶段。 Vue把整个生命周期划分为创建、挂载、更新、销毁等阶段,每个阶段都会给一些“钩子”让我们来做一些我们想实现的动作。学习实例的生命周期,能帮助我们理解vue实例的运作机...

Canvas学习2:Canvas里的坐标系统
Canvas

Canvas学习2:Canvas里的坐标系统

rockyxia 9个月前 (03-30) 1094浏览

写在前面 上一节我们做好了使用Canvas的准备工作,但并没有深入的介绍如何使用Canvas,比如怎么绘制图形,怎么做Canvas动画等。但并不用着急,随着我们后面的深入学习,这一切都会知道的。在深入学习之前,我们有必要先了解Canvas里的坐标系统。那么这一节,就先来了解Canvas的坐标系统。 笛卡坐标系 在数学里,我们学过一种坐标系统,叫作笛卡坐标系(Cartesian Coordinate sys...

Vue第四节:定义一个vue实例的4个常用选项
Vuejs

Vue第四节:定义一个vue实例的4个常用选项

rockyxia 9个月前 (03-30) 1413浏览

写在前面 上一节,我们讲过如何创建一个Vue实例,仅需4步走: ( 不厌其烦地复习一下 ) 我们知道,定义一个Vue实例的参数有el(指定挂载的DOM元素),data(实例的数据),上一节讲过除了这两个之外,还可以定义其他参数。今天,我们就来学习在开发中,我们要怎么定义一个vue实例才能满足我们的需要? 下面,我们先用上一节的知识,先创建一个Vue实例: <div id="app">&l...

Canvas学习1:Canvas入门准备
Canvas

Canvas学习1:Canvas入门准备

rockyxia 9个月前 (03-27) 1159浏览

写在前面 由于工作的需要,最近开始在学习HTML5的canvas相关的知识。这里主要记录自己学习canvas相关的知识笔记。如果文章有不对之处,还请大婶们多多指正。 今天这篇文章是学习canvas的一些准备工作。 本教程来自w3cplus.com,著作权归作者所有。 canvas元素 <canvas>也是HTML中的一个元素,可以给这个元素添加一些HTML属性,比如使用width和height...

Vue第三节:创建一个Vue实例,超简单
Vuejs

Vue第三节:创建一个Vue实例,超简单

rockyxia 9个月前 (03-27) 1296浏览

写在前面 我们之前说过,Vue是数据驱动视图的,只要model(模型层)的数据改变了,Vue就会帮我们改变视图上显示的内容,不用我们自己去动手写代码更新。那么,它是怎么做到的,我们的代码要怎么写才能做到这一点。 答案是:Vue实例。 先确保你的项目安装好Vue.js,安装教程:点击这里 安装好之后,我们来看看怎么创建和使用Vue实例,我们把它分成 4 步走。 第1步 创建语法 创建一个Vue实例的语法很...

Vue第二节:简易安装 和 快速入门Vue.js
Vuejs

Vue第二节:简易安装 和 快速入门Vue.js

rockyxia 9个月前 (03-23) 1193浏览

写在前面 上一节我们介绍了Vue.js框架,这一节,我们可以来试着动手写点小代码了。 1 简易安装 要使用Vue.js,我们得先把它安装到我们的项目中,说明了简易安装,我们讲解的肯定是最简单的方法,先不管那些高大上的费时间的安装方法,直接引入一个js文件,先把代码敲代码再说。 <head> <meta charset="UTF-8"> <title>简易...

Vue第一节:Vue.js框架是什么,为什么选择它?
Vuejs

Vue第一节:Vue.js框架是什么,为什么选择它?

rockyxia 9个月前 (03-16) 1844浏览

写在前面 “大白话,讲编程”系列又回来了,这个系列我们一起学习的是Vue.js基础知识。你没看错,是基础知识。所以,哪怕你入行不久,相信你在的大白话风格下,也能学会。 但还是希望你有开发过html,css,javascript的项目经验,如果你连一点项目经验都没有,亦或者你早已掌握Vue.js的知识,那么这个系列不适合你当前的学习阶段。 这一个系列的Vuejs连载教程是同步转载自 web前端教程 微信公众号...

尝鲜一下微信小程序的开发过程
web综合

尝鲜一下微信小程序的开发过程

rockyxia 11个月前 (01-11) 2166浏览

写在前面 随着1月9日微信小程序的正式上线,小程序的热度达到了一个顶峰,虽然我不并不是太看好小程序的发展,但是新的事物的诞生,去了解下也是没有坏处的吗。近日尝试了一个小程序的开发,了解下小程序的开发过程,非常的简洁的一个页面,里面有三个tab页,内容都是静态的,引入了微信提供的WEUI样式库。 如果,我是说如果后续还有兴趣的话,我会把数据变成动态的,从博客上开个接口来取数据。 下面来简单介绍下这个简单的小...

我的知识库

基于HTML模板和JSON数据的JavaScript交互

rockyxia 12个月前 (12-22) 2057浏览

写在前面 近日在协助研发一个系统的时候,项目研发对js比较陌生,很多数据的操作都被交给前端来做,所以遇到了json数据绑定到html模版的问题,搜了一圈的确没有找到好的办法,突然眼前一亮看到大神zhangxinxun之前的一篇文章,正是写的这个东西,虽然该文章只展示一个简单的json数据绑定,但是在思路上却给了我很大的启示,不管是简单还是复杂的json,原理都是这样的,在此记录一下,顺便分享推荐一下张大神的...