详解利用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 相关文章推荐
Jquery 高亮显示文本中重要的关键字
Dec 24 Javascript
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
May 16 Javascript
javascript操作JSON的要领总结
Dec 09 Javascript
Javascript中浮点数相乘的一个解决方法
Jun 03 Javascript
Select下拉框模糊查询功能实现代码
Jul 22 Javascript
bootstrap基础知识学习笔记
Nov 02 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
Dec 26 Javascript
layui表格实现代码
May 20 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
Aug 20 Javascript
vue将毫秒数转化为正常日期格式的实例
Sep 16 Javascript
搭建基于express框架运行环境的方法步骤
Nov 15 Javascript
为什么要使用Vuex的介绍
Jan 19 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
在项目中寻找代码的坏命名
2012/07/14 PHP
php策略模式简单示例分析【区别于工厂模式】
2019/09/25 PHP
安装PHP扩展时解压官方 tgz 文件后没有configure文件无法进行配置编译的问题
2020/08/26 PHP
JavaScript中令你抓狂的魔术变量
2006/11/30 Javascript
ASP中用Join和Array,可以加快字符连接速度的代码
2007/08/22 Javascript
Javascript this指针
2009/07/30 Javascript
用jQuery扩展自写的 UI导航
2010/01/13 Javascript
火狐下table中创建form导致两个table之间出现空白
2013/09/02 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
2015/12/04 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
2016/07/07 Javascript
js style.display=block显示布局错乱问题的解决方法
2016/09/21 Javascript
详解Jquery的事件操作和文档操作
2016/12/19 Javascript
Vue 进入/离开动画效果
2017/12/26 Javascript
解决修复npm安装全局模块权限的问题
2018/05/17 Javascript
jQuery实现每日秒杀商品倒计时功能
2019/09/06 jQuery
Javascript实现秒表计时游戏
2020/05/27 Javascript
[47:04]EG vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
利用Python爬取微博数据生成词云图片实例代码
2017/08/31 Python
django中send_mail功能实现详解
2018/02/06 Python
python实现的登录与提交表单数据功能示例
2019/09/25 Python
django 连接数据库出现1045错误的解决方式
2020/05/14 Python
python中如何进行连乘计算
2020/05/28 Python
Python urllib2运行过程原理解析
2020/06/04 Python
PyQt中使用QtSql连接MySql数据库的方法
2020/07/28 Python
Python 如何查找特定类型文件
2020/08/17 Python
HTML5 Canvas的事件处理介绍
2015/04/24 HTML / CSS
J2EE面试题大全
2016/08/06 面试题
职高毕业生自我鉴定
2013/10/21 职场文书
新闻学毕业生自荐信
2013/11/15 职场文书
酒店拾金不昧表扬信
2014/01/18 职场文书
高中生期末评语
2014/01/28 职场文书
物控部经理职务说明书
2014/02/25 职场文书
公立医院改革实施方案
2014/03/14 职场文书
销售队伍口号
2014/06/11 职场文书
群众路线自我剖析及整改措施
2014/11/04 职场文书
2016年圣诞节义工活动总结
2016/04/01 职场文书