Custom instruction hook execution order

Click codepen to see the order in which the instruction hook functions are executed

    created() {
      console.log('created')},mounted() {
      console.log('mounted')},directives: {focus: {inserted(el){
          console.log('inserted-el',el)
        },
        bind(el) {
          console.log('bind-el',el)
        },
        update(el) {
          console.log('directives-update',el)
        }
      }
    },
    updated() {
      console.log('updated')},Copy the code

Execute the order when we load the page

created
bind-el <input data-v-c2165916 type=​"text">​
inserted-el <input data-v-c2165916 type=​"text">​
mounted
Copy the code

When we update the value of the input field

directives-update <input data-v-c2165916 type=​"text">​
updated
Copy the code

Hook function arguments

Parameters that can be obtained after binding

<input type="text" v-focus v-model="value" />
Copy the code
    directives:{
      focus: {inserted(el,binding){
          console.log('inserted-el',el,binding)
        }
      }
    }
Copy the code

How do I pass parameters to a custom directive

Pass arg

Format: V-focus :arg. Arguments passed by arg are treated as strings and received via binding.arg

<input type="text" v-focus:type1 v-model="value" />
<input type="text" v-focus:{age:1} v-model="value" />
Copy the code
    directives:{
      focus: {inserted(el,binding){
          console.log('inserted-el',binding)
        }
      }
    }
Copy the code

Transfer the value

Format: V-focus =”value”, where value is a variable name, not a string.

<input type="text" v-focus="format1" v-model="value" />
Copy the code
    data() {
      return {
        value:' '.format1:'date'}},Copy the code

As you can see, by binding the value, the directive receives an extra value attribute, which is the value of the variable we passed in. There’s also expression,expression: an instruction expression in the form of a string. For example, if v-my-directive=”1 + 1″, the expression is “1 + 1”.

The modifier

Format: v-focus. IsFocus, modifier object: {isFocus:true}

<input type="text" v-focus.isFocus v-model="value" />
Copy the code
    data() {
      return {
        value:' '}},Copy the code

Practice: number formatting instructions

/** * Format the input value according to the type of the V-Numeral binding and pass it through the function that executes the binding. * Format 1: Digit-number For example v-numeral:digit-2="handle" save 2 decimal digits * will '12312.123' -> '12312.12' Amount v-numeral:amount-3="handle" * will set '1123123.123' -> '1,123,123.123' * 
       * If only integers need to be reserved:  
       */
Vue.directive('numeral', {
  bind: function(el, binding) {
    // Find the input element under the binding element
    const input = el.hasChildNodes() ? el.getElementsByTagName('input') [0] : el
    const { value: fn, arg } = binding
    if (typeoffn ! = ='function') {
      return console.error(
        'The value of directive "v-numeral" must be a function! '
      )
    }
    el.addEventListener('change'.function(e) {
      let value = e.target.value

      let float = parseFloat(value)
      if (isNaN(float)) {
        fn(' ')
        return
      }
      numeralHandlers.adapt(arg, float, fn)
    })
  }
})
Copy the code

The command has the following functions

  • You can set the number of decimals to remain
  • You can set the format: integer, amount each three comma. And using adaptive patterns, it is also very convenient to add other patterns later without affecting the previous code logic

Click on the Codepen address to see the complete code for the number formatting instruction