Vue过滤器和修饰符

过滤器

用在mustache插值和v-bind表达式中

<!-- 视图层 -->
<div id="app">
    <p>原数据：{{msg}}</p>
    <p>过滤后：{{msg | fMsg(77)}}</p>
  </div>

全局过滤器

通过Vue提供的filter方法定义：Vue.filter()

1. 第一个参数：过滤器的名字
2. 第二个参数：回调函数
   回调函数中有两个参数:data（需要过滤的数据）和formate（传递的参数）

//全局过滤器
  /* Vue.filter('fMsg',function(data,formate){
    console.log(data);
    console.log(formate);
    return data.replace('铁蛋','**')
  }) */

私有过滤器

filters，与vue中data和methods平级

let vm = new Vue({
    el: '#app',
    data: {
      msg: '臭铁蛋'
    },
    methods: {

    },
    //私有过滤器
    filters: {
      fMsg(data, formate) {
        console.log(data);
        console.log(formate);
        return data.replace('铁蛋', '**')
      }
    }
  })

页面效果：

键盘修饰符

1. vue提供的按键别名
   enter
   delete
   tab
   space
   left
   right
   up
   down

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

自定义指令

全局定义

通过Vue.directive()方法

1. 第一个参数：指令的名字，使用时加上v-
2. 第二个参数：对象（三个函数）

• 第一个函数bind（只调用一次，指令第一次绑定到元素时调用，可进行一次性的初始化设置）：

bind(el, binding) {
      // console.log(el);
      // console.log(binding);
      el.style.color = 'orange'
      el.style.fontSize = binding.value
    }

• 第二个函数inserted（当元素插入到DOM树时会调用此方法，执行时界面上元素已显示）：

inserted(el, binding) {
      el.focus()
    }

• 第三个函数update（当组件进行更新时会调用）：

update(el){
      // console.log(el);
      console.log(el.value);
    }

私有定义

directives，与vue中的data和methods平级，且是个对象

directives: {
      size: {
        bind(el, binding) {
          // console.log(el);
          // console.log(binding);
          el.style.color = 'orange'
          el.style.fontSize = binding.value
        },
        inserted(el, binding) {
          el.focus()
        },
        update(el) {
          // console.log(el);
          console.log(el.value);
        }
      }
    }

BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务