@ant-design-vue/babel-plugin-jsx
Babel plugin for Vue 3.0 JSX
Last updated 5 years ago by amour1688 .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ npm install @ant-design-vue/babel-plugin-jsx 
SYNC missed versions from official npm registry.

@ant-design-vue/babel-plugin-jsx

To add Vue JSX support.

Installation

Install the plugin with:

npm install @ant-design-vue/babel-plugin-jsx

Then add the plugin to .babelrc:

{
  "plugins": ["@ant-design-vue/babel-plugin-jsx"]
}

Syntax

Content

functional component

const App = () => <div></div>

with render

const App = {
  render() {
    return <div>Vue 3.0</div>
  }
}
const App = defineComponent(() => {
  const count = ref(0);

  const inc = () => {
    count.value++;
  };

  return () => (
    <div onClick={inc}>
      {count.value}
    </div>
  )
})

fragment

const App = () => (
  <>
    <span>I'm</span>
    <span>Fragment</span>
  </>
)

Attributes/Props

const App = () => <input type="email" />

with a dynamic binding:

const placeholderText = 'email'
const App = () => (
  <input
    type="email"
    placeholder={placeholderText}
  />
)

Directives

It is recommended to use camelCase version of it (vModel) in JSX, but you can use kebab-case too (v-model).

v-show

const App = {
  data() {
    return { visible: true };
  },
  render() {
    return <input vShow={this.visible} />;
  },
};

v-model

  • You should use underscore (_) instead of dot (.) for modifiers (vModel_trim={this.test})
export default {
  data: () => ({
    test: 'Hello World',
  }),
  render() {
    return (
      <>
        <input type="text" vModel_trim={this.test} />
        {this.test}
      </>
    )
  },
}

Current Tags

  • 1.0.0-alpha.2                                ...           alpha (5 years ago)
  • 1.0.0-alpha.5                                ...           beta (5 years ago)
  • 1.0.0-rc.1                                ...           latest (4 years ago)

11 Versions

  • 1.0.0-rc.1                                ...           4 years ago
  • 1.0.0-beta.4                                ...           4 years ago
  • 1.0.0-beta.3                                ...           4 years ago
  • 1.0.0-beta.2                                ...           4 years ago
  • 1.0.0-beta.1                                ...           4 years ago
  • 1.0.0-alpha.6                                ...           5 years ago
  • 1.0.0-alpha.5                                ...           5 years ago
  • 1.0.0-alpha.4                                ...           5 years ago
  • 1.0.0-alpha.3                                ...           5 years ago
  • 1.0.0-alpha.2                                ...           5 years ago
  • 1.0.0-alpha.1                                ...           5 years ago
Downloads
Total 0
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dev Dependencies (14)
Dependents (1)

© 2010 - cnpmjs.org x YWFE | Home | YWFE