1. v-model

在 jsx 中支持 v-model 指令

github: https://github.com/nickmessing/babel-plugin-jsx-v-model

npm i babel-plugin-jsx-v-model -D
# or
yarn add babel-plugin-jsx-v-model --dev

.babelrc:

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

Vue.component('hello-world', {
  data: () => ({
    text: 'Hello World!'
  }),
  render () {
    return (
      <div>
        <input type="text" v-model={this.text} />
        {this.text}
      </div>
    )
  }
})

2. .sync 语法糖

在 jsx 中支持 .syns 语法糖

github: https://github.com/njleonzhang/babel-plugin-vue-jsx-sync

npm install babel-plugin-vue-jsx-sync --save-dev
# or
yarn add babel-plugin-vue-jsx-sync --dev

.babelrc

{
  "presets": [
    ["env", {
      "modules": false
    }],
    "stage-2"
  ],
  "plugins": ["transform-runtime", "vue-jsx-sync", "transform-vue-jsx"],
}

function a() {
  return (
    <div>
      <component visible$sync={this.test}>I am newbie</component>
    </div>
  )
}

3. 函数组件

用于 Vue 函数组件的JSX 语法糖插件

github: https://github.com/nickmessing/babel-plugin-jsx-vue-functional

npm i babel-plugin-jsx-vue-functional -D
# or
yarn add babel-plugin-jsx-vue-functional -D

.babelrc:

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

const A = () => <h1>Hello World</h1>
export const B = ({ props, listeners }) => <div onClick={listeners.click}>{props.msg}<A /></div>

4. 事件修饰

JSX 的事件修饰语法糖

github: https://github.com/nickmessing/babel-plugin-jsx-event-modifiers

npm i babel-plugin-jsx-event-modifiers -D
# or
yarn add babel-plugin-jsx-event-modifiers -D

.babelrc:

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

export default {
  render () {
    return (
      <input
        onKeyup:up={this.methodForPressingUp}
        onKeyup:down={this.methodForPressingDown}
        onKeyup:bare-shift-enter={this.methodOnlyOnShiftEnter}
        onKeyup:bare-alt-enter={this.methodOnlyOnAltEnter}
      />
    )
  }
}