详解利用jsx写vue组件的方法示例
前言本文主要给大家介绍的是关于利用jsx写vue组件，下面话不多说，来一起看看详细的介绍吧。 我们平常写vue的组件时，一般都是用的是模版，这种方式看起来比较简洁，而且vue作者也推荐使用这个方式，但是这种方式也有一些它的弊端，例如模版调试麻烦，或者在一些场景下模版描述可能没那么简单和方便。 下面我们要讲的是如何在vue里面写jsx，知道react的人应该都知道jsx，jsx的一个特性就是非常灵活，虽然有的人觉得jsx很丑陋，把逻辑都写到模版的感觉，但萝卜青菜各有所爱，适合自己适合团队的就是最好的。 在使用jsx之前我们需要安装一个babel插件（babel-plugin-transform-vue-jsx ） 安装方式：然后再.babelrc里面添加： 接着我们就可以愉快地在vue里面编写jsx了。 Test.vue
export default {
props: ['onClick','isShow'],data() {
return {
test: 123
};
},render() {
return (
{ this.test }
{ this.isShow + '' }
);
}
}
可以看到我们把jsx写在了render方法里面，render方法是vue2.0才支持的，用来提供对虚拟DOM的支持，也就是说只有vue2.0才支持jsx语法转换。 这里要注意的一点是vue里面编写jsx和在react里面的jsx语法还是有一点不一样的。 以下是一段覆盖大部分语法的vue jsx代码：
)
}
可以看到DOM属性要加domProps前缀，但这里lass和style却不需要，因为这两个是特殊的模块，而且react的class用的是className，vue却用的class。事件监听是以“on”或者“nativeOn”为开始。 实际上vue2.0的模版最后都会被编译为render方法，所以模版声明的组件和jsx声明的组件最后都是一样的。 上面的jsx最后会被编译成下面这样：这也意味着两种形式的组件是可以相互引用的。 有时候我们难免会在模版里引入jsx编写的vue组件或者在jsx编写的vue组件里引入模版组件，这里还是有些需要注意的事项： 1.在模版里面引入jsx的组件，可以通过components引用，另外props的编写从驼峰式改为连接符： 2.在jsx里面引入vue模版组件，这里没有什么要注意的，除了连接符式的属性要转换成驼峰式，还有一个需要注意的是指令，如果用了jsx，那么内置的指令都不会生效（除了v-show），好在内置指令大部分都可以用jsx描述。那么自定义指令要怎么用呢？ 自定义指令可以使用“
import Vue from 'vue';
);
}
}
Vue.directive('my-bold',{ export default { return ( 我们还可以用原生vnode的数据格式使用自定义指令： return <div {...{ directives }}/>
扩展如果有人觉得在vue组件里面要写data，props，computed和methods不够优雅，可以参考下这个插件，它能让你使用ES6的class和ES7的装饰器编写vue组件。 相关链接：总结以上就是这篇文章的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对编程之家的支持。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |