<template>
  <div class="study">
    <h2>当前的n值是：<span v-text="n"></span></h2>
    <h2>放大10倍后的n值是：<span v-big="n"></span></h2>
    <el-button @click="n++">n++</el-button>
  </div>
</template>

<script>
export default {
  name: 'DirectivesStudy',
  data () {
    return {
      n: 1
    }
  },
  directives: {
    // 方式一
    // big (element, binding) {
    //   element.innerHTML = binding.value * 10
    // },
    // 方式二
    big: {
      // 指令与元素成功绑定时
      bind (element, binding) {
        element.innerHTML = binding.value * 10
      },
      // 指令所在元素被插入页面时
      inserted (element, binding) {
        // 对父元素及兄弟元素操作
        // 获取焦点
      },
      // 指令所在模板被重新解析时
      update (element, binding) {
        element.innerHTML = binding.value * 10
      }
    }
  }

}
</script>