{"id":17312700,"url":"https://github.com/buuing/jsx-syntax","last_synced_at":"2026-05-05T23:33:53.884Z","repository":{"id":109592538,"uuid":"224413031","full_name":"buuing/jsx-syntax","owner":"buuing","description":"该文档记录如何在 vue2.x 里面搭配 render 函数使用 jsx 语法","archived":false,"fork":false,"pushed_at":"2020-04-16T10:29:56.000Z","size":84,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-27T01:15:54.995Z","etag":null,"topics":["javascript","jsx","vue","vue-jsx"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/buuing.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-11-27T11:16:08.000Z","updated_at":"2024-05-31T01:32:17.000Z","dependencies_parsed_at":"2023-04-07T07:01:11.847Z","dependency_job_id":null,"html_url":"https://github.com/buuing/jsx-syntax","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/buuing/jsx-syntax","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buuing%2Fjsx-syntax","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buuing%2Fjsx-syntax/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buuing%2Fjsx-syntax/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buuing%2Fjsx-syntax/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/buuing","download_url":"https://codeload.github.com/buuing/jsx-syntax/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buuing%2Fjsx-syntax/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32672676,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-05T11:29:49.557Z","status":"ssl_error","status_checked_at":"2026-05-05T11:29:48.587Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","jsx","vue","vue-jsx"],"created_at":"2024-10-15T12:44:19.842Z","updated_at":"2026-05-05T23:33:53.869Z","avatar_url":"https://github.com/buuing.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# Jsx语法指北 (Vue版)\n\n\u003cbr /\u003e\n\n\u003e 郑重声明: 本文档只记录vue版jsx语法, `请勿在react项目中使用`, 因为两者之间还是有些许的区别\n\n`vue-cli@3.x以上的版本可以`搭配render函数`直接使用jsx`动态渲染组件, 但是`vue-cli@2.x`的版本必须加以下babel插件才可以使用\n\n\u003cbr /\u003e\n\n\u003e 以下操作适用于`vue-cli@2.x`\n\n- 首先安装一堆babel插件\n\n`npm install babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props babel-preset-env babel-plugin-jsx-v-model --save-dev`\n\n- 然后在`.babelrc`里面增加如下配置\n\n```js\n{\n  \"presets\": [\"env\"],\n  \"plugins\": [\"jsx-v-model\", \"transform-vue-jsx\"]\n}\n```\n\n\u003e 如果你还是配置不成功\n\n- [参考1: vue官网提供的babel插件](https://github.com/vuejs/babel-plugin-transform-vue-jsx)\n- [参考2: 专门处理render里面的v-model数据双向绑定指令](https://github.com/nickmessing/babel-plugin-jsx-v-model)\n\n\u003cbr /\u003e\n\n## 目录\n\n- 语法篇\n  - [render函数](#render函数)\n  - [标签及注释](#标签及注释)\n  - [渲染变量](#渲染变量)\n  - [引用图片](#引用图片)\n  - [class与style](#class与style)\n  - [条件渲染](#条件渲染)\n  - [列表渲染](#列表渲染)\n\n- [事件篇](./Event.md)\n  - [绑定事件](./Event.md#绑定事件)\n  - [按键修饰符](./Event.md#按键修饰符)\n  - [事件修饰符](./Event.md#事件修饰符)\n\n- [插槽篇](./Slot.md)\n  - [作用域插槽](./Slot.md#作用域插槽)\n\n- [指令篇](./Directive.md)\n  - [自定义指令](./Directive.md#自定义指令)\n\n\u003cbr /\u003e\n\n## render函数\n\n原先的vue组件无非就是老三样: 在`\u003ctemplate\u003e`里写html, `\u003cscript\u003e`里写js, `\u003cstyle\u003e`去写css\n\n但是我们看到下面的代码, 已经没有了`\u003ctemplate\u003e`标签, 取而代之的是在js里面多了一个`类似于生命周期`一样的render函数, style样式则没有任何变化, 还是跟以前一样写在`\u003cstyle\u003e`里面\n\n```jsx\n\u003cscript\u003e\nexport default {\n  name: 'home',\n  data () {\n    return {}\n  },\n  render () {\n    return \u003cdiv id=\"home\"\u003e\n      \u003ch1 class=\"title\"\u003ehello world\u003c/h1\u003e\n      \u003cp\u003e普通template语法\u003c/p\u003e\n    \u003c/div\u003e\n  }\n}\n\u003c/script\u003e\n```\n\n\u003e 但是需要注意, `template标签`和`render函数`不可以同时使用, 只能二选其一\n\n\u003cbr /\u003e\n\n## 标签及注释\n\n- 单标签必须要闭合\n\n```html\n\u003cbr /\u003e\n\u003cimg src=\"./images.png\" /\u003e\n\u003cinput value=\"msg\" /\u003e\n```\n\n- 注释写在`{/* */}`里面\n\n```jsx\n\u003cdiv\u003e\n  {/* \u003cp\u003e单行注释\u003c/p\u003e */}\n\n  {/*\n    \u003cp\u003e多行注释\u003c/p\u003e\n    \u003cp\u003e多行注释\u003c/p\u003e\n    \u003cp\u003e多行注释\u003c/p\u003e\n  */}\n\u003c/div\u003e\n```\n\n- 返回根标签\n\n在render函数中, return只能返回一个dom元素, 所以多标签必须拥有一个父元素来包裹\n\n```js\nrender () {\n  return \u003cdiv\u003e\n    \u003cp\u003e1\u003c/p\u003e\n    \u003cp\u003e2\u003c/p\u003e\n  \u003c/div\u003e\n}\n```\n\n如果想换行书写, 则需要在return后面紧跟一个小括号\n\n```js\nrender () {\n  return (\n    \u003cdiv\u003e\n      \u003cp\u003e1\u003c/p\u003e\n      \u003cp\u003e2\u003c/p\u003e\n      \u003cp\u003e3\u003c/p\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n\u003e 如果你把`dom标签`看成是一个一个的对象就容易理解多了\n\n\u003cbr /\u003e\n\n## 渲染变量\n\n在jsx语法中, 所有的js都需要写在`{ }`单花括号中, 如果想要使用data中的数据, 则需要通过this调用\n\n- 双花括号`{{}}`改成单花括号`{}`\n\n```jsx\n\u003cdiv\u003e\n  \u003cp\u003e{ 1 + 1 }\u003c/p\u003e\n  \u003cp\u003e{ this.msg }\u003c/p\u003e\n\u003c/div\u003e\n```\n\n- `v-html`改成`domPropsInnerHTML`\n\n```jsx\n\u003cp domPropsInnerHTML={ this.msg }\u003e\u003c/p\u003e\n\n\u003cp {...{ // 高级写法\n  domProps: {\n    innerHTML: this.msg\n  }\n}}\u003e\u003c/p\u003e\n```\n\n- `v-model`则不变, 但是其中的变量必须使用`this.属性`的方式使用\n\n```jsx\n\u003cp v-model={ this.msg }\u003e\u003c/p\u003e\n```\n\n\u003cbr /\u003e\n\n## 引用图片\n\n- 通过`require`引入\n\n```jsx\n\u003cimg src={require('@/assets/img/logo.png')} /\u003e\n\n\u003cdiv style={{\n  background: `url(${require('@/assets/img/banner.png')})`\n}}\u003e\u003c/div\u003e\n```\n\n- 通过`import`引入\n\n```html\n\u003cscript\u003e\nimport logo from '@/assets/img/logo.png'\n\nexport default {\n  render () {\n    return \u003cdiv\u003e\n      \u003cimg src={logo} /\u003e\n    \u003c/div\u003e\n  }\n}\n\u003c/script\u003e\n```\n\n\u003cbr /\u003e\n\n## class与style\n\nvue版jsx里面, 标签的class属性还是原样书写, 不必像react一样写成className\n\n```jsx\n\u003cp class=\"title\"\u003e\u003c/p\u003e\n\n\u003cp style=\"width: 100px; font-size: 18px\"\u003e\u003c/p\u003e\n```\n\n如果需要动态绑定, 则需要在花括号里面写一个对象\n\n```jsx\n\u003cp class={{ 'title': true, 'active': this.isShow }}\u003e\u003c/p\u003e\n\n\u003cp style={{\n  width: '100px',\n  fontSize: '18px',\n  background: this.active ? '#fff' : '#000'\n}}\u003e\u003c/p\u003e\n```\n\n\u003cbr /\u003e\n\n## 条件渲染\n\njsx里面不能使用类似于`v-if`这样的指令, 只能是通过`\u0026\u0026 逻辑运算符`或`三元运算符`\n\n```jsx\n\u003cdiv\u003e\n  { this.isShow \u0026\u0026 \u003cp\u003e这是一个p标签\u003c/p\u003e }\n\n  { this.isShow ? \u003cp\u003e这是一个p标签\u003c/p\u003e : null }\n\u003c/div\u003e\n```\n\n\u003cbr /\u003e\n\n## 列表渲染\n\n同样`v-for`也不能使用了, 使用map方法进行代替\n\n```jsx\n\u003cul\u003e\n  {\n    this.list.map((item, index) =\u003e {\n      // key当成属性写在li标签中即可\n      return \u003cli key={index}\u003e{item}\u003c/li\u003e\n    })\n  }\n\u003c/ul\u003e\n```\n\n简写方式:\n\n```jsx\n\u003cul\u003e\n  { this.list.map((item, index) =\u003e \u003cli key={index}\u003e{item}\u003c/li\u003e) }\n\u003c/ul\u003e\n```\n\n\u003cbr /\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbuuing%2Fjsx-syntax","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbuuing%2Fjsx-syntax","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbuuing%2Fjsx-syntax/lists"}