<script> import Vue from 'vue'; Vue.directive('my-bold', { inserted: function (el) { el.style.fontWeight = 900; } }) export default { props: ['onClick', 'isShow'], data() { return { test: 123 }; }, methods: { afterLeave() { console.log('afterLeave') } }, render() { const directives = [ { name: 'my-bold', value: 666, modifiers: { abc: true } } ]; return ( <transition onAfterLeave={this.afterLeave}> <div onClick={this.onClick} v-show={ this.isShow } v-my-bold> {this.test} {this.isShow + ''} </div> </transition> ); } } </script> <style> .fade-enter-active, .fade-leave-active { transition: opacity .5s } .fade-enter, .fade-leave-to { opacity: 0 } </style>
我们还可以用原生vnode的数据格式使用自定义指令：
const directives = [ { name: 'my-dir', value: 123, modifiers: { abc: true } } ] return <div {...{ directives }}/>
扩展
如果有人觉得在vue组件里面要写data，props，computed和methods不够优雅，可以参考下这个插件vue-class-component，它能让你使用ES6的class和ES7的装饰器编写vue组件。
相关链接：
babel-plugin-transform-vue-jsx
总结
以上就是这篇文章的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
您可能感兴趣的文章: