</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(https://github.com/vuejs/babel-plugin-transform-vue-jsxhttps://github.com/vuejs/babel-plugin-transform-vue-jsx)

【编辑推荐】

1. Vue vs React: Javascript框架之战
2. 状况决定视图——基于状况的前端开辟思虑
3. 摸索前端黑科技——经由过程png图的rgba值缓存数据
4. 在Vue.js中应用Mixin
5. Vue.js和MVVM小细节

【义务编辑：枯木 TEL：（010）68476606】

　　推荐阅读

　　尴尬了：谷歌Android Samba应用仅支持不安全的SMBv1

近日谷歌初次推出其新的Android Samba应用，这显然不是好的宣布机会，因为在不久前，在重大年夜进击变乱中进击者就应用了该应用中安排的不安然版本SMB协定。比来几个月来，办事器消息块(SMBv1)协定中的马脚经由过程>>>详细阅读

本文标题：用Jsx写Vue组件

地址：http://www.17bianji.com/lsqh/36384.html

 1/2    1