2021-06-22 vue过滤器和修饰符

前言

任务

1. 学习品牌管理的案例
2. 学习vue的过滤器
3. 学习按键修饰符
4. 自定义vue的指令

一、品牌管理案例

步骤：
<!-- 1.书写静态页面 页面可以使用BS，先引入
2，分析数据，哪些需要定义在data里面
3，绑定相应事件，完成操作

二、过滤器

    1 //日期格式化
     dateFormat(fmt) {
          // fmt ="YYYY-MM-DD hh:mm:ss"
          let date = new Date();
          let Y = date.getFullYear();
          let M =
            date.getMonth() + 1 > 10
              ? date.getMonth() + 1
              : "0" + (date.getMonth() + 1);
          //             padStart(2,0)
          // 这个是字符串提供的方法，所以我们先要保证调用的地方是个字符串
          // 这个方法里两个参数 -
          // 显示的位数
          // 位数不足时在前面补充的内容
          let D = date.getDate().toString().padStart(2, 0);
          let h = date.getHours().toString().padStart(2, 0);
          // let m = date.getMinutes().toString().padEnd(2, 0);
          let m = date.getMinutes().toString().padStart(2, 0);
          let s = date.getSeconds().toString().padStart(2, 0);
          // return `${Y}/${M}/${D} ${h}:${m}:${s}`;
          // "2021-06-22 hh:mm:ss"
          return fmt
            .replace("YYYY", Y)
            .replace("MM", M)
            .replace("DD", D)
            .replace("hh", h)
            .replace("mm", m)
            .replace("ss", s);
        },

三、补0

padStart()
      这个是字符串提供的方法，所以我们先要保证调用的地方是个字符串
        这个方法里两个参数 - 
               显示的位数
               位数不足时在前面补充的内容
padEnd()
        和上面用法一样，这个是在后面补一个值

四、过滤器

  过滤器可以用在两个地方：双花括号插值和 v-bind 表达式
  使用语法
      {{变量 | 过滤器名}}
      {{变量 | 过滤器 | 另一个过滤器}} 可以同时使用多个过滤器，后面过滤器的data就是前面表达式传过来的值
      
 (1)全局定义：
 通过Vue提供的filter方法定义：Vue.filter()
 参数：过滤器的名字或过滤器执行函数
 例如：
  Vue.filter("addN", function (data, format) {                                      
      console.log(data);        // data 是被过滤数据
      console.log(format);        // format是过滤器被调用时传递参数
      return data + format;        // 最终显示内容
});
 const vm = new Vue({
  el: "#app",
  data: {
    num1: 5,
    date1: new Date(),
  },
});
 (2) 私有定义
 filters这个是实例化Vue的一个参数，和data,methods平级的，里面放的就是我们这个实例的私有过滤器。
     new Vue({
        el: '#app',
        filters: {
         dateFormat(data, format) {
          ...
         }
      }
  });

五、键盘修饰符

5.1 注册一个监听事件
监听所有按键：v-on:keyup
监听指定按键：v-on:keyup.按键码
5.2：按键别名
.enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right
5.3 自定义按键
Vue.config.keyCodes.f1 = 112

六、自定义指令

6.1 全局定义 Vue.directive()
参数：
1. 指令的名字（定义的时候不加v-,使用vue指令的时候加上v-）
2. 对象，里面包含三个钩子方法：

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

这三个方法的参数有哪些
el：指令所绑定的元素，可以用来直接操作 DOM 。
binding：一个对象，包含以下属性：
1、name：指令名，不包括 v- 前缀。
2、value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
3、 oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated钩子中可用。

6.2 私有定义

var vm = new Vue({
    el: '#app',
    directives: {
        color(el, bind) {
            el.style.color = 'blue';
        },
        focus: {
            inserted(el) {
                el.focus();
            },
            bind(el) {

            },
            updated() {
            }
        }
    }
})