我在app.vue中定義了一個自定義的color可是老是失效

在vue的一個項目里，我在app.vue中定義了一個自定義的color可是老是提示：[Vue warn]: Failed to resolve directive: color；
我的app.vue的代碼是這樣的。

<template>
  <div id="app">    
      <!--自定義指令 directive-->
      <h2 v-color="'red'">這是自定義指令</h2>
      
      <!--自定義指令-->
      
      <!--js動畫-->
      <button v-on:click="show = !show">togger</button>
      <div class="ab">
          <transition
              v-on:before-enter="beforeEnter" 
              v-on:enter="enter"
              v-on:leave="leave"
              v-bind:css="false"
              >
              <p class="animate-p" v-show="show">I am show</p>
          </transition>
      </div>
      <!--js動畫-->
    <img src="./assets/logo.png" >
    <input type="" name="" id="" value="" v-model="myVal"/>
    <!--父組件通過props 和v-bind:my-value動態(tài)傳值到子組件a.vue-->
    <comp-a number='55' number-to-do=777 :my-value="myVal" @my-event="getMyEvent">
        <p>123</p>
    </comp-a>
    <hello-world :my-value="myVal"></hello-world>
  </div>
</template>

<script>
    import helloWorld from './components/HelloWorld'
    import compA from './components/a'
    import $ from 'jquery'
    
export default {
  name: 'app',
  components: {compA, helloWorld},
  directive: {
    color: function (el, binding) {
      el.style.color = binding.value
    }
  },
  data () {
    return {
      myVal: 'I am compontent A.',
      show: true
    }
  },
  methods: {
    getMyEvent (e) {
      console.log('I got my event' + '---' + e)
    },
    beforeEnter: function (el) {
      $(el).css({
        left: '-500px',
        opacity: 0
      })
    },
    enter: function (el, fn) {
      $(el).animate({
        left: 0,
        opacity: 1
      }, {
        duration: 1500,
        complete: fn
      })
    },
    leave: function (el, fn) {
      $(el).animate({
        left: '700px',
        opacity: 0
      }, {
        duration: 1500,
        complete: fn
      })
    }
  }
}
</script>

<style >
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.ab{
    position: relative;
    height: 100px;
    left: 200px;
}
.animate-p{
    position: absolute;
    left: 0;
    top: 0;
}
</style>