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 ...
随机推荐
- php mysql 根据经纬度计算距离和排序
#.两点距离(1.4142135623730951) ,),point(,)); ORDER BY distance; mysql 5.6 添加 #.两点球面距离(.0357231545m) ,),p ...
- shell基础知识4--别名、采集终端信息
别名就是一种便捷方式,可以为用户省去输入一长串命令序列的麻烦.下面我们会看到如何 使用 alias 命令创建别名. 直接使用alias就是显示当前有哪些别名,否则就是创建别名 [root@dns-no ...
- eclipse不提示
1.菜单window->Preferences->Java->Editor->Content Assist->Enable auto activation 选项要打上勾 ...
- (转)Intellij IDEA 2017 debug断点调试技巧与总结详解篇
背景:详细介绍idea的debug调试过程 Intellij IDEA 2017 debug断点调试技巧与总结详解篇
- JVM的基本结构和JVM的内存结构
这里概要介绍一下JVM在启动后,作为操作系统的一个进程的基本结构,以及从操作系统角度看,JVM如何管理它从操作系统里申请来的内存的,也就是JVM的内存结构或者叫JVM内存模型. 1.JVM的基本结构 ...
- SQL Server 数据库启动过程(用户数据库加载过程的疑难杂症)
前言 本篇主要是上一篇文章的补充篇,上一篇我们介绍了SQL Server服务启动过程所遇到的一些问题和解决方法,可点击查看,我们此篇主要介绍的是SQL Server启动过程中关于用户数据库加载的流程, ...
- 【转帖】LSM树 和 TSM存储引擎 简介
LSM树 和 TSM存储引擎 简介 2019-03-08 11:45:23 长烟慢慢 阅读数 461 收藏 更多 分类专栏: 时序数据库 版权声明:本文为博主原创文章,遵循CC 4.0 BY-S ...
- Python学习之路:列表(List)的append()、extend()与insert()方法
相同点 这三种方法的作用都是为列表(List)添加值 它们的语法为: list.append(obj)list.extend(seq)list.insert(index,obj) #此处index为对 ...
- 用python批量添加保护站点
最近在测试的过程中,由于一个bug的复现需要添加1600个保护站点,手工添加谁知到要何年何月,因此想到了用python进行自动化批量添加保护站点! 具体代码如下: #!/usr/bin/env pyt ...
- CSS3弹性盒布局方式
一.CSS3弹性盒子 弹性盒子是CSS3的一种新布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的 ...