自定义指令，计算属性，过滤器

一.自定义指令（directive)

directive方法接收两个参数，第一个参数：指令的名称，第二个参数：对象。注意点：1.在自定义指令的时候，在指定指令名称的时候，不需要写v-。2.指令可以在不同的生命周期阶段执行。bind:指令被绑定到元素上的时候执行。inserted：绑定指令的元素被添加到父元素上的时候执行。

//定义一个全局指令（在Vue实例对象外定义）
  Vue.directive("color",{
   //这里的el就是被指定的绑定的元素
  bind:function(el,obj) {
    el.style.color=obj.value;
  }
})

//定义一个局部指令（在Vue实例对象的data对象中定义）
  directive:{
   "color":{
   //这里的el就是被指定的绑定的元素
     bind:function(el,obj) {
      el.style.color=obj.value;
  }
 }
}

二.计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。所以，对于任何复杂逻辑，你都应当使用计算属性。

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

计算属性与函数的区别： 计算属性的特点：只要返回的结果没有发生变化，那么计算属性就只会被执行一次。 函数的特点：每次调用都会被执行。
计算属性的应用场景：由于计算属性会将返回的结果缓存起来，所以如果返回的结果不经常发生变化，那么使用计算属性就会比使用函数性能高。

三.过滤器（filters）

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

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

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

filter方法接收两个参数：1.过滤器名称 2.处理数据的函数
注意点：默认情况下处理数据的函数接收一个参数，就是当前要被处理的数据。

//定义一个全局过滤器
Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})

//定义一个局部过滤器
filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}