vue中directive、filter的用法

directive的用法

Vue.directive() 定义全局的指令

Vue.directive() // 有两个参数

• 参数1 : 指令的名称， 注意：在定义的时候不用加 v- 前缀； 但在使用时 必需加 v- 前缀进行调用；

• 参数2 : 是一个对象，这个对象有一些相关的函数，这些函数可以在特定的阶段，执行相关操作；
  注意 :
  1、每当 指令 绑定到元素上的的时候，会立即执行bind 这个函数 只执行一次
  2、在每个 函数中，第一个参数，永远都是 el ,表示 被绑定了指令的那个函数，这个el 参数，是一个原生的JS对象；
  3、如果是添加 获取焦点事件 或 失去 焦点事件时 要注意 要等页面渲染完，在执行指令 否则无效，也不会报错；
  4、如果对dom进行操作就不能放到bind 方法里，反之可以放在 bind 方法里；
  代码：

  Vue.directive('指令名',{
      bind : function(el,binding){
         	el.focus()； 	// 改代码执行没效果；
      },
      inserted : function(el){ 
      	// inserted 表示元素 插入到DOM中的时候，会执行 inserted函数，只执行一次
           el.focus();   // 获取焦点
           el.blur();   // 失去焦点
       },
       updated : function(){  
           // 当VNode(DOM 更新时) 更新的时候,会执行updated 函数，可能会执行多次 }
       });
  

  如下图：这是定义私有组件
  

定义私有指令：

 directives : { 
	指令名 : {钩子函数}
 }

filter的用法

• filter 过滤器，分为全局和局部； 过滤后的值 要 return 返回;
  1、全局： Vue.filter(‘过滤器名字’,function((要过滤的内容, 过滤器的参数){
  过滤器要实现的方法
  })
  )
  
  2、 局部： 在vue根内部， filters : {过滤器的名字 : function(data(内容), 参数 = ‘’){过滤器要实现的方法}}
  如果全局和局部 过滤器 名称一致， 就近原则；