vue自定义指令、自定义过滤器

1. 自定义指令

应用场景

在 Vue2.0 中，代码复用和抽象的主要形式是组件。

然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。

案例： 文本框在初始化时获取焦点

• 注册全局自定义指令

  // 注册一个全局自定义指令 `v-focus`
  Vue.directive('focus', {
    // inserted为钩子函数，当被绑定的元素插入到 DOM 中时执行
    // el为添加该指令的元素
    inserted: function (el) {
      // 聚焦元素
      el.focus()
    }
  })
  

• 注册局部自定义指令

  //在组件选项中添加directives选项
  directives: {
    focus: {
      // 指令的定义
      inserted: function (el) {
        el.focus()
      }
    }
  }
  

• 使用指令

  <input v-focus>
  

• 给指令传值

  <div id="app">
      <p v-color="'red'">添加过指令的元素</p>
  </div>
  
  <script src="./js/vue.js"></script>
  <script>
      var vm = new Vue({
          el: '#app',
          data: {
              posY: 300
          },
          methods: {},
          directives: {
              //指令名称
              color:{
                  inserted(el,binding){
                      //binding.value 指令绑定的值
                      el.style.backgroundColor = binding.value
                  }
              }
          }
      });
  </script>
  

2. 自定义过滤器

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

你可以在一个组件的选项中定义本地的过滤器：

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

或者在创建 Vue 实例之前全局定义过滤器：

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})

当全局过滤器和局部过滤器重名时，会采用局部过滤器。