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 相关文章推荐
Ubuntu 11.10 安装Node.js的方法
Nov 30 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
Aug 25 Javascript
原生js实现图片轮播特效
Dec 18 Javascript
js实现仿微博滚动显示信息的效果
Dec 21 Javascript
javascript实现计时器的简单方法
Feb 21 Javascript
jQuery Ajax 加载数据时异步显示加载动画
Aug 01 Javascript
javascript的几种写法总结
Sep 30 Javascript
微信小程序 数据访问实例详解
Oct 08 Javascript
微信小程序多张图片上传功能
Jun 07 Javascript
Vue项目中如何引入icon图标
Mar 28 Javascript
AngularJS 前台分页实现的示例代码
Jun 07 Javascript
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
关于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
Laravel向公共模板赋值方法总结
2019/06/25 PHP
JavaScript中“+=”的应用
2007/02/02 Javascript
IE6 fixed的完美解决方案
2011/03/31 Javascript
js控制input框只读实现示例
2014/01/20 Javascript
javascript中定义私有方法说明(private method)
2014/01/27 Javascript
JS对文本框值的判断示例
2014/03/10 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
2014/04/12 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
2014/06/10 Javascript
js 左右悬浮对联广告特效代码
2014/12/12 Javascript
极易被忽视的javascript面试题七问七答
2016/02/15 Javascript
node.js实现复制文本到剪切板的功能
2017/01/23 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
2017/03/28 Javascript
js+html5实现手机九宫格密码解锁功能
2018/07/30 Javascript
基于element-ui组件手动实现单选和上传功能
2018/12/06 Javascript
vue $set 给数据赋值的实例
2019/11/09 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
2020/08/07 Javascript
微信小程序入门之绘制时钟
2020/10/22 Javascript
简单谈谈python中的多进程
2016/11/06 Python
python实现用户答题功能
2018/01/17 Python
Scrapy基于selenium结合爬取淘宝的实例讲解
2018/06/13 Python
windows下 兼容Python2和Python3的解决方法
2018/12/05 Python
Python单元测试工具doctest和unittest使用解析
2019/09/02 Python
Django框架获取form表单数据方式总结
2020/04/22 Python
Python制作简单的剪刀石头布游戏
2020/12/10 Python
CSS3 开发工具收集
2010/04/17 HTML / CSS
Berghaus官网:户外服装和设备,防水服
2020/01/17 全球购物
请解释流与文件有什么不同
2016/07/29 面试题
财会专业毕业生自荐信
2014/07/09 职场文书
反洗钱宣传活动总结
2014/08/26 职场文书
小学“向国旗敬礼”网上签名寄语活动总结
2014/09/27 职场文书
2015年挂职锻炼工作总结
2014/12/12 职场文书
停电通知范文
2015/04/16 职场文书
独生子女证明范本
2015/06/19 职场文书
解决pycharm安装scrapy DLL load failed:找不到指定的程序的问题
2021/06/08 Python
python非标准时间的转换
2021/07/25 Python
python使用torch随机初始化参数
2022/03/22 Python