Vue自定义指令、自定义过滤器

Vue 自定义指令如何使用

• 自定义指令分为全局自定义指令和局部自定义指令:
• 全局自定义指令:
  使用 Vue.directive()来全局注册指令
• 局部自定义指令:
  也可以注册局部指令,组件或 Vue 构造函数中接受一个 directives 的选项

钩子函数

自定义指令定义函数提供了几个钩子函数

• bind
  只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作
• inserted
  被绑定元素插入父节点时调用（ 父节点存在即可调用， 不必存在于
  document 中）
• update
  所在组件的 VNode 更新时调用，但是可能发生在其孩子的 VNode 更新之前。指令的值可能发生了改变也可能没有。但是可以通过比较更新前后的值来忽略不必要的模板更新
• componentUpdated
  所在组件的 VNode 及其孩子的 VNode 全部更新时调用
• unbind
  只调用一次，指令与元素解绑时调用

参数

钩子函数中有两个参数:

1. el : 指令所绑定的元素，可以用来直接操作 DOM
2. binding : 一个对象，包含以下属性:
   name: 指令名，不包括 v- 前缀
   value: 指令的绑定值
   oldValue: 指令绑定的前一个值(update 和 componentUpdated 钩子中可用。无论值是否改变都可用)
   expression: 绑定值的字符串形式
   arg: 传给指令的参数

使用场景: 当我们需要对普通的DOM元素进行底层操作时就可以用到自定义指令

全局自定义指令

//main.js中
// 全局自定义指令
Vue.directive(
  'upper-text',{bind: (el, binding)=> {
    	console.log(el, binding)
    	el.innerHTML = binding.value.toUpperCase() //转换大写
  	}
  })
  

局部自定义指令

//组件中
<template>
  <div class="wrapper">
    <br />
    <span>原数据</span>
    <p>{{message}}</p>
    <br />
    <span>全局</span>
    <p v-upper-text="message" v-color="'blue'"></p>
    <br />
    <span>局部</span>
    <p v-lower-text="message"></p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'You can start the Internet!'
    }
  },
  computed: {},
  //局部自定义指令
  directives: {
    'lower-text'(el, binding) {
      //el:指令属性所在的标签对象
      //binding:包含指令相关信息数据的对象
      console.log(el, binding)
      el.textContent = binding.value.toLowerCase() //转换小写
    },
    color:{//改变颜色
        bind(el,binding){
            el.style.color = binding.value
        }
    }
  },
}
</script>

效果:

自定义过滤器

过滤器是实现变量的格式化输出 。过滤器分为局部过滤器还有全局过滤器
全局过滤器 是在多个实例中可以使用的过滤器
语法：

Vue.filter(“名”，function(value,value2){
	// value是调用过滤器的属性的值
	//value2是要传入的值
})

调用：
{{ 属性 | 过滤器名}}

局部过滤器 只是在当前的组件或者实例中使用

filters:{
	名：function(val){
	}
}

注意：过滤器可以串联 但是后面的肯定是以前面的为基础
变量 | 过滤器1 | 过滤器2

补零案例

//全局
Vue.filter('time', (ee) => {
  return ee.padStart(2, '0')
})

//局部
<template>
  <div class="wrapper">
    <br />
    <input type="text" v-model="value" />
    <br />
    <p>{{value | num2}}</p>
    <br />
    <p>{{value | num}}</p>
    <p>{{value | time}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: ''
    }
  },
  filters: {
    num(e) {
      //价钱补零
      //parseFloat 将数字转换为浮点型,否则会保错
      return parseFloat(e).toFixed(2)
    },
    num2(e) {
      //时间补零
      return e.padStart(2, '0')
    }
  },
}
</script>