Vue基础第二天

一、复习js常用方法

1.find()：遍历数组，找出数组中符合条件的第一个元素

2.findIndex()：遍历数组，找出数组中符合条件的第一个元素的索引

3.includes（）：判断字符串是否包含指定的子字符串，返回布尔类类型

4.padStart()：如果字符串不满足n位，在前补str

5.some()：判断条件是否满足，如果有一个满足就返回true,都不满足返回false

6.every()：判断条件是否满足，如果都满足就返回true,只要有一个不满足返回false

7.filter()：过滤数组中的元素，返回数组

8.indexof()：查询元素的索引，从前往后查找，获取到第一个元素的索引，如果没有返回-1

二、Vue过滤

使用语法：

1. {{变量 | 过滤器名}}
2. {{变量 | 过滤器 | 另一个过滤器}} 可以同时使用多个过滤器，后面过滤器的data就是前面表达式传过来的值

定义语法：全局定义   Vue.filter()

参数：过滤器的名字和过滤器执行函数

      // 参数1 名字  参数2 函数（数据、格式（传递参数））
      Vue.filter("getStar", function (data, format) {
        console.log(data);
        console.log(format);
        return data.replace("坏人", "**");
      });

私有定义

filters这个是实例化Vue的一个参数，和data,methods平级的，里面放的就是我们这个实例的私有过滤器。

 const vm2 = new Vue({
        el: "#app",
        data: {
        },
        methods: {},
        // 私有过滤器
        filters:{
          addn(data,format){
            return format
          },
        }
      });

三、键盘修饰符

1. 监听所有按键：v-on:keyup
2. 监听指定按键：v-on:keyup.按键码
3. 使用按键别名

• .enter
• .tab
• .delete (捕获“删除”和“退格”键)
• .esc
• .space
• .up
• .down
• .left
• .right

自定义按键别名：Vue.config.keyCodes.f1 = 112

四、自定义指令

全局定义：使用这个方法进行全局定义       Vue.directive()

参数：

1. 指令的名字（定义的时候不加v-,使用vue指令的时候加上v-）

2. 对象，里面包含三个钩子方法

1. bind 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
2. inserted 这个元素已经渲染到界面上之后执行
3. update 当元素有更新的时候执行

3. 这三个方法的参数有哪些

1. el：指令所绑定的元素，可以用来直接操作 DOM 。
2. binding：一个对象，包含以下属性：
3. name：指令名，不包括 v- 前缀。
4. value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
5. oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated钩子中可用。无论值是否改变都可用。

私有定义

1. 实例里有个directives属性，这个属性是个对象
2. 里面放的就是我们指令，这个对象键就是指令的名字，后面的对象就是指令的内容，和全局定义是一样的
3. 简写直接写一个函数，函数名就是指令的名字，其他和全局定义是一样的。