Vue常用函数

数组处理

变更方法

push() 添加元素

pop() 删除最后一个元素

shift() 删除第一个元素

unshift() 添加一个元素到数组最前面

splice() 方法用于插入、删除或替换数组的元素

参数 描述
index 必需。规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
howmany 必需。规定应该删除多少元素。必须是数字，但可以是 “0”。如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
item1, …, itemX 可选。要添加到数组的新元素

example1.$data.items.splice(0,1,{message:'splice'});

sort() 排序（升序）

reverse() 排序（降序）

filter() 数组元素过滤

替换数组

变更方法，顾名思义，会变更调用了这些方法的原始数组。相比之下，也有非变更方法，例如: filter()、concat()和slice()`。它们不会变更原始数组，而总是返回一个新数组。当使用非变更方法时，可以用新数组替换旧数组：

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})

你可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是，事实并非如此。Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的启发式方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。

数组合并

// ## obj.concat() 方式
var data = [{
    aaa:0,
    bbb:'测试'
}];
var data1 = [{
    aaa:0,
    bbb:'测试1'
}];
var newdata = data.concat(data1);
console.log(newdata);
/**
 * return newdata:
 [
    {
        aaa:0,
        bbb:'测试'
    }, {
        aaa:0,
        bbb:'测试1'
    }
]
 */

var a=[1,2,3],b=[4,5,6];
var c=a.concat(b);
console.log(c); // 1,2,3,4,5,6


// ## Obj.assign() 方式
// a. 复制一个对象
var obj = { a: 1 ,b:2};
var copyObj = Object.assign({}, obj);
console.log(copyObj); // { a: 1,b:2 }

// b.合并多个对象
var o1 = { a: 1 };
var o2 = { b: 2 };
var o3 = { c: 3 };
var obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1); // { a: 1, b: 2, c: 3 }, 且目标对象自身也会改变

插件

名称 介绍
lodash 中文文档 一致性、模块化、高性能的 JavaScript 实用工具库。（Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。）
D2-Crud D2-Crud是一套基于 Vue.js 2.2.0+ (opens new window)和 Element 2.0.0+ (opens new window)的表格组件，D2-Crud将 Element 的功能进行了封装，并增加了表格的增删改查、数据校验、表格内编辑等常用的功能。大部分功能可根据配置的json实现，大大简化了开发流程。

Lodash 函数分类：

学习文档：

  • Array， 适合于数组类型，比如填充数据、查找元素、数组分片等操作
  • Collocation， 适用于数组和对象类型，部分适用于字符串，比如分组、查找、过滤等操作
  • Function， 适用于函数类型，比如节流、延迟、缓存、设置钩子等操作
  • Lang， 普遍适用于各种类型，常用于执行类型判断和类型转换
  • Math， 使用与数值类型，常用于执行数学运算
  • Number， 适用于生成随机数，比较数值与数值区间的关系
  • Object， 适用于对象类型，常用于对象的创建、扩展、类型转换、检索、集合等操作
  • Seq， 常用于创建链式调用，提高执行性能（惰性计算）
  • String， 适用于字符串类型
  • lodash/fp 模块提供了更接近函数式编程的开发方法，其内部的函数经过包装，具有immutable、auto-curried、iteratee-first、data-last（官方介绍）等特点。
  • Fixed Arity，固化参数个数，便于柯里化
  • Rearragned Arguments， 重新调整参数位置，便于函数之间的聚合
  • Capped Iteratee Argument， 封装Iteratee参数

D2-Crud 功能：

  • 继承了 Element 中表格所有功能
  • 新增表格数据
  • 修改表格数据
  • 删除表格数据
  • 使用 Element 中的组件渲染表格内容和表单内容
  • 表单校验
  • 表格内编辑
  • 渲染自定义组件