" vue"标签下的所有文章

使用setTimeout出现内存溢出的解决办法

setTimeout就是一个定时器,它可以很容易地实现在规定时间内所要执行的函数或方法。但是我再setTimeout的使用过程中就出现了内存溢出的各种问题。下面我将使用一个当前时间与过去的某个时间差的计算方式来进行讲解setTimeout,首先来看逻辑思想部分。
对于任何编程语言,我们刚开始都需要进行需求分析,需求分析就是一个实现功能的想法或者步骤。
比如我在这个例子中将会使用本地当前时间减去我所获得的时间,得到它们之间的时间差。

1、获得当前时间

获得当前时间可以直接使用new Date(),即可获得当前本地或者说本机时间。

2、目前已知时间为:2017-05-20 00:29:10

3、如何对时间进行相减

其实在JavaScript中,时间是可以直接进行减法运算的,不过必须是JavaScript的Date日期格式,如果是其他的则不支持,比如我们直接使用2017-05-20 00:29:10 - 2017-05-20 00:28:10,这样的相减是会报错的。而且也是无法相减的,因为他们两个是字符串,无法进行相减。那该怎么办?
很简单,我们将2017-05-20 00:29:10转换为Date对象即可。而JavaScript的Date对象得到的日期格式应该是这样的“Sat May 20 2017 00:33:26 GMT+0800”,我们可以通过new Date()对我们上面的字符串“2017-05-20 00:29:10”进行转换,但是转换之前必须将此字符串,转换为如下格式“2017/05/20 00:29:10”,这样的格式才能被JavaScript的Date()识别。
如此一来,他们就可以进行相减了。

4、相减后获得的秒数该如何计算?

两个日期相减得到的是毫秒数,根据1000毫秒=1秒的计算方式,我们可以得到要将毫秒转换为秒,我们需要将当前的毫秒数除以(1000*60)再乘以60,由此可以得到公式(毫秒/(1000*60)*60就可以得到秒数)。

5、在页面上实时显示秒数

这里就进入了我们今天的正题了,使用setTimeout定时器即可实现,其用法setTimeout(code,time),其中code是即将执行的代码,time为执行的毫秒数。

6、使内存溢出的setTimeout

阅读更多

vuejs2中获取dom的方法

2017/04/08VUEJS 标签:0

之前我还未学习到ref属性的时候,使用vue要获取一个dom元素都是使用原生JavaScript中的document.getElementById等方法进行获取DOM元素,但是这种原生JS的方法在VUE中使用不可取,经常会出现问题,比如无法找到dom元素等等一系列的问题,之前我写的一个音乐播放器就是使用document.getElementById,在调试的时候总是出错,今天终于接触到ref属性了,感觉ref好强大。

官方ref解释

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素; 如果用在子组件上,引用就指向组件实例: 阅读更多

使用VUE2制作音乐播放器

研究了2天的成果终于得到回报了,播放器已经制作完成,但还有待于完善。我总是离不开jQuery的DOM操作,刚开始学习VUE,还是会经常使用到DOM操作。因此写出来的代码还是有很多缺点,等待往后学习的差不多了,我会再改进的。
做播放器的想法来源于之前本人做的web app《vuejs2 + wp-rest-api开发web app》此文章的灵感。因此再献上一个music player来温习下vue。

一、效果

GIF动图有3M多,如果没有显示出来,请再等等

vue-player播放器

vue-player播放器


看到了吧,自己的一点小创意,搞了个猪头上去。

二、相关代码

本程序中仅使用了vue的ajax框架vue-resource,未使用到vue-router,因此再安装vue-cli的时候,可以略过vue-router,本程序仅有一个组件,即只有一个vue文件,使用了css预处理语言stylus。使用的json数据为本站相关php代码生成的(仅为了演示),如果你是在本地搭建环境,json也可以写在本地。 阅读更多

vuejs2 + wp-rest-api开发web app

2017/03/16VUEJS 标签:0

之前我写了一篇《利用Cordova,jqurey与wp-rest-api制作一个属于自己博客的移动APP》,使用的是jQuery mobile的方式进行web app的开发,今天我就说一下使用vuejs 与 wp-reset-api开发一个web app的方法。
先看看做好以后的效果吧:

一、首先安装nodejs,安装方法请自行去官方网站查看
二、安装vue-cli
1、直接打开nodejs的命令窗口输入以下命令:
npm install -g vue-cli //全局安装vue-cli

vue init webpack egtch //生成项目名为egtch的模板,这里的项目名egtch随你自己写

输入这个目录后会出现如下所示

vue-cli创建项目

vue-cli创建项目


阅读更多

VUE开发中遇到Syntax Error: Unexpected token, expected ,

2017/03/06VUEJS 标签:0

Syntax Error: Unexpected token, expected ,简单的意思就是语法错误,当我查看自己的代码的时候并没有发现有什么问题,代码如下:

<script>
export default {
  const MAX = 5
}
</script>

阅读更多

1

share

AD