声明:本文章并非原创，而是参考黑马程序员Vue.js教程配套资料，仅供学习使用，侵删。
数组操作
注: 数组操作具体内容转载自 博客，为的是方便自己查看，特此说明
.filter()
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
- 是否改变原数组：否
- 是否对空数组进行检测：否
const arr= [32, 33, 16, 40];
const arr1 = arr.filter(item => item >= 18)
console.log(arr) // [32, 33, 16, 40]
console.log(arr1) // [32, 33, 40]
.map()
map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值,map() 方法按照原始数组元素顺序依次处理元素。
- 是否改变原数组：否
- 是否对空数组进行检测：否
const arr= [4, 9, 16, 25];
const arr1 = arr.map(item => item+2)
console.log(arr) // [4, 9, 16, 25]
console.log(arr1) // [6, 11, 18, 27]
.forEach()
forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。
- 是否改变原数组：否
- 是否对空数组进行检测：是
注意:
1.forEach() 对于空数组是不会执行回调函数的。
2.forEach()中不支持使用break(报错)和return(不能结束循环)，有需要时可使用常规的for循环。
const arr= [4, 9, 16, 25];
const arr1 = [];
arr.forEach(item => arr1.push(item))
console.log(arr) // [4, 9, 16, 25]
console.log(arr1) // [4, 9, 16, 25]
.find()
find() 方法返回通过测试（函数内判断）的数组的第一个元素的值,find() 方法为数组中的每个元素都调用一次函数执行：
- 是否改变原数组：否
- 是否对空数组进行检测：是
注意:
- 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数
- 如果没有符合条件的元素返回 undefined
const arr= [4, 9, 16, 25];
const b = arr.find(item => item>10)
const c = arr.find(item => item<1)
console.log(arr) // [4, 9, 16, 25]
console.log(b) // 16
console.log(c) // undefined
.findIndex()
findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置,findIndex() 方法为数组中的每个元素都调用一次函数执行：
- 是否改变原数组：否
- 是否对空数组进行检测：是
注意:
- 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。
- 如果没有符合条件的元素返回 -1
onst arr= [4, 9, 16, 25];
const b = arr.findIndex(item => item>10)
const c = arr.findIndex(item => item<1)
console.log(arr) // [4, 9, 16, 25]
console.log(b) // 2
console.log(c) // -1
.some()
some() 方法用于检测数组中的元素是否满足指定条件（函数提供）,some() 方法会依次执行数组的每个元素
- 是否改变原数组：否
- 是否对空数组进行检测：否
注意:
- 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
- 如果没有满足条件的元素，则返回false。
const arr= [4, 9, 16, 25];
const b = arr.some(item => item>10)
const c = arr.some(item => item<1)
console.log(arr) // [4, 9, 16, 25]
console.log(b) // true
console.log(c) // false
.every()
every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）,every() 方法使用指定函数检测数组中的所有元素
- 是否改变原数组：否
- 是否对空数组进行检测：否
注意:
- 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
- 如果所有元素都满足条件，则返回 true
const arr= [4, 9, 16, 25];
const b = arr.every(item => item>10)
const c = arr.every(item => item>1)
console.log(arr) // [4, 9, 16, 25]
console.log(b) // false
console.log(c) // true
过滤器
概念：Vue.js 允许自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符
|指示；
注意：当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！
私有过滤器
- HTML元素：
<td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td>
- 私有
filters定义方式：
filters: { // 私有局部过滤器，只能在 当前 VM 对象所控制的 View 区域进行使用
dataFormat(input, pattern = "") { // 在参数列表中 通过 pattern="" 来指定形参默认值，防止报错
var dt = new Date(input);
// 获取年月日
var y = dt.getFullYear();
var m = (dt.getMonth() + 1).toString().padStart(2, '0');
var d = dt.getDate().toString().padStart(2, '0');
// 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日
// 否则，就返回 年-月-日 时：分：秒
if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-${d}`;
} else {
// 获取时分秒
var hh = dt.getHours().toString().padStart(2, '0');
var mm = dt.getMinutes().toString().padStart(2, '0');
var ss = dt.getSeconds().toString().padStart(2, '0');
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
}
}
}
String.prototype.padStart(maxLength, fillString)
使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString='') 或 String.prototype.padEnd(maxLength, fillString='')来填充字符串；
全局过滤器
// 定义一个全局过滤器
Vue.filter('dataFormat', function (input, pattern = '') {
//函数体同上
});
键盘修饰符以及自定义键盘修饰符
参考链接:js 里面的键盘事件对应的键码
- 通过
Vue.config.keyCodes.名称 = 按键值来自定义案件修饰符的别名：
Vue.config.keyCodes.f2 = 113;
- 使用自定义的按键修饰符：
<input type="text" v-model="name" @keyup.f2="add">
自定义指令
全局自定义指令
使用 Vue.directive(参数1,参数2) 定义全局的指令
参数列表:
- 参数1 ： 指令的名称。注意，在定义的时候，指令的名称前面，不需要加 v- 前缀,
但是： 在调用的时候，必须 在指令名称前 加上 v- 前缀来进行调用 - 参数2： 是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作
执行周期:
-
bind: function (el) {}
每当指令绑定到元素上的时候，会立即执行这个 bind 函数，只执行一次
注意：
- 在每个 函数中，第一个参数，永远是 el ，表示 被绑定了指令的那个元素，这个 el 参数，是一个原生的JS对象
- 在元素 刚绑定了指令的时候，还没有 插入到 DOM中去
-
inserted: function (el) {}
inserted 表示元素 插入到DOM中的时候，会执行 inserted 函数触发1次
updated: function (el){}
当VNode更新的时候，会执行 updated， 可能会触发多次
简写格式:
自定义指令的简写形式，等同于定义了 bind 和 update 两个钩子函数
'font-weight': function (el, binding2) {
el.style.fontWeight = binding2.value;
}
提醒:
- 和JS行为有关的操作，最好在 inserted 中去执行，放置 JS行为不生效
- 和样式相关的操作，一般都可以在 bind 执行
局部自定义指令
具体指令定义与上面没有任何区别，唯一区别就是自定义指令定义在
directives:中
自定义指令的使用方式
<input type="text" v-model="searchName" v-focus v-color="'red'" v-font-weight="900">
vue实例的生命周期
生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！
生命周期钩子：就是生命周期事件的别名而已；
注: 生命周期钩子 = 生命周期函数 = 生命周期事件
- 主要的生命周期函数分类：
-
创建期间：
- beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性
- created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板
- beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
- mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示
-
运行期间：
- beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点
- updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！
-
销毁期间：
- beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
- destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
-
创建期间：
vue-resource
除了 vue-resource 之外，还可以使用 axios 的第三方包实现实现数据的请求
注意:
-
处理跨域问题:
在全局php代码中加入如下代码:
<?php header("Access-Control-Allow-Origin: *"); ?>
- 发送get请求：
getInfo() { // get 方式获取数据
this.$http.get('url').then(res => {
console.log(res.body);
})
}
- 发送post请求：
postInfo() {
// post 方法接收三个参数：
// 参数1： 要请求的URL地址
// 参数2： 要发送的数据对象
// 参数3： 指定post提交的编码类型为 application/x-www-form-urlencoded
this.$http.post('url', { name: 'zs' }, { emulateJSON: true }).then(res => {
console.log(res.body);
});
}
- 发送JSONP请求获取数据：
jsonpInfo() { // JSONP形式从服务器获取数据
this.$http.jsonp('url').then(res => {
console.log(res.body);
});
}
