vue 自定义指令函数式，对象式

 <div id="root">
    <!-- <div>hello,{{name}}</div>
    <div>{{age}}</div> -->
    <h1>我是<span v-text="n"></span></h1>
    <h1>我是放大后的<span v-big="n"></span></h1>
    <button @click="n++">点我*2</button>
    <hr>
    <input type="text" v-fbind:value="n">
  </div>

 const VM = new Vue({
    el: "#root",
    data: {
      // name: "shangguigu",
      // age: 23,
      n: 1
    },

    directives: {
      //big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时
      big (element, binding) {
        console.log(element instanceof HTMLElement)
        element.innerText = binding.value * 2
        // element.innerText = binding.value * 10
      },
      fbind: {
        //指令与元素成功绑定时（一上来）
        bind (element, binding) {
          element.value = binding.value
        },
        //指令所在元素被插入页面时
        inserted (element, binding) {
          element.focus()
        },
        //指令所在的模板被重新解析时
        update (element, binding) {
          element.value = binding.value
        }
      }
    },
    methods: {

    },

  })
//重点directives：{}