vue.js实战——vue 实时时间
created:实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载，$el还不可用，需要初始化处理一些数据时会比较有用。
mounted：el挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始。
beforeDestroy：实例销毁之前调用，主要解绑一些使用addEventListener监听的事件等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>实时时间</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
{{date}}
</div>
<script>
//自个写的
/* new Vue({
el:"#app",
data:{
date:''
},
mounted:function(){
var self=this;
var time=setInterval(function(){
self.date=new Date();
},1000);
},
beforeDestory:function(){
clearInterval(time);
}
}) */
//标准代码
var app=new Vue({
el:'#app',
data:{
date:new Date()
},
mounted:function(){ //el挂载到实例上调用，一般我们第一个业务逻辑会在这里开始
var _this=this;
this.timer=setInterval(function(){
_this.date=new Date();
},1000);
},
beofreDestory:function(){
if(this.timer){
clearInterval(this.timer);
}
}
})
</script>
</body>
</html>
对比之下自己写的代码真的是，考虑的太少了，都没有判断setInterval对象是否存在
vue.js实战——vue 实时时间的更多相关文章
- vue.js实战——vue元素复用
Vue在渲染元素时,出于效率考虑,会尽可能地复用已有的元素而非重新渲染,例: <!DOCTYPE html> <html lang="en"> <he ...
- 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能
大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...
- Vue.js起手式+Vue小作品实战
本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...
- Vue.js 实战总结
最近在某个项目中用到了Vue.js,从上手做开发到项目发布,一步步踩了不少坑.本文试图总结过去一个多月使用Vue.js中的一些经验,也算是一点心得体会吧,拿出来与大家分享,欢迎多多交流. Vue.js ...
- vue.js实战——购物车练习（包含全选功能）
vue.js实战第5章 54页的练习1 直接放代码好了,全选的部分搞了好久,代码好像有点啰嗦,好在实现功能了(*^▽^*) HTML: <!DOCTYPE html> <html l ...
- 分享Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站
这是个什么的项目? 使用 Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站. 博客线上地址:www.boblog.com Github地址:https: ...
- vue.js 实战 todo list
vue.js 起源 vue.js 的作者是尤雨溪,是一名中国人,之前在谷歌工作,现在在全职维护 vue 项目. vue.js 是 2014 年推出来的.现在已经更新到 2.x 版本,3.0 版本会在 ...
- js 引入Vue.js实现vue效果
拆分组件为单个js见:https://www.jianshu.com/p/2f0335818ceb 效果 html <!DOCTYPE html> <html> <hea ...
- Vue.js实战学习笔记（中）
1.递归组件给组件设置name属性,组件就可以在它的模板内调用自己,但必须给一个条件来限制递归数量.<div id="app"> <child-component ...
随机推荐
- c#窗体获取系统时间、回车触发按钮事件、实现验证码功能
1.窗体上显示时间: 1)首先新建一个Timer,命名为timer,并在属性中修改Interval为1000: 2)在需要显示时间的地方添加一个label(假设设置名称为:timerLabel): 3 ...
- P2370 yyy2015c01的U盘（二分+背包）
思路:先说一下题意吧.就是给你n个文件大小为v,价值为c, 但是硬盘的大小为S, 而且要存的总价值大于等于p.问每次传输k大小的文件.问k的最大值是多少? 我们以k为二分对象. 直接讲检验函数吧. 假 ...
- 已使用.netframework,version=v4.6.1 而不是目标框架netcoreapp,version=v2.1 还原包，此包可能与项目不完全兼容
已使用.netframework,version=v4.6.1 而不是目标框架netcoreapp,version=v2.1 还原包,此包可能与项目不完全兼容 NU1202: 包 System.Run ...
- with as 加上 materialize hint 生成实质临时表
WITH AS: 就是将一个子查询部分独立出来,有时候是为了提高SQL语句的可读性,有时候是为了提高SQL语句性能. 如果一个SQL语句中,某个表会被访问多次,而且每次访问的限制条件一样的话,就可以使 ...
- ORA-20011 ORA-29913 KUP-11024 GATHER_TABLE_STATS
--alter 日志Sat Mar 30 22:01:08 2019DBMS_STATS: GATHER_STATS_JOB encountered errors. Check the trace f ...
- 剑指offer——矩形覆盖
我们可以用2*1的小矩形横着或者竖着去覆盖更大的矩形.请问用n个2*1的小矩形无重叠地覆盖一个2*n的大矩形,总共有多少种方法? 分析:斐波那契数列的变形 n=0,返回0 n=1,返回1 n=2,返回 ...
- SkylineGlobe 7.0版本 矢量数据查询示例代码
在Pro7.0.0和7.0.1环境下测试可用. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
- RPC通信原理(未完，先睡觉)
一 背景 OpenStack 各组件之间是通过 REST 接口进行相互通信,比如Nova.Cinder.Neutron.Glance直间的通信都是通过keystone获取目标的endpoint,即ap ...
- 面试笔记--HashMap扩容机制
转载请注明出处 http://www.cnblogs.com/yanzige/p/8392142.html 扩容必须满足两个条件: 1. 存放新值的时候当前已有元素的个数必须大于等于阈值 2. 存放新 ...
- java eclipse jdk 关系
java 经常用到多个jdk版本 1.7 1.8.... 兼容时几个位置 处理 eclipse.ini (A处) #-vm#C:\Program Files\Java\jdk1.7.0_79\bi ...