vue自定义指令

<template>
  <div class="home">
    <button @click="n++">n++</button>
    <div v-bignumber="n" style="width:100px;height:200px;border:1px solid #000;float: left;"></div>
    <input type="text" v-fbind:value="n">
     
  </div>
</template>

<script>
export default {
  name: 'HomeView',
  components: {},
  data() {
    return {
      n:1
    }
  },
  directives: {
//函数形式
    bignumber(element,binding){
      element.innerHTML = binding.value * 10
    },
//对象形式
    fbind:{//简写形式会触发bind和update，不会触发inserted
      //指令与元素绑定时触发
      bind(element,binding){
        element.value = binding.value
      },
      //指令所在元素被插入页面时触发
      inserted(element,binding){
        element.focus()
      },
      //指令所在的模板被重新解析时
      update(element,binding){
        element.focus()
      }
    }
  }
}
</script>

1、自定义指令有两种写法，函数形式（简写）和对象形式（完整形式）。简写形式只在两个时机触发：1、指令与元素成功绑定时（元素没有被插入页面），2、指令所在的模板被重新解析时；
2、指令名称不可以使用camelCase命名，多个单词的指令名称使用kebab-case（定义时需要加引号）
3、指令的回调函数中this不指向vue
4、自定义指令使用时加v-，定义时不需要加v-；
5、定义全局指令

vue.directive('fbind',{//简写形式会触发bind和update，不会触发inserted
      //指令与元素绑定时触发
      bind(element,binding){
        element.value = binding.value
      },
      //指令所在元素被插入页面时触发
      inserted(element,binding){
        element.focus()
      },
      //指令所在的模板被重新解析时
      update(element,binding){
        element.focus()
      }
    })