今天头条的小程序_详解使用jsx写vue组件的方法示

发布时间:2021-01-11 16:06 作者:jianzhan

摘要: 详细说明运用jsx写vue部件的方式实例 本文关键给大伙儿详细介绍了有关运用jsx写vue部件的有关材料,原文中根据实例编码详细介绍的十分详尽,对大伙儿具备一定的参照学习培训

详解利用jsx写vue组件的方法示例       这篇文章主要给大家介绍了关于利用jsx写vue组件的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面跟着小编来一起看看吧。

本文主要给大家介绍的是关于利用jsx写vue组件,下面话不多说,来一起看看详细的介绍吧。

我们平常写vue的组件时,一般都是用的是模版,这种方式看起来比较简洁,而且vue作者也推荐使用这个方式,但是这种方式也有一些它的弊端,例如模版调试麻烦,或者在一些场景下模版描述可能没那么简单和方便。

下面我们要讲的是如何在vue里面写jsx,知道react的人应该都知道jsx,jsx的一个特性就是非常灵活,虽然有的人觉得jsx很丑陋,把逻辑都写到模版的感觉,但萝卜青菜各有所爱,适合自己适合团队的就是最好的。

在使用jsx之前我们需要安装一个babel插件(babel-plugin-transform-vue-jsx )

安装方式:

npm install\
 babel-plugin-syntax-jsx\
 babel-plugin-transform-vue-jsx\
 babel-helper-vue-jsx-merge-pro凡科抠图\
 babel-preset-es2015\
 --save-dev

然后再.babelrc里面添加:

 "presets": ["es2015"],
 "plugins": ["transform-vue-jsx"]
}

接着我们就可以愉快地在vue里面编写jsx了。

Test.vue

 script 
export default {
 pro凡科抠图: ['onClick', 'isShow'],
 data() {
 return {
 test: 123
 render() {
 return (
 div this.onClick } 
 { this.test }
 { this.isShow + '' }
 /div 
 /script 

可以看到我们把jsx写在了render方法里面,render方法是vue2.0才支持的,用来提供对虚拟DOM的支持,也就是说只有vue2.0才支持jsx语法转换。

这里要注意的一点是vue里面编写jsx和在react里面的jsx语法还是有一点不一样的。

以下是一段覆盖大部分语法的vue jsx代码:

render (h) {
 return (
 // normal ponent pro凡科抠图.
 id="foo"
 // DOM properties are prefixed with `domPro凡科抠图`
 domPro凡科抠图InnerHTML="bar"
 // event listeners are prefixed with `on` or `nativeOn`
 this.clickHandler}
 native this.nativeClickHandler}
 // other special top-level properties
 'red', fontSize: '14px' }}
 key="key"
 ref="ref"
 // assign the `ref` is used ponents with v-for
 refInFor
 slot="slot" 
 /div 
}

可以看到DOM属性要加domPro凡科抠图前缀,但这里lass和style却不需要,因为这两个是特殊的模块,而且react的class用的是className,vue却用的class。事件监听是以“on”或者“nativeOn”为开始。

实际上vue2.0的模版最后都会被编译为render方法,所以模版声明的组件和jsx声明的组件最后都是一样的。

上面的jsx最后会被编译成下面这样:

render (h) {
 return h('div', {
 // Component pro凡科抠图
 pro凡科抠图: {
 msg: 'hi'
 // normal HTML attributes
 attrs: {
 id: 'foo'
 // DOM pro凡科抠图
 domPro凡科抠图: {
 innerHTML: 'bar'
 // Event handlers are nested under "on", though
 // modifiers such as in v-on:keyup.enter are not
 // supported. You'll have to manually check the
 // keyCode in the handler instead.
 on: {
 click: this.clickHandler
 // ponents only. Allows you to listen to
 // native events, rather than events emitted from
 // ponent using vm.$emit.
 nativeOn: {
 click: this.nativeClickHandler
 // class is a special module, same API as `v-bind:class`
 class: {
 foo: true,
 bar: false
 // style is also same as `v-bind:style`
 style: {
 color: 'red',
 fontSize: '14px'
 // other special top-level properties
 key: 'key',
 ref: 'ref',
 // assign the `ref` is used ponents with v-for
 refInFor: true,
 slot: 'slot'
}

这也意味着两种形式的组件是可以相互引用的。

有时候我们难免会在模版里引入jsx编写的vue组件或者在jsx编写的vue组件里引入模版组件,这里还是有些需要注意的事项:

1.ponents引用,另外pro凡科抠图的编写从驼峰式改为连接符:

 template 
 div 
 Test :on-click="clickHandler" :is-show="show" /Test 
 /div 
 /template 
 script 
import Test from './Test.vue';
export default {
 name: 'hello',
 components: {
 Test
 data() {
 return {
 msg: 'Welcome to Your Vue.js App',
 show: true
 methods: {
 clickHandler(){
 this.show = !this.show;
 /script 

2.在jsx里面引入vue模版组件,这里没有什么要注意的,除了连接符式的属性要转换成驼峰式,还有一个需要注意的是指令,如果用了jsx,那么内置的指令都不会生效(除了v-show),好在内置指令大部分都可以用jsx描述。那么自定义指令要怎么用呢?

自定义指令可以使用“v-name={value} ”语法,如果要支持指令参数和modifier可以用“v-name={{ value, modifier: true }} ”语法:

 script 
import Vue from 'vue';
Vue.directive('my-bold', {
 inserted: function (el) {
 el.style.fontWeight = 900;
export default {
 pro凡科抠图: ['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} name="fade" 
 div 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 }}/ 

扩展

puted和methods不够优雅,可以参考下这个插件,它能让你使用ES6的class和ES7的装饰器编写vue组件。

相关链接:

总结

以上就是这篇文章的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对凡科的支持。


  • 手机微信微信小程序即用

    模拟题目:手机上手机微信手机微信微信小程序即用即走 如何吸引住住并吸引住消费者 手机微信微信小程序是什么?就是依靠手机上手机微信、功效强悍的一种应用,它不象APP单独存在

  • 企业网站制作需对用户群

    公司网站建设需要对客户人群开展精准定位 : :00 网站的对策是制作工作中的构思,一个网站新项目的顾客精准定位及销售市场精准定位在哪儿,决策着之后的发展趋势市场前景,因而

  • 商城系统微信小程序开发

    模拟题目:商城系统系统软件手机微信微信小程序开发设计设计方案方案计划方案和优势 文/创迈高新科技高新科技 移动互联网网网阶段,手机上手机微信综合服务平台变为很大的社交

  • 揭密——有关南宁市微信

    模拟题目:揭密——相关南宁市市手机微信微信小程序开发设计设计方案的广泛伎俩,要想开发设计设计方案手机微信微信小程序的必看 现如今越来越越越大的企业一开始做手机微信微

  • 品牌街总流量年间新征程

    今年,零售业已经产生刻骨铭心转变。 肺炎疫情立即催化反应了消費和零售的网上化要求,直播间卖货、构建品牌街总流量池等方法变成年初第一出风口。 这产生的一切,让全部人刚