vue自定義指令和自定義過濾器

阿新 • • 發佈：2021-01-08

技術標籤：vue

自定義指令

自定義指令有兩種定義形式：
1 . 全域性自定義指令
2 . 區域性自定義指令

鉤子函式

自定義指令定義提供了以下幾個鉤子函式

bind( ){ }：只調用一次，指令第一次繫結到元素時呼叫，用這個鉤子函式可以定義一個在繫結時執行一次的初始化動作
inserted( ){ }：被繫結元素插入父節點時呼叫（父節點存在即可呼叫，不必存在於
document 中）
update( ){ }：被繫結元素所在的模板更新時呼叫，而不論繫結值是否變化
componentUpdated( ){ }：被繫結元素所在模板完成一次更新週期時呼叫
unbind( ){ }：只調用一次，指令與元素解綁時呼叫

引數

鉤子函式中有兩個引數:

el : 指令所繫結的元素，可以用來直接操作 DOM
binding : 一個物件，包含以下屬性:
name: 指令名，不包括 v- 字首
value: 指令的繫結值
oldValue: 指令繫結的前一個值(update 和 componentUpdated 鉤子中可用。無論值是否改變都可用)
expression: 繫結值的字串形式
arg: 傳給指令的引數

使用場景: 當我們需要對普通的DOM元素進行底層操作時就可以用到自定義指令

全域性自定義指令

//在main.js中用 vue.directive()
// 全域性自定義指令
Vue.directive(
  'upper-text' 
,{bind: (el, binding)=> {
      console.log(el, binding)
      el.innerHTML = binding.value.toUpperCase() //轉換大寫
    }
  })

區域性自定義指令

//在元件中用 directives：{}
<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 將數字轉換為浮點型,否則會保錯
      //2代表小數點後的長度
      return parseFloat(e).toFixed(2)
    },
    num2(e) {
      //時間補零
      return e.padStart(2, '0')
    }
  },
}
</script>