Vue.js学习笔记(二)

声明:本文章并非原创，而是参考黑马程序员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() 方法为数组中的每个元素都调用一次函数执行：

• 是否改变原数组：否
• 是否对空数组进行检测：是

注意:

1. 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数
2. 如果没有符合条件的元素返回 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() 方法为数组中的每个元素都调用一次函数执行：

• 是否改变原数组：否
• 是否对空数组进行检测：是

注意:

1. 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。
2. 如果没有符合条件的元素返回 -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() 方法会依次执行数组的每个元素

• 是否改变原数组：否
• 是否对空数组进行检测：否

注意:

1. 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
2. 如果没有满足条件的元素，则返回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() 方法使用指定函数检测数组中的所有元素

• 是否改变原数组：否
• 是否对空数组进行检测：否

注意:

1. 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
2. 如果所有元素都满足条件，则返回 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 表达式的尾部，由“管道”符|指示；

注意：当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！

私有过滤器

1. HTML元素：

<td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td>

2. 私有 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 里面的键盘事件对应的键码

1. 通过Vue.config.keyCodes.名称 = 按键值来自定义案件修饰符的别名：

Vue.config.keyCodes.f2 = 113;

2. 使用自定义的按键修饰符：

<input type="text" v-model="name" @keyup.f2="add">

自定义指令

全局自定义指令

使用 Vue.directive(参数1,参数2) 定义全局的指令

参数列表:

• 参数1 ： 指令的名称。注意，在定义的时候，指令的名称前面，不需要加 v- 前缀,
  但是： 在调用的时候，必须 在指令名称前 加上 v- 前缀来进行调用
• 参数2： 是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作

执行周期:

• bind: function (el) {}

  每当指令绑定到元素上的时候，会立即执行这个 bind 函数，只执行一次

  注意：

  1. 在每个 函数中，第一个参数，永远是 el ，表示 被绑定了指令的那个元素，这个 el 参数，是一个原生的JS对象
  2. 在元素 刚绑定了指令的时候，还没有 插入到 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;
}

提醒:

1. 和JS行为有关的操作，最好在 inserted 中去执行，放置 JS行为不生效
2. 和样式相关的操作，一般都可以在 bind 执行

局部自定义指令

具体指令定义与上面没有任何区别，唯一区别就是自定义指令定义在directives:中

自定义指令的使用方式

<input type="text" v-model="searchName" v-focus v-color="'red'" v-font-weight="900">

vue实例的生命周期

生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！

生命周期钩子：就是生命周期事件的别名而已；

注: 生命周期钩子 = 生命周期函数 = 生命周期事件

mark

• 主要的生命周期函数分类：
  • 创建期间：
    • beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性
    • created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板
    • beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
    • mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示
  • 运行期间：
    • beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点
    • updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！
  • 销毁期间：
    • beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
    • destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

vue-resource

使用文档:vue-resource 实现 get, post, jsonp请求

除了 vue-resource 之外，还可以使用 axios 的第三方包实现实现数据的请求

注意:

1. 处理跨域问题:

   在全局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);
  });
}