详解利用jsx写vue组件的方法示例


Posted in Javascript onJuly 17, 2017

前言

本文主要给大家介绍的是关于利用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-props\
 babel-preset-es2015\
 --save-dev

然后再.babelrc里面添加:

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

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

Test.vue

<script>
export default {
 props: ['onClick', 'isShow'],
 
 data() {
  return {
   test: 123
  };
 },
 
 render() {
  return (
   <div class="test" onClick={ 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 (
 <div
  // normal attributes or component props.
  id="foo"
  // DOM properties are prefixed with `domProps`
  domPropsInnerHTML="bar"
  // event listeners are prefixed with `on` or `nativeOn`
  onClick={this.clickHandler}
  nativeOnClick={this.nativeClickHandler}
  // other special top-level properties
  class={{ foo: true, bar: false }}
  style={{ color: 'red', fontSize: '14px' }}
  key="key"
  ref="ref"
  // assign the `ref` is used on elements/components with v-for
  refInFor
  slot="slot">
 </div>
 )
}

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

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

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

render (h) {
 return h('div', {
 // Component props
 props: {
  msg: 'hi'
 },
 // normal HTML attributes
 attrs: {
  id: 'foo'
 },
 // DOM props
 domProps: {
  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
 },
 // For components only. Allows you to listen to
 // native events, rather than events emitted from
 // the component 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 on elements/components with v-for
 refInFor: true,
 slot: 'slot'
 })
}

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

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

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

<template>
 <div class="wrapper">
 <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 {
 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} name="fade">
    <div class="test" 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

总结

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

Javascript 相关文章推荐
非常有用的40款jQuery 插件推荐(系列二)
Dec 25 Javascript
node.js中的http.response.addTrailers方法使用说明
Dec 14 Javascript
JavaScript设计模式之外观模式介绍
Dec 28 Javascript
jQuery入门介绍之基础知识
Jan 13 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
Jun 19 Javascript
关于js里的this关键字的理解
Aug 17 Javascript
js实现返回顶部效果
Mar 10 Javascript
Node.js中流(stream)的使用方法示例
Jul 16 Javascript
VUE前端cookie简单操作
Oct 17 Javascript
AngularJS实现的简单拖拽功能示例
Jan 02 Javascript
webpack4 处理SCSS的方法示例
Sep 03 Javascript
vue设计一个倒计时秒杀的组件详解
Apr 06 Javascript
Javascript实现找不同色块的游戏
Jul 17 #Javascript
Vue.js 单页面多路由区域操作的实例详解
Jul 17 #Javascript
Vue项目webpack打包部署到服务器的实例详解
Jul 17 #Javascript
JS中Safari浏览器中的Date
Jul 17 #Javascript
Vue.extend构造器的详解
Jul 17 #Javascript
原生js实现密码输入框值的显示隐藏
Jul 17 #Javascript
extjs简介_动力节点Java学院整理
Jul 17 #Javascript
You might like
php实现的短网址算法分享
2014/06/20 PHP
TFDN图片播放器 不错自动播放
2006/10/03 Javascript
11款基于Javascript的文件管理器
2009/10/25 Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
2013/01/23 Javascript
jquery实现图片上传之前预览的方法
2015/07/11 Javascript
Node.js连接MongoDB数据库产生的问题
2017/02/08 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
2017/07/12 jQuery
深入浅出es6模板字符串
2017/08/26 Javascript
js实现可以点击收缩或张开的悬浮窗
2017/09/18 Javascript
nodejs async异步常用函数总结(推荐)
2017/11/17 NodeJs
JavaScript常见事件对象与操作实例总结
2019/01/05 Javascript
JavaScript实现随机点名器实例详解
2019/05/07 Javascript
[04:49]期待西雅图之战 2016国际邀请赛中国区预选赛WINGS战队赛后采访
2016/06/29 DOTA
python3+PyQt5使用数据库窗口视图
2018/04/24 Python
解决Python网页爬虫之中文乱码问题
2018/05/11 Python
浅谈Series和DataFrame中的sort_index方法
2018/06/07 Python
pandas 选择某几列的方法
2018/07/03 Python
Django实战之用户认证(初始配置)
2018/07/16 Python
Python模块的加载讲解
2019/01/15 Python
Python3列表内置方法大全及示例代码小结
2019/05/10 Python
python挖矿算力测试程序详解
2019/07/03 Python
Django 后台获取文件列表 InMemoryUploadedFile的例子
2019/08/07 Python
Python list与NumPy array 区分详解
2019/11/06 Python
pytorch实现对输入超过三通道的数据进行训练
2020/01/15 Python
Python 3.10 的首个 PEP 诞生,内置类型 zip() 迎来新特性(推荐)
2020/07/03 Python
python实现数字炸弹游戏程序
2020/07/17 Python
Selenium及python实现滚动操作多种方法
2020/07/21 Python
加州风格的游泳和沙滩装品牌:Cupshe
2019/06/10 全球购物
请编程遍历页面上所有 TextBox 控件并给它赋值为 string.Empty
2015/12/03 面试题
幼儿园小班评语大全
2014/04/17 职场文书
热门专业求职信
2014/05/24 职场文书
公司合作意向书范文
2014/07/30 职场文书
小学教师自我评价
2015/03/04 职场文书
乔布斯辞职信(中英文对照)
2015/05/12 职场文书
家长会开场白和结束语
2015/05/29 职场文书
大学生如何逃脱“毕业季创业队即散伙”魔咒?
2019/08/19 职场文书