用Jsx写Vue组件

简介:


前言

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

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

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

安装方式:


 
 
  1. npm install\ 
  2.  
  3.   babel-plugin-syntax-jsx\ 
  4.  
  5.   babel-plugin-transform-vue-jsx\ 
  6.  
  7.   babel-helper-vue-jsx-merge-props\ 
  8.  
  9.   babel-preset-es2015\ 
  10.  
  11.   --save-dev  

然后再.babelrc里面添加:


 
 
  1.  
  2. "presets": ["es2015"], 
  3.  
  4. "plugins": ["transform-vue-jsx"
  5.  
  6. }  

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

Test.vue


 
 
  1. <script> 
  2.  
  3. export default { 
  4.  
  5.     props: ['onClick''isShow'], 
  6.  
  7.     data() { 
  8.  
  9.         return { 
  10.  
  11.             test: 123 
  12.  
  13.         }; 
  14.  
  15.     }, 
  16.  
  17.     render() { 
  18.  
  19.         return ( 
  20.  
  21.             <div class="test" onClick={ this.onClick }> 
  22.  
  23.                 { this.test } 
  24.  
  25.                 { this.isShow + '' } 
  26.  
  27.             </div> 
  28.  
  29.         ); 
  30.  
  31.     } 
  32.  
  33.  
  34. </script>  

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

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

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


 
 
  1. render (h) { 
  2.  
  3.   return ( 
  4.  
  5.     <div 
  6.  
  7.       // normal attributes or component props. 
  8.  
  9.       id="foo" 
  10.  
  11.       // DOM properties are prefixed with `domProps` 
  12.  
  13.       domPropsInnerHTML="bar" 
  14.  
  15.       // event listeners are prefixed with `onor `nativeOn` 
  16.  
  17.       onClick={this.clickHandler} 
  18.  
  19.       nativeOnClick={this.nativeClickHandler} 
  20.  
  21.       // other special top-level properties 
  22.  
  23.       class={{ foo: true, bar: false }} 
  24.  
  25.       style={{ color: 'red', fontSize: '14px' }} 
  26.  
  27.       key="key" 
  28.  
  29.       ref="ref" 
  30.  
  31.       // assign the `ref` is used on elements/components with v-for 
  32.  
  33.       refInFor 
  34.  
  35.       slot="slot"
  36.  
  37.     </div> 
  38.  
  39.   ) 
  40.  
  41. }  

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

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

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


 
 
  1. render (h) { 
  2.  
  3.   return h('div', { 
  4.  
  5.     // Component props 
  6.  
  7.     props: { 
  8.  
  9.       msg: 'hi' 
  10.  
  11.     }, 
  12.  
  13.     // normal HTML attributes 
  14.  
  15.     attrs: { 
  16.  
  17.       id: 'foo' 
  18.  
  19.     }, 
  20.  
  21.     // DOM props 
  22.  
  23.     domProps: { 
  24.  
  25.       innerHTML: 'bar' 
  26.  
  27.     }, 
  28.  
  29.     // Event handlers are nested under "on", though 
  30.  
  31.     // modifiers such as in v-on:keyup.enter are not 
  32.  
  33.     // supported. You'll have to manually check the 
  34.  
  35.     // keyCode in the handler instead
  36.  
  37.     on: { 
  38.  
  39.       click: this.clickHandler 
  40.  
  41.     }, 
  42.  
  43.     // For components only. Allows you to listen to 
  44.  
  45.     // native events, rather than events emitted from 
  46.  
  47.     // the component using vm.$emit. 
  48.  
  49.     nativeOn: { 
  50.  
  51.       click: this.nativeClickHandler 
  52.  
  53.     }, 
  54.  
  55.     // class is a special module, same API as `v-bind:class` 
  56.  
  57.     class: { 
  58.  
  59.       foo: true
  60.  
  61.       bar: false 
  62.  
  63.     }, 
  64.  
  65.     // style is also same as `v-bind:style` 
  66.  
  67.     style: { 
  68.  
  69.       color: 'red'
  70.  
  71.       fontSize: '14px' 
  72.  
  73.     }, 
  74.  
  75.     // other special top-level properties 
  76.  
  77.     key'key'
  78.  
  79.     ref: 'ref'
  80.  
  81.     // assign the `ref` is used on elements/components with v-for 
  82.  
  83.     refInFor: true
  84.  
  85.     slot: 'slot' 
  86.  
  87.   }) 
  88.  
  89. }  

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

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

1.在模版里面引入jsx的组件,可以通过components引用,另外props的编写从驼峰式改为连接符:


 
 
  1. <template> 
  2.  
  3.   <div class="wrapper"
  4.  
  5.     <Test :on-click="clickHandler" :is-show="show"></Test> 
  6.  
  7.   </div> 
  8.  
  9. </template> 
  10.  
  11. <script> 
  12.  
  13. import Test from './Test.vue'
  14.  
  15. export default { 
  16.  
  17.   name'hello'
  18.  
  19.   components: { 
  20.  
  21.     Test 
  22.  
  23.   }, 
  24.  
  25.   data() { 
  26.  
  27.     return { 
  28.  
  29.       msg: 'Welcome to Your Vue.js App'
  30.  
  31.       show: true 
  32.  
  33.     }; 
  34.  
  35.   }, 
  36.  
  37.   methods: { 
  38.  
  39.     clickHandler(){ 
  40.  
  41.       this.show = !this.show; 
  42.  
  43.     } 
  44.  
  45.   } 
  46.  
  47. }; 
  48.  
  49. </script>  

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

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


 
 
  1. <script> 
  2.  
  3. import Vue from 'vue'
  4.  
  5. Vue.directive('my-bold', { 
  6.  
  7.   inserted: function (el) { 
  8.  
  9.     el.style.fontWeight = 900; 
  10.  
  11.   } 
  12.  
  13. }) 
  14.  
  15. export default { 
  16.  
  17.     props: ['onClick''isShow'], 
  18.  
  19.     data() { 
  20.  
  21.         return { 
  22.  
  23.             test: 123 
  24.  
  25.         }; 
  26.  
  27.     }, 
  28.  
  29.     methods: { 
  30.  
  31.         afterLeave() { 
  32.  
  33.             console.log('afterLeave'
  34.  
  35.         } 
  36.  
  37.     }, 
  38.  
  39.     render() { 
  40.  
  41.         const directives = [ 
  42.  
  43.             { name'my-bold', value: 666, modifiers: { abc: true } } 
  44.  
  45.         ]; 
  46.  
  47.         return ( 
  48.  
  49.             <transition onAfterLeave={this.afterLeave} name="fade"
  50.  
  51.                 <div class="test" onClick={this.onClick} v-show={ this.isShow } v-my-bold> 
  52.  
  53.                     {this.test} 
  54.  
  55.                     {this.isShow + ''
  56.  
  57.                 </div> 
  58.  
  59.             </transition> 
  60.  
  61.         ); 
  62.  
  63.     } 
  64.  
  65.  
  66. </script> 
  67.  
  68. <style> 
  69.  
  70. .fade-enter-active, .fade-leave-active { 
  71.  
  72.   transition: opacity .5s 
  73.  
  74.  
  75. .fade-enter, .fade-leave-to { 
  76.  
  77.   opacity: 0 
  78.  
  79.  
  80. </style>  

我们还可以用原生vnode的数据格式使用自定义指令:


 
 
  1. const directives = [ 
  2.  
  3. name'my-dir', value: 123, modifiers: { abc: true } } 
  4.  
  5.  
  6. return <div {...{ directives }}/>  

扩展

如果有人觉得在vue组件里面要写data,props,computed和methods不够优雅,可以参考下这个插件vue-class-component,它能让你使用ES6的class和ES7的装饰器编写vue组件。


作者:佚名

来源:51CTO

相关文章
|
4天前
|
缓存 JavaScript 搜索推荐
Vue SSR(服务端渲染)预渲染的工作原理
【10月更文挑战第23天】Vue SSR 预渲染通过一系列复杂的步骤和机制,实现了在服务器端生成静态 HTML 页面的目标。它为提升 Vue 应用的性能、SEO 效果以及用户体验提供了有力的支持。随着技术的不断发展,Vue SSR 预渲染技术也将不断完善和创新,以适应不断变化的互联网环境和用户需求。
22 9
|
3天前
|
缓存 JavaScript UED
Vue 中实现组件的懒加载
【10月更文挑战第23天】组件的懒加载是 Vue 应用中提高性能的重要手段之一。通过合理运用动态导入、路由配置等方式,可以实现组件的按需加载,减少资源浪费,提高应用的响应速度和用户体验。在实际应用中,需要根据具体情况选择合适的懒加载方式,并结合性能优化的其他措施,以打造更高效、更优质的 Vue 应用。
|
2天前
|
JavaScript
如何在 Vue 中使用具名插槽
【10月更文挑战第25天】通过使用具名插槽,你可以更好地组织和定制组件的模板结构,使组件更具灵活性和可复用性。同时,具名插槽也有助于提高代码的可读性和可维护性。
8 2
|
2天前
|
JavaScript
Vue 中的插槽
【10月更文挑战第25天】插槽的使用可以大大提高组件的复用性和灵活性,使你能够根据具体需求在组件中插入不同的内容,同时保持组件的结构和样式的一致性。
8 2
|
2天前
|
前端开发 JavaScript 容器
在 vite+vue 中使用@originjs/vite-plugin-federation 模块联邦
【10月更文挑战第25天】模块联邦是一种强大的技术,它允许将不同的微前端模块组合在一起,形成一个统一的应用。在 vite+vue 项目中,使用@originjs/vite-plugin-federation 模块联邦可以实现高效的模块共享和组合。通过本文的介绍,相信你已经了解了如何在 vite+vue 项目中使用@originjs/vite-plugin-federation 模块联邦,包括安装、配置和使用等方面。在实际开发中,你可以根据自己的需求和项目的特点,灵活地使用模块联邦,提高项目的可维护性和扩展性。
|
3天前
|
JavaScript 前端开发 UED
vue 提高 tree shaking 的效果
【10月更文挑战第23天】提高 Vue 中 Tree shaking 的效果需要综合考虑多个因素,包括模块的导出和引用方式、打包工具配置、代码结构等。通过不断地优化和调整,可以最大限度地发挥 Tree shaking 的优势,为 Vue 项目带来更好的性能和用户体验。
|
3天前
|
缓存 JavaScript UED
Vue 中异步加载模块的方式
【10月更文挑战第23天】这些异步加载模块的方式各有特点和适用场景,可以根据项目的需求和架构选择合适的方法来实现模块的异步加载,以提高应用的性能和用户体验
|
3天前
|
JavaScript 测试技术 UED
解决 Vue 项目中 Tree shaking 无法去除某些模块
【10月更文挑战第23天】解决 Vue 项目中 Tree shaking 无法去除某些模块的问题需要综合考虑多种因素,通过仔细分析、排查和优化,逐步提高 Tree shaking 的效果,为项目带来更好的性能和用户体验。同时,持续关注和学习相关技术的发展,不断探索新的解决方案,以适应不断变化的项目需求。
|
4天前
|
JavaScript 搜索推荐 前端开发
Vue SSR 预渲染的广泛应用场景及其优势
【10月更文挑战第23天】Vue SSR 预渲染技术在众多领域都有着广泛的应用价值,可以显著提升网站的性能、用户体验和搜索引擎优化效果。随着技术的不断发展和完善,其应用场景还将不断拓展和深化
18 2
|
JavaScript
Vue的非父子组件之间传值
全局事件总线 一种组件间通信的方式,适用于任意组件间通信