过滤器，自定义指令

过滤器（本质上是函数）

过滤器分为 全局过滤器  和  私有过滤器

 本人理解：全局过滤器是可以在任何一个组件都可以使用的。而私有过滤器是只能在当前的组件使用的。

<div id="app">
<p>{{message | capi}}</p>
</div>

全局过滤器(注：全局过滤器要写在main.js中)

语法：

//Vue.filter('过滤器的名字',处理函数)
Vue.filter('capi',function(val){
   return
})
//注意，处理函数中的val，永远都是"管道符"前面的那个值
//注意，过滤器中，一定要有返回值

私有过滤器（要写在filters节点中）

语法：

filters:{
//注意：过滤器函数形参中的val，永远都是"管道符"前面的那个值
//强调：过滤器中，一定要有一个返回值
capi(val){
   return
  }

}

过滤器的注意点：

1. 要定义到filters节点下，本质是一个函数
2. 在过滤器函数中，一定要有return值
3. 在过滤器的形参中，就可以获取到"管道符"前面待处理的那个值
4. 如果全局过滤器和私有过滤器名字一致，此时就按照"就近原则"，调用的是"私有过滤器"

 自定义指令

自定义指令分为  全局自定义指令  和    私有自定义指令

全局自定义指令（注：全局自定义指令要写在mian.js中）

语法:

//参数1:字符串，表示全局自定义指令的名字
//参数2:对象，用来接收指令的参数值

Vue.directive("color",function(el,binding){
       el.style.color=binding.value;
})



/* Vue.directive("color", {
  bind (el, binding) {
    el.style.color = binding.value;
  },
  updated (el, binding) {
    el.style.color = binding.value;

  },
}) */

私有自定义指令(注：要写在directives中)

directives: {
    // 定义名为  color 的指令，指向一个配置对象
    /* color: {
      // 当指令第一次被绑定到元素上的时候，会立即触发bind函数
      // 形参中的el 表示当前指令所绑定到的那个  DOM 对象
      // 形参中的binding来接收指令的参数值
      bind(el, binding) {
        console.log("触发了  v-color 的bind 函数");
        // el.style.color = "red";
        console.log(binding);
        // 通过 binding 对象的  .value  属性，获取动态的参数值
        el.style.color = binding.value;
      },

//  bind函数只调用1次：当指令第一次绑定到元素时调用，当DOM更新时bind函数不会被触发。update函数会在每次DOM更新时被调用


      // 在DOM更新的时候，会触发update 函数
      update(el, binding) {
        console.log("触发了  v-color 的 update 函数");
        // el.style.color = "red";
        console.log(binding);
        el.style.color = binding.value;
      },
    }, */


//如果bind和update函数中的逻辑完全相同，则对象格式的自定义指令可以简写成函数格式：
    color(el, binding) {
      el.style.color = binding.value;
    },
  },