【搬运】jsx在Vue中的使用（英文原版）

最新推荐文章于 2024-12-01 18:06:27 发布

weixin_33862993

最新推荐文章于 2024-12-01 18:06:27 发布

阅读量132

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5c9b27e0e51d4566a5566ad7

本文介绍了一个可配置的 Babel 预设，用于添加 Vue JSX 支持。包括安装方法、语法示例，如动态内容、指令、组件等，并展示了如何将箭头函数转换为功能性组件。

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

Babel Preset JSX

原文地址：github.com/vuejs/jsx/b…

Configurable Babel preset to add Vue JSX support. See the configuration options here.

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"]
}
复制代码

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>
  }
}
复制代码

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 }} />
}
复制代码

<input vModel="newTodoText" />
复制代码

with a modifier:

<input vModel_trim="newTodoText" />
复制代码

with an argument:

<input vOn:click="newTodoText" />
复制代码

with an argument and modifiers:

<input vOn:click_stop_prevent="newTodoText" />
复制代码

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>
复制代码

This repo is only compatible with:

转载于:https://juejin.im/post/5c9b27e0e51d4566a5566ad7