vue2.0 技巧汇总
/**
* Created by
*/
export default {
trim: (str) => { //删除左右两端的空格
return str.replace(/(^\s*)|(\s*$)/g, "");
},
//显示当天的时间,超过一天显示昨天,大于一天,显示,星期,年
formatMessageTime: (time) => {
const week = {
"0": "星期日",
"1": "星期一",
"2": "星期二",
"3": "星期三",
"4": "星期四",
"5": "星期五",
"6": "星期六"
};
const oneDay = 24 * 60 * 60 * 1000,
oneWeek = 6 * 24 * 60 * 60 * 1000,
oneYear = 365 * 24 * 60 * 60 * 1000;
// return function (time) {
if (!time) {
return '';
}
if (typeof (time) === 'string') {
return time;
}
const sendTime = new Date(time),
currentTime = new Date();
const yesterdayTime = new Date(currentTime.getFullYear(), currentTime.getMonth(), currentTime.getDate()); let minutes = sendTime.getMinutes();
let hours = sendTime.getHours();
minutes = minutes > 9 ? minutes : '0' + minutes;
hours = hours > 9 ? hours : '0' + hours; const showSendTime = hours + ':' + minutes;
let showDate;
// 今天
if (sendTime >= yesterdayTime) {
return showSendTime;
}
// 昨天
else if (sendTime >= yesterdayTime - oneDay) {
showDate = '昨天';
}
// 一周内
else if (sendTime >= yesterdayTime - oneWeek) {
showDate = week[sendTime.getDay().toString()];
}
// 今年内
else if (sendTime.getFullYear() == currentTime.getFullYear()) {
showDate = (sendTime.getMonth() + 1) + '/' + sendTime.getDate();
} // 本世纪
else if (sendTime.getFullYear().toString().slice(0, 2) == currentTime.getFullYear().toString().slice(0, 2)) {
showDate = sendTime.getFullYear().toString().slice(2) + '/' + (sendTime.getMonth() + 1) + '/'
+ sendTime.getDate();
}
//
else {
showDate = sendTime.getFullYear() + '/' + (sendTime.getMonth() + 1) + '/' + sendTime.getDate();
}
return showDate + ' ' + showSendTime;
// };
},
formatTime: (time) => {
var d = new Date(time);
var year = d.getFullYear();
var month = d.getMonth() + 1;
var day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate();
var hour = d.getHours();
var minutes = d.getMinutes();
var seconds = d.getSeconds();
// return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds;
return hour + ':' + minutes;
}
}
ctrl +enter 换行的获取光标的函数:
placeCaretAtEnd(el) {
el.focus();
if (typeof window.getSelection != "undefined" &&
typeof document.createRange != "undefined") {
var range = document.createRange();
range.selectNodeContents(el);
range.collapse(false);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (typeof document.body.createTextRange != "undefined") {
var textRange = document.body.createTextRange();
textRange.moveToElementText(el);
textRange.collapse(false);
textRange.select();
}
},
功能:根据id 查找id在数组的索引index
indexOfTargetId(id) {
for (var i = 0; i < this.length; i++) {
if (this[i].targetId == id) return i;
} return -1;
},
/* formatMsgTime(time) {
const week = {
"0": "星期日",
"1": "星期一",
"2": "星期二",
"3": "星期三",
"4": "星期四",
"5": "星期五",
"6": "星期六"
};
const oneDay = 24 * 60 * 60 * 1000,
oneWeek = 6 * 24 * 60 * 60 * 1000,
oneYear = 365 * 24 * 60 * 60 * 1000; // return function (time) {
debugger
if (!time) {
return '';
}
if (typeof (time) === 'string') {
return time;
}
const sendTime = new Date(time),
currentTime = new Date();
const yesterdayTime = new Date(currentTime.getFullYear(), currentTime.getMonth(), currentTime.getDate()); let minutes = sendTime.getMinutes();
let hours = sendTime.getHours();
minutes = minutes > 9 ? minutes : '0' + minutes;
hours = hours > 9 ? hours : '0' + hours; const showSendTime = hours + ':' + minutes;
let showDate;
// 今天
if (sendTime >= yesterdayTime) {
return showSendTime;
}
// 昨天
else if (sendTime >= yesterdayTime - oneDay) {
showDate = '昨天';
}
// 一周内
else if (sendTime >= yesterdayTime - oneWeek) {
showDate = week[sendTime.getDay().toString()];
}
// 今年内
else if (sendTime.getFullYear() == currentTime.getFullYear()) {
showDate = (sendTime.getMonth() + 1) + '/' + sendTime.getDate();
} // 本世纪
else if (sendTime.getFullYear().toString().slice(0, 2) == currentTime.getFullYear().toString().slice(0, 2)) {
showDate = sendTime.getFullYear().toString().slice(2) + '/' + (sendTime.getMonth() + 1) + '/'
+ sendTime.getDate();
}
//
else {
showDate = sendTime.getFullYear() + '/' + (sendTime.getMonth() + 1) + '/' + sendTime.getDate();
}
return showDate + ' ' + showSendTime;
// };
}*/
右键功能 @contextmenu.prevent="rightShow()"
v-on:contextmenu.prevent = "事件名称"
数据的json和对象的转换
1、console.log(JSON.stringify(json));
2.JSON.parse()
1、颜色的渐变
background:-webkit-linear-gradient(left, #1290e9,#00d7da );
background: -webkit-linear-gradient(left, #1815e0 20%, #00d7da);
2、模态窗口如何使用
JavaScript 获取当前时间戳:
第一种方法:
var timestamp = Date.parse(new Date()); 结果:1280977330000
第二种方法:
var timestamp = (new Date()).valueOf(); 结果:1280977330748 第三种方法:
var timestamp=new Date().getTime(); 结果:1280977330748 第一种:获取的时间戳是把毫秒改成000显示, 第二种和第三种是获取了当前毫秒的时间戳。
如何给tab栏添加点击样式;
vue更新数据是异步的
1.0 中确实是通过 v-el:xxx 标记 dom 然后在组件里通过 this.$els.xxx 就可以获得这个 dom 对象了
$nextTick(() => {}) 与DOM相关操作写在该函数回调中,确保DOM已渲染 什么是Vue.nextTick()
官方文档解释如下:
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码,
什么时候需要用的Vue.nextTick()
你在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。原因是什么呢,
原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,
所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数,
因为该钩子函数执行时所有的DOM挂载和渲染都已完成,此时在该钩子函数中进行任何DOM操作都不会有问题 。
在某个动作有可能改变DOM元素结构的时候,对DOM一系列的js操作都要放进Vue.nextTick()的回调函数中
功能:vue2.0 实现click点击当前li,动态切换class
addBagStyle(item, index) {
console.log('this is addBagStyle click')
this.$nextTick(function () {
this.conList.forEach(function (item) {
Vue.set(item, 'active', false);
});
Vue.set(item, 'active', true);
});
} },
html代码
<li :class="{'active':item.active}"
@contextmenu.prevent="rightShow()"
contextmenu="supermenu"
v-for="(item,index) in conList"
v-if="item.conversationType===1"
@click.stop="addBagStyle(item,index)"
ref="li">
使用this.$router.push() [javascript] view plain copy this.$router.push({name: '你路由的名字', query: {id: '可以是变量'}}) 获取的方法为 [javascript] view plain copy this.$route.query.id 文档中提到 [html] view plain copy 提醒一下,当使用路由参数时,例如从 /user/foo 导航到 user/bar,原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用。 复用组件时,想对路由参数的变化作出响应的话,你可以简单地 watch(监测变化) $route 对象: [html] view plain copy <pre name="code" class="javascript">watch: {
'$route' (to, from) {
// 对路由变化作出响应...
}
}</pre><p></p>
<pre></pre>
<br>
<p></p>
<p><span style="font-size:18px">也就是说当你把参数绑定到节点里后</span></p>
<p><span style="font-size:18px"></span></p><pre name="code" class="html"><p>{{params}}</p></pre><p></p>
<p><span style="font-size:18px"></span></p><pre name="code" class="html">data () {
return {
params: this.$route.query.id
}
}</pre>当参数发生变化时,你需要<p></p>
<p><span style="font-size:18px"></span></p><pre name="code" class="javascript">watch: {
'$route' (to, from) {
this.params = this.$route.query.id
}
}</pre><p></p>
<p><span style="font-size:18px">不然p标签里的值不会发生改变</span></p>
<br>
<br>
数组对象里添加属性
// for (let i = 0; i < this.conList.length; i++) {
// var els = this.conList[i];
// els.active = false;
// console.log(this.conList[i])
// } this.$nextTick(function () {
this.conList.forEach(function (item) {
Vue.set(item, 'active', false);
});
Vue.set(item, 'active', true);
});
vue2.0 技巧汇总的更多相关文章
- 移动平台3G手机网站前端开发布局技巧汇总
移动平台3G手机网站前端开发布局技巧汇总 作者:前端开发-武方博 发布:2011-05-10 09:11 分类:移动开发 阅读:120,618 views 7条评论 您或许正在 ...
- 移动平台WEB前端开发技巧汇总(转)
最近我很关注移动前端的知识,但做为一个UI设计师和web前端工作人员没有这个工作环境接触,做为门外汉,网上系统的知识也了了,一直有种雾里看花的感觉,见到本文,我自己是奉为经典.所以我分享之后又专门打笔 ...
- 《Vue2.0 实践揭秘》终于出版啦!
不知不觉间在园子开博都两年多了,最近一些园友问最近去哪了为何都没有新的文章了.最近确实发生了很多的事,一是忙工作二就是忙着写书.这还得多些园子的小编,自两年前发表的"架构师修炼"系 ...
- 适用初学者:vue2.0构建单页应用最佳实战
参考:https://segmentfault.com/a/1190000007630677 自己gitHub项目地址:https://github.com/shixiaoyanyan/vue-wor ...
- vue2.0与实战开发
慕课网实战 百度云 web前端实战: Node.js入门到企业Web开发中的应用 Web前端性能优化 让你的页面飞起来 前端跳槽面试必备技巧 前端JavaScript面试技巧全套 node.JS 线上 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十六 ║Vue基础:ES6初体验 & 模块化编程
缘起 昨天说到了<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║ Vue前篇:JS对象&字面量&this>,通过总体来看,好像大家对这一块不是很 ...
- vue2.0 源码解读(一)
又看完一遍中文社区的教程接下来开始做vue2.0的源码解读了! 注:解读源码时一定要配合vue2.0的生命周期和API文档一起看 vue2.0的生命周期分为4主要个过程 create. 创建---实例 ...
- 干货分享:vue2.0做移动端开发用到的相关插件和经验总结(2)
最近一直在做移动端微信公众号项目的开发,也是我首次用vue来开发移动端项目,前期积累的移动端开发经验较少.经过这个项目的锻炼,加深了对vue相关知识点的理解和运用,同时,在项目中所涉及到的微信api( ...
- Vue2.0+ElementUI+PageHelper实现的表格分页
Vue2.0+ElementUI+PageHelper实现的表格分页 前言 最近做了一些前端的项目,要对表格进行一些分页显示.表格分页的方法有很多,从宏观上来说分为物理分页和逻辑分页,由于逻辑分页(即 ...
随机推荐
- EF 下如何更新数据表数据
转载请注明出处:http://www.cnblogs.com/zhiyong-ITNote/ 一直不习惯linq的扩展方法,每次用的时候,贼不顺手,尤其是查数据的时候,这不更新个数据库这么简单地需求都 ...
- SpringBoot的国际化使用
在项目中,很多时候需要国际化的支持,这篇文章要介绍一下springboot项目中国际化的使用. 在这个项目中前端页面使用的thymeleaf,另外加入了nekohtml去掉html严格校验,如果不了解 ...
- css的基本定位机制
分为三种:普通流.浮动.绝对定位 普通流:默认,html文档的排列顺序块级从上到下(垂直距离由margin-top.margin-bottom决定):行内元素在一行中从左到右(由margin-left ...
- 回文串 --- 动态dp UVA 11584
题目链接: https://cn.vjudge.net/problem/34398/origin 本题的大意其实很简单,就是找回文串,大致的思路如下: 1. 确定一个回文串,这里用到了自定义的chec ...
- Codeforces Round #517 (Div. 2)
A #include<queue> #include<cstdio> #include<cstring> #include<algorithm> #de ...
- spy(主席树)
题目链接 题目为某次雅礼集训... 对于\(\max\{a-A_i,\ A_i-a,\ b-B_i,\ B_i-b\}\),令\(x_1=\frac{a+b}{2},\ y_1=\frac{a-b}{ ...
- 一步步完成Maven+SpringMVC+SpringFox+Swagger整合示例
本文给出一个整合Maven+SpringMVC+SpringFOX+Swagger的示例,并且一步步给出完成步骤. 本人在做实例时发现 http://blog.csdn.net/zth1002/art ...
- Codeforces Round #447 (Div. 2) 题解 【ABCDE】
BC都被hack的人生,痛苦. 下面是题解的表演时间: A. QAQ "QAQ" is a word to denote an expression of crying. Imag ...
- Linux 压缩解压缩
先直接给出各种解压缩命令 .tar 压缩:tar cvf FileName.tar FileName 解压:tar xvf FileName.tar ------------------------- ...
- JS的document.images函数使用示例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...