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

除了核心功能默认内置的指令(如v-model和v-show等)，Vue也允许自定义指令。有的情况下对普通DOM元素进行底层操作，这时候就会用到自定义指令

如何自定义指令

//1.创建局部指令
var app = new Vue({
    el: '#app',
    data: {    
    },
    // 创建指令(可以多个)
    directives: {
        // 指令名称
        dir1: {
            inserted(el) {
                // 指令中第一个参数是当前使用指令的DOM
                console.log(el);
                console.log(arguments);
                // 对DOM进行操作
                el.style.width = '200px';
                el.style.height = '200px';
                el.style.background = '#000';
            }
        },
        color: { // 为元素设置指定的字体颜色
          bind(el, binding) {
            el.style.color = binding.value;
          }
        }
})

2.全局指令,一般在main.js中定义
   // 为绑定的元素自动获取焦点：
   Vue.directive('focus', {
      inserted: function (el) { // inserted 表示被绑定元素插入父节点时调用
        el.focus();
      }
    });

3.指令的使用
<div id="app">
    <div v-dir1  v-color="'red'"></div>
    <input type="text" v-focus />
</div>

自定义指令分为：全局自定义指令，局部自定义指令。

• 使用Vue.directive('focus',{bind(el,binding){},inserted(){}})进行全局自定义指令
• 参数1：指令的名称
• 参数2：是一个多项，这个对象身上，有钩子函数

钩子函数
一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

unbind：只调用一次，指令与元素解绑时调用。

参数：
钩子函数中有两个参数

• el：指令绑定的元素，可以用来直接操作DOM
• binding：一个对象，包含以下属性：
  name：指令名，不包含v-前缀
  value：指令的绑定值
  oldValue：指令绑定前的一个值
  experssion：绑定值得字符串形式
  arg：传给指令的参数

更多钩子函数
详情查询文档添加链接描述

filter过滤器

• 过滤器就是一个数据经过了这个过滤之后出来另一样东西。
• vue中的过滤器分为两种：局部过滤器和全局过滤器

全局过滤器

// global-filter是过滤器名称
// 函数第一个参数是需要过滤的数据.
// 函数第二个参数是给过滤器传递的值.
 Vue.filter('global-filter',(val,...args)=>{
   console.log(`需要过滤的数据是:${val}`)
   return val + ' 过滤器追加的数据'
 })

var app = new Vue({
    el: '#app',
    data: {
      price:null,
      oldValue: '原始数据'
    })

 <div id='app'>
    <p>{{oldValue | global-filter}}</p>
  </div>

{{ oldValue | global-filter }}把oldVale的值原封不动的传递给golbal-filter在global-filter方法定义里，第一个参数val就是oldVale

局部过滤器(组件过滤器)

• 全局过滤器通过Vue.filter('filtername'fliterFn)来定义，它定义好了之后，在所有的组件内都可以使用
• 局部过滤器，定义在组件内部filters属性上，它只能在此组件内部使用

 var app = new Vue({
    el: '#app',
    data: {
      price:null,
      oldValue: '原始数据'
    },
    methods: {},
    // 定义组件过滤器
    filters: {
      priceFmt(val,location) {
        switch(location) {
          case 'usa':
            return '$' + val
            break
          default:
          return val
        }
      }
    })

• 注意：全局注册时filter,没有s的。而组件过滤器时filters，是有s的，这要注意了，虽然你写的时候没有s不报错，但是过滤器是没有效果 的

使用位置
1.在小胡子语法中

{{ 'ok' | globalFilter }}

2.在v-bind表达式中使用

<div v-bind:data="'ok' | globalFilter" ></div>

3.滤器连用

{{ message | filterA | filterB }}

上述代码中，message是作为参数传给filterA 函数，而filterA 函数的返回值作为参数传给filterB函数，最终结果显示是由filterB返回的。