- 博客(49)
- 收藏
- 关注
转载 VueJS中学习使用Vuex详解(https://segmentfault.com/a/1190000015782272)
SPA单页面组件的开发中 Vue的vuex和React的Redux 都统称为同一状态管理,个人的理解是全局状态管理更合适;简单的理解就是你在state中定义了一个数据之后,你可以在所在项目中的任何一个组件里进行获取、进行修改,并且你的修改可以得到全局的响应变更。下面咱们一步一步地剖析下vuex的使用:首先要安装、使用 vuex首先在 vue 2.0+ 你的vue-cli项目中安装 vue...
2019-03-25 16:51:00
193
转载 Vue中的缩写,v-bind v-on
v-bind缩写::预期:any (with argument) | Object (without argument)参数:attrOrProp (optional)修饰符: .prop - 被用于绑定 DOM 属性。.camel - (2.1.0+) 将 kebab-case 特性名转换为 camelCase..sync (2.3.0+) 语法糖,会扩展成一个更新父组件绑定值的 v-...
2019-03-25 16:44:00
293
转载 es6~Map数据结构
Map含义和基本用法JavaScript 的对象(Object),本质上是键值对的集合(Hash 结构),但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。const data = {};const element = document.getElementById('myDiv');data[element] = 'metadata';data...
2019-03-07 10:04:00
153
转载 es6~Set函数
Set基本用法ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。Set本身是一个构造函数,用来生成 Set 数据结构。const s = new Set();[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));for (let i of s) { console.l...
2019-03-06 15:08:00
207
转载 Symbol(js的第七种数据类型)
概述ES5 的对象属性名都是字符串,这容易造成属性名的冲突。比如,你使用了一个他人提供的对象,但又想为这个对象添加新的方法(mixin 模式),新方法的名字就有可能与现有方法产生冲突。如果有一种机制,保证每个属性的名字都是独一无二的就好了,这样就从根本上防止属性名的冲突。这就是 ES6 引入Symbol的原因。ES6 引入了一种新的原始数据类型Symbol,表示独一无二的值。它是...
2019-02-25 18:10:00
98
转载 Object.fromEntries()
Object.fromEntries()Object.fromEntries()方法是Object.entries()的逆操作,用于将一个键值对数组转为对象。Object.fromEntries([ ['foo', 'bar'], ['baz', 42]])// { foo: "bar", baz: 42 }该方法的主要目的,是将键值对的数据...
2019-02-25 17:38:00
715
转载 Object.keys(),Object.values(),Object.entries()
Object.keys(),Object.values(),Object.entries()Object.keys()ES5 引入了Object.keys方法,返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键名。var obj = { foo: 'bar', baz: 42 };Object.keys(obj)// ["f...
2019-02-25 17:37:00
106
转载 Object.getOwnPropertyDescriptors()
Object.getOwnPropertyDescriptors()ES5 的Object.getOwnPropertyDescriptor()方法会返回某个对象属性的描述对象(descriptor)。ES2017 引入了Object.getOwnPropertyDescriptors()方法,返回指定对象所有自身属性(非继承属性)的描述对象。const obj = { ...
2019-02-25 17:31:00
192
转载 es6~Object.assign()
Object.assign()基本用法Object.assign方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)。const target = { a: 1 };const source1 = { b: 2 };const source2 = { c: 3 };Object.assign(target, so...
2019-02-25 17:08:00
45
转载 es6~Object.is()
Object.is()ES5 比较两个值是否相等,只有两个运算符:相等运算符(==)和严格相等运算符(===)。它们都有缺点,前者会自动转换数据类型,后者的NaN不等于自身,以及+0等于-0。JavaScript 缺乏一种运算,在所有环境中,只要两个值是一样的,它们就应该相等。ES6 提出“Same-value equality”(同值相等)算法,用来解决这个问题。Object....
2019-02-25 14:53:00
58
转载 es6~扩展运算符后续
对象的扩展运算符扩展运算符(...)。ES2018 将这个运算符引入了对象。解构赋值对象的解构赋值用于从一个对象取值,相当于将目标对象自身的所有可遍历的(enumerable)、但尚未被读取的属性,分配到指定的对象上面。所有的键和它们的值,都会拷贝到新对象上面。let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };x // 1...
2019-02-25 14:45:00
73
转载 es6~super关键字
super 关键字我们知道,this关键字总是指向函数所在的当前对象,ES6 又新增了另一个类似的关键字super,指向当前对象的原型对象。const proto = { foo: 'hello'};const obj = { foo: 'world', find() { return super.foo; }};Ob...
2019-02-25 11:37:00
69
转载 es6~属性的简洁表示法
属性的简洁表示法ES6 允许直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。const foo = 'bar';const baz = {foo};baz // {foo: "bar"}// 等同于const baz = {foo: foo};上面代码表明,ES6 允许在对象之中,直接写变量。这时,属性名为变量名, 属性值为变量...
2019-02-25 09:33:00
218
转载 es6~find();findIndex()
数组实例的 find() 和 findIndex()数组实例的find方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。[1, 4, -5, 10].find((n) => n < 0)// -5上...
2019-02-20 10:27:00
88
转载 es6~copyWithin()
数组实例的 copyWithin()数组实例的copyWithin方法,在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。也就是说,使用这个方法,会修改当前数组。Array.prototype.copyWithin(target, start = 0, end = this.length)它接受三个参数。target(必...
2019-02-20 09:52:00
156
转载 es6~Array.of()
Array.of()Array.of方法用于将一组值,转换为数组。Array.of(3, 11, 8)//[3, 11, 8]Array.of(3)//[3]Array.of(3).length//1这个方法的主要目的,是弥补数组构造函数Array()的不足。因为参数个数的不同,会导致Array()的行为有差异。Array() // []Array...
2019-02-19 17:03:00
102
转载 es6~Array.from()
Array.from()Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)。下面是一个类似数组的对象,Array.from将它转为真正的数组。let arrayLike = { '0': 'a', '1': 'b...
2019-02-19 15:29:00
66
转载 es6~扩展运算符
扩展运算符含义扩展运算符(spread)是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。console.log(...[1, 2, 3])//1 2 3console.log(1, ...[2, 3, 4], 5)//1 2 3 4 5[...document.querySelectorAll('div')...
2019-02-19 11:42:00
141
转载 知识汇总14~js中call,apply,bind方法的使用
bind 是返回对应函数,便于稍后调用;apply 、call 则是立即调用 。apply、call在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向。JavaScript 的一大特点是,函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概...
2019-02-18 17:54:00
91
转载 es6~函数的扩展
函数参数的默认值基本用法ES6 之前,不能直接为函数的参数指定默认值,只能采用变通的方法。function log(x, y) { y = y || 'World'; console.log(x, y);}log('Hello') // Hello Worldlog('Hello', 'China') // Hello Chinalog('...
2019-02-18 17:34:00
56
转载 es6~数值的扩展
二进制和八进制表示法ES6 提供了二进制和八进制数值的新的写法,分别用前缀0b(或0B)和0o(或0O)表示。0b111110111 === 503 // true0o767 === 503 // true从 ES5 开始,在严格模式之中,八进制就不再允许使用前缀0表示,ES6 进一步明确,要使用前缀0o表示。// 非严格模式(function(...
2019-02-18 09:26:00
91
转载 es6~字符串的扩展
ES6 加强了对 Unicode 的支持,并且扩展了字符串对象。字符的 Unicode 表示法JavaScript 允许采用\uxxxx形式表示一个字符,其中xxxx表示字符的 Unicode 码点。"\u0061"// "a"但是,这种表示法只限于码点在\u0000~\uFFFF之间的字符。超出这个范围的字符,必须用两个双字节的形式表示。"\u...
2019-02-15 11:31:00
67
转载 es6~解构赋值
ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构以前,为变量赋值,只能直接指定值。let a = 1;let b = 2;let c = 3;ES6 允许写成下面这样。let [a, b, c] = [1, 2, 3];上面代码表示,可以从数组中提取值,按照对应位置,对变量赋值。本质上,这种写法属于“模...
2019-02-14 16:27:00
765
转载 es6~顶层对象
ES6 声明变量的六种方法ES5 只有两种声明变量的方法:var命令和function命令。ES6 除了添加let和const命令,后面章节还会提到,另外两种声明变量的方法:import命令和class命令。所以,ES6 一共有 6 种声明变量的方法。顶层对象的属性顶层对象,在浏览器环境指的是window对象,在 Node 指的是global对象。ES5 之中,顶层对象的属性...
2019-02-13 18:04:00
156
转载 es6~const
基本用法const声明一个只读的常量。一旦声明,常量的值就不能改变。const PI = 3.1415;PI // 3.1415PI = 3;// TypeError: Assignment to constant variable.上面代码表明改变常量的值会报错。const声明的变量不得改变值,这意味着,const一旦声明变量,就必须立即初...
2019-02-13 17:54:00
86
转载 es6~块级作用域
块级作用域为什么需要块级作用域?ES5 只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景。第一种场景,内层变量可能会覆盖外层变量。var tmp = new Date();function f() { console.log(tmp); if (false) { var tmp = 'hello world'; }...
2019-02-13 16:44:00
57
转载 es6~let的使用
let 命令基本用法ES6 新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。{ let a = 10; var b = 1;}a // ReferenceError: a is not defined.b // 1上面代码在代码块之中,分别用let和var声明了两个变量。然...
2019-02-13 16:40:00
54
转载 ES6~Promise原理及使用三 搞懂jquery中的Promise(摘取自:https://www.cnblogs.com/lvdabao/p/jquery-deferred.html)...
前两篇我们讲了ES6中的Promise以及Promise/A+规范,在Promise的知识体系中,jquery当然是必不可少的一环,所以本篇就来讲讲jquery中的Promise,也就是我们所知道的Deferred对象。事实上,在此之前网上有很多文章在讲jquery Deferred对象了,但是总喜欢把ajax和Deferred混在一起讲,容易把人搞混。when、done、pr...
2019-02-11 17:40:00
122
转载 ES6~Promise的原理及使用二 理解Promise规范(copy自:https://www.cnblogs.com/lvdabao/p/5320705.html?utm_source=tuico...
上一篇我们讲解了ES6中Promise的用法,但是知道了用法还远远不够,作为一名专业的前端工程师,还必须通晓原理。所以,为了补全我们关于Promise的知识树,有必要理解Promise/A+规范,理解了它你才能知道Promise内部是怎么回事,我们ES6中的Promise是如何一路走来的。网上关于Promise/A+的翻译文档很多,所以我就不翻译一次了,本篇的目的在于为文档增加...
2019-02-11 17:37:00
116
转载 ES6~Promise的原理及使用一(copy自: https://www.cnblogs.com/lvdabao/p/jquery-deferred.html)...
去年6月份, ES2015正式发布(也就是ES6,ES6是它的乳名),其中Promise被列为正式规范。作为ES6中最重要的特性之一,我们有必要掌握并理解透彻。本文将由浅到深,讲解Promise的基本概念与使用方法。ES6 Promise 先拉出来遛遛复杂的概念先不讲,我们先简单粗暴地把Promise用一下,有个直观感受。那么第一个问题来了,Promise是什么玩意呢?...
2019-02-11 17:26:00
119
转载 react~setState的运行机制
1. setState基本特点1. setState是同步执行的 setState是同步执行的,但是state并不一定会同步更新2. setState在React生命周期和合成事件中批量覆盖执行 在React的生命周期钩子和合成事件中,多次执行setState,会批量执行具体表现为,多次同步执行的setState,会进行合并,类似于Object.assign,相同...
2019-02-11 15:45:00
410
转载 react ~4.组件table的使用及表格分页处理
antd里面表格数据分为三部分,columns:该对象数组用于设置表头数据,里面的dataIndex是对象数据里面对应的key, data:该对象数组用于设置每行的对应表头columns的数据, pagination:该对象用于设置分页columns: [{ title: '序号', dataIndex: 'in...
2019-01-31 17:54:00
765
转载 react ~3.动态无限层级顶部菜单和左边菜单设计制作
1.在整个项目制作之前,选择了antd作为react的组件库所以在做菜单时,选择了layout布局样式<Layout> <Header> <HeaderMenu headlist={this.state.headlist} user={this.props.userNam...
2019-01-31 16:50:00
877
转载 react ~2.登陆页面验证码的获取传递与刷新
import React from 'react';import { withRouter } from 'react-router-dom';import { Form, Input, Icon, Checkbox, Row, message } from 'antd';import { fetchPost, fetchGet } from '@common/js/...
2019-01-31 15:49:00
722
转载 react ~1.生命周期函数
componentWillMount:function(){}//组件挂载到节点之前执行componentDidMount:function(){}//节点被加载到指点节点之后执行componentWillUnmount:function(){}//组件被删除之前执行,可用于执行释放内存,和停定时器等componentWillUpdate//更新前componentDid...
2019-01-31 15:23:00
44
转载 知识汇总13~jquery模拟用户点击或获取焦点
在实际项目中,经常会遇到当用户打开某个页面时,让某个输入框自动获取 焦点,或者有其他需要提示用户的地方,都会用到。trigger()方法trigger()方法的意思自动触发被选元素的指定事件类型。trigger 可以传参数进去。eg:$('p').click( function (event, a, b) { // 一个普通的点击事件时,a和b是undefin...
2018-08-01 09:16:00
128
转载 知识汇总12~操作数组的方法
1、数组创建:var arr = new Array();var arr = new Array([size]);//创建并指定长度,但是长度是可以随之发生改变的2、数组的头部添加删除:unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。3、数组的尾部添加删除:...
2018-07-31 10:51:00
57
转载 知识汇总11~vue中v-if使用时需要注意的点
v-if和v-else或v-else-if之间不能添加其他元素。 以下是错误事例<span v-if="type==1">错误示范</span><span>哈哈哈</span><p v-else>嘿嘿嘿</p>以下是正确实例&l...
2018-07-31 10:45:00
210
转载 知识汇总10~es6的map与set用法
js默认的对象表达方式是{}可以视为其他语言中的 Map 和 Dictionary 的数据结构;即一组键值对key - value;(键值对)js有个问题:对象表达方式{}中的键 key 必须是字符串,如下代码:var names={1:”a”,2:”b”};console.log(names.1)//Uncaught SyntaxError: missi...
2018-07-31 10:36:00
56
转载 知识汇总09~bootstrap-select在Vue中的封装
在项目中为何选择了bootstrap的bootstrap-select插件,因为相比其他下拉插件,这个插件更成熟,兼容性更好,也容易使用!如何在Vue中封装成组件:在项目中引入相应的bootstrap,与bootstrap-select的js与css1、js:组件封装 Vue.component('vm-select',{ props:['options'...
2018-07-30 17:51:00
410
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人