Babel Preset JSX

最新推荐文章于 2024-08-07 09:22:20 发布

原创最新推荐文章于 2024-08-07 09:22:20 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #vue.js #javascript #前端

本文详细介绍了如何在Vue.js项目中安装并使用JSX语法，包括基本的安装步骤、语法特性如组件、属性、插槽的使用，以及指令和功能性组件的实现方式。适用于希望将JSX集成到Vue项目的前端开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Installation

Install the preset with:

npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props

Then add the preset to .babelrc:

{
  "presets": ["@vue/babel-preset-jsx"]
}

Syntax

Content

render() {
  return <p>hello</p>
}

with dynamic content:

render() {
  return <p>hello { this.message }</p>
}

when self-closing:

render() {
  return <input />
}

with a component:

import MyComponent from ‘./my-component’

export default {
  render() {
    return <MyComponent>hello</MyComponent>
  },
}

Attributes/Props

render() {
  return <input type="email" />
}

with a dynamic binding:

render() {
  return <input
    type="email"
    placeholder={this.placeholderText}
  />
}

with the spread operator (object needs to be compatible with Vue Data Object):

render() {
  const inputAttrs = {
    type: 'email',
    placeholder: 'Enter your email'
  }

  return <input {...{ attrs: inputAttrs }} />
}

Slots
named slots:

render() {
  return (
    <MyComponent>
      <header slot="header">header</header>
      <footer slot="footer">footer</footer>
    </MyComponent>
  )
}

scoped slots:

render() {
  const scopedSlots = {
    header: () => <header>header</header>,
    footer: () => <footer>footer</footer>
  }

  return <MyComponent scopedSlots={scopedSlots} />
}

Directives

<input vModel={this.newTodoText} />

with a modifier:

<input vModel_trim={this.newTodoText} />

with an argument:

<input vOn:click={this.newTodoText} />

with an argument and modifiers:

<input vOn:click_stop_prevent={this.newTodoText} />

v-html:

<p domPropsInnerHTML={html} />

Functional Components
Transpiles arrow functions that return JSX into functional components, when they are either default exports:

export default ({ props }) => <p>hello {props.message}</p>

or PascalCase variable declarations:

const HelloWorld = ({ props }) => <p>hello {props.message}</p>

Compatibility
This repo is only compatible with:

Babel 7+. For Babel 6 support, use vuejs/babel-plugin-transform-vue-jsx
Vue 2+. JSX is not supported for older versions.
https://github.com/vuejs/jsx#installation