vue 自定义 过滤器 和 指令

自定义的 filter 过滤器 和 指令

filter 过滤器

组件内过滤器filters
全局过滤器使用 filter 【每次只能写一个 要写多个可以写到一个js文件里 然后引入main.js】

定义

过滤器把一个值接收处理完毕后返回一个新值,过滤器目的是不破坏原始数据

语法

{{ value | filter1 | filter2 }}
多个过滤器用 | 管道符隔开

• 声明:

  filters:{
    // value必须写  必须有return
    filterName(value){
      return value+100
    }
  }

全局过滤器

  //声明
  import Vue from 'vue'
Vue.filter("filterName",(value)=>{
  return  value / 2 
})

自定义指令

有些情况下，需要获取dom的时候，如果不用ref 就使用自定义指令
例举： 页面打开后让 input 获取焦点

组件内的 使用 directives

directives
语法：

//声明 
directives:{
    focus:{
      // 解除绑定
      unbind(el,binding){}
        // 初始化的时候执行一次
      bind(el,binding){}
      // 优先更新子组件 最后在更新自己
      componentUpdate(el,binding){}
      //优先更新自己
      update(el,binding){ }
      // 元素渲染成功后的声明周期
      inserted(el,binding){
        el.focus()
      }
    }
}
// 使用
 <input v-focus/>

全局的自定义指令

import Vue from 'vue'
Vue.directive("focus",{inserted(el,binding){
  el.focus()
  // 赋值
  el.value=binding.vlaue
}
})

// 使用 
<input v-focus="'content'">