在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动态传值到子组件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>
directives 少了个s!!!少了个s!!!少了个s!!!少了个s!!!少了个s!!!少了个s!!!
还望采纳