qwezxc24680-CSDN博客

原创 Vue2.0之H5元素Audio属性currentTime、duration应用

需求：正在做的项目是一个SPA音乐播放器，用到了H5新加入的audio标签，同时像主流播放器一样显示当前播放歌曲的秒数和总时间；思路：查阅API文档得知需要用到audio.currentTime和audio.duration分别表示当前播放时间和音频总时间，但如何用数据驱动的思想来使用成了第一个问题。

2017-10-13 16:35:49 13333 4

原创 vue2.0之Mint-UI配置填坑

Vue项目搞了这么久，也差不多得给界面换换衣服，看起来专业一点。网上搜了搜，选择了比较流行的饿了么出品的针对移动端的mint-ui，若是PC端可以用更全面的element-ui，这里就不多做介绍了。起初以为看看文档就能直接上手用的东西愣是花了接近一天的功夫才跑起来，只能说文档在初始化引导方面还是存在缺陷，像我这样的新手小白很可能就掉进坑里爬不起来。首先按照使用文档一

2017-10-09 09:13:36 10167 6

原创 vue路由遍历生成复数router-link

业务场景：使用vue-cli做一个spa；需求：顶部导航栏控制下方内容栏，实现页面内切换。毫无疑问，vue-router很适合这样的需求，实现起来也并不复杂：1、main.js：import VueRouter from 'vue-router'Vue.use(VueRouter);2、定义（路由）组件：import songList from './co

2017-09-18 10:46:54 5131

原创页面间数据传递url传参 vs sessionStorage

项目中经常会碰到的一个问题就是前端ajax从后台请求到了数据，比如用户登录信息，这时候后面的子页面都会用到这些数据；后端那边希望相同的数据前端可以不走ajax而用之前请求的数据，这样就可以大大减少服务器压力。在这种情况下我们前端不能用ajax只能另谋出路，在之前的博文里我用到的是最简单的url传值，当时勉强能用，后来时间一长各种弊端也暴露出来了。

2017-09-05 13:27:45 1736 1

原创响应式高度与overflow的小总结

最近做了2个项目，一个web app针对手机移动端，另一个是传统网页针对PC端的用户。两个项目都需要响应式的布局，比较偷懒的做法是使用一些栅格布局的框架如Bootstrap；虽然它能做到一定程度的响应式，但局限性也相当大，细节微调很困难加上本身会有一些奇奇怪怪的默认设置导致css很难做定制化的修改。故决定放弃框架自己写布局。两个项目下来各种方案都尝试过，比较靠谱的响应式写法

2017-08-29 10:12:54 3115

原创 vue2.0实现一个简单的轮播图

因为之前一直在忙公司的项目，vue这块就生疏了不少，正好借这个小demo复习下vue的知识。

2017-08-15 15:49:24 58362 11

原创 7月工作小结

从项目开始到正式上线，已连续加了8天的班，感觉身体被掏空。。。现将工作中碰到的问题慢慢分享出来，做一个不大不小的见证吧。

2017-07-31 22:57:51 251

原创 Vue 2.0 vue-router基础学习（一）

之前的组件部分学习告一段落，紧接着就到了最关键也是（据说）最恶心的路由部分。废话不多说，进入正题。

2017-07-21 15:49:40 445

原创 Vue2.0组件实现动态搜索引擎（二）

接上一篇，完成logo部分我们就要开始整个项目的核心——panel组件。

2017-07-13 15:13:54 3655

原创 Vue2.0组件实现动态搜索引擎（一）

从github上看到一个不错的开源项目：https://github.com/lavyun/vue-demo-search，自己琢磨着不看代码做了一遍学习了不少，现将碰到的坑与填坑过程分享出来。首先看一下demo的界面：简单来说就是一个复刻各大搜索引擎的功能，用户输入关键字能出现搜索建议并上下键控制输入框内容。同时点击上方logo能够

2017-07-06 15:08:22 9364

原创下班前的一点思考

临近下班，手上没事偶然看到篇博文大有感触，故分享出来：来自张鑫旭大神的空间 http://www.zhangxinxu.com/life/2017/04/life-state-2017/“……很多人会很奇怪，HTML和CSS有什么好学的，花个几天时间就可以了解了。但，就是这个“没什么好学”的东西，我一直高强度学了10年，这10年来放弃各种应酬，社交，旅游，每天都熬夜，研究，

2017-06-23 16:48:25 317

原创 Vue.js的全局/局部组件填坑记

玩Vue也有一段日子了，最近陷在组件坑里差点出不来，还好有SegmentFault高人指点，特将细节分享出来一起学习提高。起因：最早一直用的是头文件引入Vue，即，这样做的缺点是每次都需要创建新实例且并不符合项目工程化的需求。解决方案：使用node.js+npm安装Vue，再使用IDE(WebStorm)打开项目实现热加载。问题：然后在使用全局组件的时候碰到一个

2017-06-21 16:08:18 7042

原创 Vue实现简单的列表增加与删除填坑总结

学习Vue也有快一周的时间了，技痒难耐想做个小DEMO测试下水平，正好看到keepfool的一篇博文：“Vue.js——60分钟快速入门”链接：http://www.cnblogs.com/keepfool/p/5619070.html文章最后有个demo，功能不难正好适合初学者练手，于是在不看作者代码的情况下复刻一份出来。

2017-06-14 14:23:41 6741 2

原创 Vue表单控件绑定的思考

最近在看vue官网教程的时候碰到一点问题： {{ option.text }} Selected: {{ selected }}new Vue({ el: '...', data: { selected: 'A', options: [ { text: 'One', value: 'A' }, { text: 'Two'

2017-06-08 10:47:46 446

原创 CSS3 Canvas如何巧妙实现空白画布

接上一篇，在用canvas实现验证码的时候原先的代码是：context.fillRect(0, 0, canvas.width, canvas.height);context.clearRect(0, 0, canvas.width, canvas.height);思路是先填充目标区域，再清空填充色获得无边框白色画布。但左右一想这方法实在太蠢，于是改了一下：context.stro

2017-05-25 14:56:48 1801

原创 CSS3 Canvas实现一个带干扰线条的随机数验证码

工作中接到的任务是做一个带干扰项的验证码，首先想到的是利用H5的canvas来实现。本想直接网上copy一段代码，但很多都不符合需求，索性自己写了，代码如下。<canvas class="codeimg" id="codeimg" style="width: 120px;height: 36px"> Your browser does not support the canvas ele

2017-05-24 10:17:01 2076 1

转载 css 如何让图片全屏的问题

css 如何让图片全屏的问题例如我有一张1024*768的图片，能否让它在页面上显示全屏，无论电脑分辨率是1024*768还是1440*900，我都想让这张图片全屏，如何实现？1、如果楼主只是将其当做一张图片显示，可以通过css控制，如img{width:100%;height:100%;}.否则需要将其作为网页背景的话可以试试如下方法：2、如果这张图片为背景图片由于背景图片不

2017-05-22 10:54:54 4658

原创初来乍到

实习完正式工作也有一个月了，想起大学同学的建议就开了这么个blog，项目之余也要学会积累。上一次玩博客可以追溯到高中时代了，那时还比较有空时不时记录自己的心情，吐吐槽。Anyway，希望今后每天(?)都能记录自己代码旅途中的风景。

2017-05-10 21:40:39 263

不会指弹的厨子不是好Coder