vue组件jsx语法的具体使用


Posted in Javascript onMay 21, 2018

如果使用render函数来写比较复杂的vue组件,对于可读性和可维护性都很不友好,而使用jsx就会让我们回到更接近于模板的语法。babel转译器会将jsx转译为render函数渲染。

配置

需要用到babel插件

安装

npm install\
 babel-plugin-syntax-jsx\
 babel-plugin-transform-vue-jsx\
 babel-helper-vue-jsx-merge-props\
 babel-preset-env\
 --save-dev

.babelrc配置

在plugins中添加transform-vue-jsx

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

基础示例

转义前

<div id="foo">{this.text}</div>

转译后

h('div', {
 attrs: {
  id: 'foo'
 }
}, [this.text])

Note:h函数为vue实例的$createElement方法,必须存在于jsx的作用域中,在渲染函数中必须以第一个参数传入,如:

render (h) { // <-- h 函数必须在作用域内
 return <div id="foo">bar</div>
}

自动注入h函数

从3.4.0开始,在用ES2015语法声明的方法和getter访问器中(使用function关键字或箭头函数除外),babel会自动注入hconst h = this.$createElement)函数,所以可以省略(h)参数。

Vue.component('jsx-example', {
 render () { // h 会自动注入
  return <div id="foo">bar</div>
 },
 myMethod: function () { // h 不会注入
  return <div id="foo">bar</div>
 },
 someOtherMethod: () => { // h 不会注入
  return <div id="foo">bar</div>
 }
})

@Component
class App extends Vue {
 get computed () { // h 会自动注入
  return <div id="foo">bar</div>
 }
}

 Vue JSX 和 React JSX对比

首先, Vue2.0 的vnode 格式与react不同,createElement函数的第二个参数是一个数据对象,接受一个嵌套的对象,每一个嵌套对象都会有对应的模块处理。

Vue2.0 render语法

render (h) {
 return h('div', {
  // 组件props
  props: {
   msg: 'hi'
  },
  // 原生HTML属性
  attrs: {
   id: 'foo'
  },
  // DOM props
  domProps: {
   innerHTML: 'bar'
  },
  // 事件是嵌套在`on`下面的,所以将不支持修饰符,如:`v-on:keyup.enter`,只能在代码中手动判断keyCode
  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'
 })
}

对应的Vue2.0 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>
 )
}

JSX展开运算符

支持JSX展开,插件会智能的合并数据属性,如:

const data = {
 class: ['b', 'c']
}
const vnode = <div class="a" {...data}/>

合并后的数据为:

{ class: ['a', 'b', 'c'] }

Vue 指令

JSX对大多数的Vue内建指令都不支持,唯一的例外是v-show,该指令可以使用v-show={value}的语法。大多数指令都可以用编程方式实现,比如v-if就是一个三元表达式,v-for就是一个array.map()等。

如果是自定义指令,可以使用v-name={value}语法,但是改语法不支持指令的参数arguments和修饰器modifier。有以下两个解决方法:

将所有内容以一个对象传入,如:v-name={{ value, modifier: true }}

使用原生的vnode指令数据格式,如:

const directives = [
 { name: 'my-dir', value: 123, modifiers: { abc: true } }
]

return <div {...{ directives }}/>

原文地址(https://github.com/vuejs/babel-plugin-transform-vue-jsx#usage)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript fullscreen全屏实现代码
Apr 09 Javascript
IE无法设置短域名下Cookie
Sep 23 Javascript
Js参数值中含有单引号或双引号问题的解决方法
Nov 06 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
Jan 24 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
Jun 12 Javascript
jQuery事件用法实例汇总
Aug 29 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
Feb 15 Javascript
微信小程序 教程之模板
Oct 18 Javascript
layer实现弹窗提交信息
Dec 12 Javascript
使用Bootstrap美化按钮实例代码(demo)
Feb 03 Javascript
微信小程序 动态绑定事件并实现事件修改样式
Apr 13 Javascript
Vue2项目中对百度地图的封装使用详解
Jun 16 Vue.js
关于vue的语法规则检测报错问题的解决
May 21 #Javascript
JS实现520 表白简单代码
May 21 #Javascript
了解ESlint和其相关操作小结
May 21 #Javascript
vue2.0 实现导航守卫(路由守卫)
May 21 #Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
May 21 #Javascript
JavaScript实现一个带AI的井字棋游戏源码
May 21 #Javascript
Vue中父子组件通讯之todolist组件功能开发
May 21 #Javascript
You might like
php中的常用魔术方法总结
2013/08/02 PHP
PHP JSON出错:Cannot use object of type stdClass as array解决方法
2014/08/16 PHP
PHP多维数组转一维数组的简单实现方法
2015/12/23 PHP
php简单随机字符串生成方法示例
2017/04/19 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
List the Codec Files on a Computer
2007/06/11 Javascript
Javascript和Ajax中文乱码吐血版解决方案
2009/12/21 Javascript
jquery json 实例代码
2010/12/02 Javascript
jquery 单击li防止重复加载的实现代码
2010/12/24 Javascript
jquery购物车实时结算特效实现思路
2013/09/23 Javascript
15款jQuery分布引导插件分享
2015/02/04 Javascript
nodejs初步体验篇
2015/11/23 NodeJs
jQuery实现批量判断表单中文本框非空的方法(2种方法)
2015/12/09 Javascript
url中的特殊符号有什么含义(推荐)
2016/06/17 Javascript
Node.js中使用jQuery的做法
2016/08/17 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
2016/11/09 Javascript
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
ES6(ECMAScript 6)新特性之模板字符串用法分析
2017/04/01 Javascript
JavaScript在控件上添加倒计时功能的实现代码
2017/07/04 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
2018/12/03 Javascript
Node.js+ELK日志规范的实现
2019/05/23 Javascript
[02:10]2018DOTA2亚洲邀请赛赛前采访-Liquid
2018/04/03 DOTA
Python语言的12个基础知识点小结
2014/07/10 Python
python通过加号运算符操作列表的方法
2015/07/28 Python
python实现二叉查找树实例代码
2018/02/08 Python
pycharm 将python文件打包为exe格式的方法
2019/01/16 Python
详解Python数据分析--Pandas知识点
2019/03/23 Python
用React加CSS3实现微信拆红包动画效果
2017/03/13 HTML / CSS
潘多拉珠宝英国官方网上商店:PANDORA英国
2018/06/12 全球购物
《动手做做看》教学反思
2014/04/09 职场文书
群众路线教育实践活动剖析材料
2014/09/30 职场文书
培训班开班主持词
2015/07/02 职场文书
二十年同学聚会感言
2015/07/30 职场文书
小学英语教师2015年度个人工作总结
2015/10/14 职场文书
2016年社区创先争优活动总结
2016/04/05 职场文书
导游词之河北野三坡
2019/12/11 职场文书