WEB前端

WEB前端包括HTML标签、CSS样式和JS编程等相关的知识。雷雪松的博客WEB前端栏目主要是分享作为WEB前端工程师在WEB前端开发的过程中WEB前端技巧,优秀的JS插件,有趣的JS效果,常用的CSS技巧以及HTML5最新技术。

强烈推荐优秀的Vue UI组件库

WEB前端

Vue 是一个轻巧、高性能、可组件化的MVVM库,API简洁明了,上手快。从Vue推出以来,得到众多Web开发者的认可。在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正式使用。开发团队在使用Vue.js框架和UI组件库以后,开发效率大大提高,自己写的代码也少了,很多界面效果组件已经封装好了。在选择Vue UI组件库的过程中,通过GitHub上根据star数量、文档丰富程度、更新的频率以及维护等因素,也收集整理了一些优秀的Vue UI组件库。下面PHP程序员雷雪松详细的介绍一下给大家强烈推荐优秀的的Vue UI组件库。
阅读原文 »

Vue中style的scoped属性以及穿透方法

WEB前端

Vue组件中,为了使样式私有化(模块化),不对全局造成污染,可以在style标签上添加scoped属性以表示它的只属于当下的模块,局部有效。如果一个项目中的所有vue组件style标签全部加上了scoped,相当于实现了样式的私有化。如果引用了第三方组件,需要在当前组件中局部修改第三方组件的样式,而又不想去除scoped属性造成组件之间的样式污染。此时只能通过穿透scoped的方式来解决,选择器>>>。下面PHP程序员雷雪松详细的介绍一下vue中style的scoped属性以及穿透方法。
阅读原文 »

Nativefier将web页面打包为桌面应用

WEB前端

有些特殊场景需要实现把任意一个网站打包成一个桌面可执行应用。手机端有PhoneGap等打包工具制作WebApp。今天给大家推荐一个很好的桌面应用打包工具-Nativefier。Nativefier可以只需要执行两行命令三分钟内就可以把任意一个网站打包成一个桌面应用。下面PHP程序员雷雪松详细讲解一下如何使用Nativefier将web页面打包为桌面应用。
阅读原文 »

搜索、 排序、 筛选的Js插件-List.js

WEB前端

List.js是为纯HTML 列表,表格或任何其他内容添加了搜索,排序,过滤和灵活性的Js插件。List.js非常的小巧,并且简单,但是功能却非常强大。下面PHP程序员雷雪松详细的介绍一下搜索、 排序、 筛选的Js插件-List.js。
阅读原文 »

Gulp教程之图片压缩

WEB前端

Gulp.js 是一个自动化构建工具,Gulp 配置起来非常简单,可以利用Gulp实现很多功能,比如说配合gulp-imagemin实现图片压缩。下面PHP程序员雷雪松详细的介绍一下使用gulp-imagemin压缩图片文件(包括PNG、JPEG、GIF和SVG图片)。
阅读原文 »

Vue.js教程

WEB前端

最近一段时间学习了一下主流框架Vue.js,并用Vue.js的框架vux开发手机端项目,整体开发还是比较顺利,效率还是挺高的。说说使用Vue.js的感受,学习起来比较快,需要记的很少,Vux提供的组件很全,可以完成大部分的业务,自己需要单独写的代码很少。在项目开发的过程中,遇到的问题都能在网上找到解决方案。学习Vue.js的时候一定要放空自己,千万不要用JQuery那一套思路来学习。下面PHP程序员雷雪松结合自己实际使用情况总结一下Vue相关知识点分享给大家。

阅读原文 »

HTML转图片的JS插件-rasterizeHTML.js

WEB前端

WEB前端工作中,有时需要实现对页面生成缩略图的功能。rasterizeHTML.js就可以将HTML渲染到浏览器的canvas中,直接用JS插件达到生成图片的效果。rasterizeHTML.js为我们提供了三个方法:rasterizeHTML.drawURL( url [, canvas] [, options] )根据URL生成canvas,rasterizeHTML.drawHTML( html [, canvas] [, options] )根据HTML代码生成,rasterizeHTML.drawDocument( document [, canvas] [, options] )根据文档生成。下面PHP程序员雷雪松详细的介绍一下HTML转图片的JS插件-rasterizeHTML.js。
阅读原文 »

npm搭建PhoneGap环境

WEB前端

PhoneGap是一款开源的创建跨平台移动应用程序的框架,PhoneGap官网宣传语:使用开放Web技术就能开发令人惊异的移动App。PhoneGap使开发者能够在网页中调用IOS,Android和Blackberry等主流智能系统手机的核心功能——包括电池状态,网络状信息,相机,设备信息,地理定位,指南针,加速器,联系人,提醒(声音和振动),文件系统,文件传输等。此外PhoneGap还拥有丰富的插件,PhoneGap是目前做WebAPP的首选。下面PHP程序员雷雪松详细的讲解下使用NodeJS下的npm搭建PhoneGap环境。
阅读原文 »

非常实用的select下拉框-Select2.js

WEB前端

Web开发中,Select下拉框是常用的输入组件。由于原生的Select几乎很难通过CSS样式控制。一些好看的Select下拉框就只能通过模拟来实现。PHP程序员雷雪松给大家推荐一筐款不错的Select下拉框插件:Select2。Select2可以支持搜索、标签、远程数据、无限滚动、和许多其他非常优秀的选项,Select2还可以非常方便的自定义样式,基本可以实现所有的Select效果。下面PHP程序员雷雪松就详细的讲解一下Select2.js的用法。
阅读原文 »

Gulp入门教程

WEB前端

Gulp是一个前端构建工具,API也非常简单,学习起来很容易,Gulp使用的是NodeJS中pipe()管道来读取和操作数据,速度更快。Gulp上手非常快,使用起来也非常的方便。Gulp的运行流程很简单:首先通过gulp.src()方法获取到我们想要处理的文件流,然后把文件流通过pipe方法导入到Gulp的插件中,最后把处理后的流再通过pipe方法导入到gulp.dest()。下面PHP程序员雷雪松详细的讲解下Gulp如何使用。
阅读原文 »