vue2 手记
vue2 手记
Vue文档:https://cn.vuejs.org/v2/api/#provide-inject
Vue 生命周期:https://cn.vuejs.org/v2/guide/instance.html
vuex状态管理:https://vuex.vuejs.org/zh/
1.简单循环
2.数组包含某值函数.includes()
3.获取路由
4. 获取数据类型
5.数据克隆
1.简单循环
1).
item:定义的每一条的变量
response.data.result:要循环的数组
for(let item of response.data.result) {
//用item操作每一条数据。
}
2).
response.data.result:要循环的数组
index:索引
response.data.result.forEach((item, index) => {
// 用item操作每一条数据。
})
2.数组包含某值函数.includes()
[1, 2, 3].includes(2); // true [1, 2, 3].includes(4); // false [1, 2, 3].includes(3, 3); // false [1, 2, 3].includes(3, -1); // true
详细:https://www.cnblogs.com/rain-in-summer/p/9792165.html
3.获取路由
window.document.location.pathname // 亲测
this.$route.query
router.split('?')[1]
4. 获取数据类型
1)typeof
typeof data // 获取数据类型(array,object)
或
typeof(a) //旧写法
2)isNaN
使用js自带全局函数isNaN(), isNaN()返回一个Boolean值,如下 :
var c="hello"; //字符串 isNaN(c); //返回一个true; var c=10; //数字 isNaN(c);//返回一个false
如果以上c为一个空串或是一个空格,isNaN将把c当作数字0来处理,所以检查不严谨。
3)正则表达式
function checkNum(input){
var reg=/^[0-9]+.?[0-9]*$/; //判断字符串是否为数字 ,判断正整数用/^[1-9]+[0-9]*]*$/
var num=document.getElementById(input).value;
if(!reg.test(num)){
alert("请输入数字");
document.getElementById(input).value="";
return false;
}
}
5.数据克隆
1)
objClone=JSON.parse(JSON.stringify(obj))
2)
function deepClone (data) {
let type = typeof data
let obj
if (type === 'array') {
obj = []
} else if (type === 'object') {
obj = {}
} else {
// 不再具有下一层次
return data
}
if (type === 'array') {
for (let i = 0, len = data.length; i < len; i++) {
obj.push(deepClone(data[i]))
}
} else if (type === 'object') {
for (const key in data) {
if (key == 0) {
obj = []
}
if (!isNaN(key)) {
obj.push(deepClone(data[key]))
} else {
obj[key] = deepClone(data[key])
}
}
}
return obj
}
JS使用Cookie:https://www.cnblogs.com/cxscode/p/11177580.html
Vue2技术栈归纳与精粹:https://blog.csdn.net/sinat_17775997/article/details/78913968
vue2 手记的更多相关文章
- vue2 design 手记
Ant Design of Vue github地址:https://github.com/vueComponent/ant-design-vue Ant Design of Vue文档:https: ...
- vue2.0实践的一些细节
最近用vue2.0做了个活动.做完了回头发现,好像并没有太多的技术难点,而自己好像又做了比较久...只能说效率有待提升啊...简单总结了一些比较细节的点. 1.对于一些已知肯定会有数据的模块,先用一个 ...
- 用FSM一键制作逐帧动画雪碧图 Vue2 + webpack
因为工作需要要将五六十张逐帧图拼成雪碧图,网上想找到一件制作工具半天没有找到,就自己用canvas写了一个. 写成之后就再没有什么机会使用了,因此希望有人使用的时候如果遇到bug了能及时反馈给我. 最 ...
- vue2.0构建淘票票webapp
项目描述 之前一直用vue1.x写项目,最近为了过渡到vue2.0,特易用vue2.0栈仿写了淘票票页面,而且加入了express作为后台服务. 前端技术栈:vue2.0 + vue-router + ...
- Linux.NET实战手记—自己动手改泥鳅(上)
各位读者大家好,不知各位读者有否阅读在下的前一个系列<Linux.NET 学习手记>,在前一个系列中,我们从Linux中Mono的编译安装开始,到Jexus服务器的介绍,以及如何在Linu ...
- Linux.NET学习手记(7)
前一篇中,我们简单的讲述了下如何在Linux.NET中部署第一个ASP.NET MVC 5.0的程序.而目前微软已经提出OWIN并致力于发展VNext,接下来系列中,我们将会向OWIN方向转战. 早在 ...
- Linux.NET学习手记(8)
上一回合中,我们讲解了Linux.NET面对OWIN需要做出的准备,以及介绍了如何将两个支持OWIN协议的框架:SignalR以及NancyFX以OwinHost的方式部署到Linux.NET当中.这 ...
- 关于《Linux.NET学习手记(8)》的补充说明
早前的一两天<Linux.NET学习手记(8)>发布了,这一篇主要是讲述OWIN框架与OwinHost之间如何根据OWIN协议进行通信构成一套完整的系统.文中我们还直接学习如何直接操作OW ...
- U3D DrawCall优化手记
在最近,使用U3D开发的游戏核心部分功能即将完成,中间由于各种历史原因,导致项目存在比较大的问题,这些问题在最后,恐怕只能通过一次彻底的重构来解决 现在的游戏跑起来会有接近130-170个左右的Dra ...
随机推荐
- MongoDB开发深入之三:复制
复制是基于操作日志oplog,相当于MySQL中的二进制日志,只记录发生改变的记录,复制是将主节点的oplog日志同步并应用到其他从节点的过程. 首先要理解两个概念:1.复制:提供冗余和高可用性:2. ...
- unittest===unittest 的几种执行方式
#demo.py import requests import json class RunMain: def __init__(self, url, method, data=None): self ...
- Maya编程——节点&命令
代码写完出现问题: 查了一下原因:
- bootCDN引用的bootstrap前端框架套件和示例
这是bootCDN上引用的bootstrap前端框架套件,由多个框架组合而成,方便平时学习和测试使用.生产环境要仔细琢磨一下,不要用开发版,而要用生产版.bootCDN的地址是:https://www ...
- EF Core使用遇到的问题
目录 EF Core速度问题 问题描述 EF使用方法1,每一行存储一次(400条/s) EF使用方法2,链接不释放 (40条/s) EF使用方法3,多次add,一次SaveChanges(400条/s ...
- 解决在MAC上输入法切换慢的问题
Mac Book Pro升级到Catalina 10.15.1 之后,不论是系统自带的中文输入法,还是安转的第三方中文输入法,当使用快捷键"Ctrl + Space"进行中英文输入 ...
- Invoke 和 BeginInvoke 的真正涵义
BeginInvoke 方法真的是新开一个线程进行异步调用吗? 参考以下代码: public delegate void treeinvoke(); private void UpdateTreeVi ...
- Oracle Spatial分区应用研究之六:全局空间索引下按县分区与按省分区效率差异原因分析
1.实验结论 全局空间索引下,不同分区粒度之所有效率会有不同,差异并不在于SDO_FILTER操作本身,而在于对于数据字典表的访问次数上: 分区越多.表上的lob column越多,对数据字典表的访问 ...
- log4j重复打印的解决方法
log4j的logger(旧版本称logger)是层次结构的,子logger会继承父logger的属性,appender也是可继承的属性,这常常 容易导致配置错误而引起的log4j输出重复的log信息 ...
- 设计模式 AOP,OOP
AOP.OOP在字面上虽然非常类似,但却是面向不同领域的两种设计思想. 简单说,AOP面向动词领域,OOP面向名词领域 AOP: (Aspect Oriented Programming) 面向切面编 ...