黑马vue---31-32、vue过滤器实例

黑马vue---31-32、vue过滤器实例

一、总结

一句话总结：

vue内部的东西，无论是过滤器还是组件，都是键值对的方式

1、过滤器的定义语法？

Vue.filter('过滤器的名称', function(){})

2、过滤器中的 function ，第一个参数，已经被规定死了，永远都是 过滤器 管道符前面 传递过来的数据？

Vue.filter('过滤器的名称', function (data) { return data + '123' })

二、vue过滤器实例

1、全局过滤器

     // 全局的过滤器， 进行时间的格式化
     // 所谓的全局过滤器，就是所有的VM实例都共享的
     Vue.filter('dateFormat', function (dateStr, pattern = "") {
       // 根据给定的时间字符串，得到特定的时间
       var dt = new Date(dateStr)

       //   yyyy-mm-dd
       var y = dt.getFullYear()
       var m = dt.getMonth() + 1
       var d = dt.getDate()

       // return y + '-' + m + '-' + d

       if (pattern.toLowerCase() === 'yyyy-mm-dd') {
         return `${y}-${m}-${d}`
       } else {
         var hh = dt.getHours()
         var mm = dt.getMinutes()
         var ss = dt.getSeconds()

         return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
       }
     })

 

2、局部过滤器

     // 如何自定义一个私有的过滤器（局部）
     var vm2 = new Vue({
       el: '#app2',
       data: {
         dt: new Date()
       },
       methods: {},
       filters: { // 定义私有过滤器    过滤器有两个 条件  【过滤器名称 和 处理函数】
         // 过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致了，这时候 优先调用私有过滤器
         dateFormat: function (dateStr, pattern = '') {
           // 根据给定的时间字符串，得到特定的时间
           var dt = new Date(dateStr)

           //   yyyy-mm-dd
           var y = dt.getFullYear()
           var m = (dt.getMonth() + 1).toString().padStart(2, '0')
           var d = dt.getDate().toString().padStart(2, '0')

           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} ~~~~~~~`
           }
         }
       },
       directives: { // 自定义私有指令
         'fontweight': { // 设置字体粗细的
           bind: function (el, binding) {
             el.style.fontWeight = binding.value
           }
         },
         'fontsize': function (el, binding) { // 注意：这个 function 等同于 把 代码写到了 bind 和 update 中去
           el.style.fontSize = parseInt(binding.value) + 'px'
         }
       }
     })

     // 过滤器的定义语法
     // Vue.filter('过滤器的名称', function(){})

     // 过滤器中的 function ，第一个参数，已经被规定死了，永远都是 过滤器 管道符前面 传递过来的数据
     /* Vue.filter('过滤器的名称', function (data) {
       return data + '123'
     }) */