vue 自定义指令

函数式

<template>
  <div>
   <span>当前值是</span>
   <span v-text="n"></span>
   
   <span>当前值加10</span>
   <!-- 函数式 -->
   <span v-addFun="n"></span>
   
   <span>当前值加10，并且自动获取焦点</span>
   <!-- 对象式 -->
   <input type="text" v-addObj="n">
   
   <button @click="()=>{
    n++
   }">n++</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      n:1
    };
  },
  directives:{
    // 函数式自定义指令(只能进行简单的操作，无法绑定事件)
    //指令与元素成功绑定时（一开始）
    //指令所在模板被重新解析时
    addFun(element,binding){
      element.innerText = binding.value + 10
    },
    // 对象式自定义指令（可进行复杂操作，可绑定事件）
    addObj:{
      //指令与元素成功绑定时（一开始）
      bind(element,binding){
        element.value = binding.value + 10
      },
      //指令所在元素被插入页面时（函数式因为无法走这一步，所以只能进行简单的操作）
      //绑定事件
      inserted(element,binding){
        element.focus()
      },
      //指令所在模板被重新解析时
      update(element,binding){
        element.value = binding.value + 10
      }
    }
  }
};
</script>