分别创建一个全局自定义指令v-word和一个局部自定义v-words，指令功能与v-text指令类似，它可以使绑定的值扩大100倍

创建全局自定义指令v-word：

// main.js
import Vue from 'vue'

Vue.directive('word', {
  bind: function (el, binding) {
    el.textContent = binding.value * 100
  }
})

使用：

<template>
  <div>
    <span v-word="num"></span>
  </div>
</template>

<script>
export default {
  data () {
    return {
      num: 10
    }
  }
}
</script>

创建局部自定义指令v-words：

<template>
  <div>
    <span v-words="num"></span>
  </div>
</template>

<script>
export default {
  directives: {
    words: {
      bind: function (el, binding) {
        el.textContent = binding.value * 100
      }
    }
  },
  data () {
    return {
      num: 10
    }
  }
}
</script>

注意：局部自定义指令需要在组件中定义directives对象，全局自定义指令无需定义。