vue.js使用JSX语法扩展

JavaScript XML

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展

不同版本需要装不同的依赖

1. https://github.com/vuejs/jsx
2. https://github.com/vuejs/babel-plugin-transform-vue-jsx

测试发现 vue 4.2.3 可以直接使用jsx语法

vue -V
@vue/cli 4.2.3

vue create vue-jsx-demo

  

 

  
1
  
2
  
3
  
4
 

src/App.vue

<template> <div id="app"> <HelloWorld /> </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App", components: { HelloWorld
  }
};
</script>


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
 

src/components/HelloWorld.vue

<script>
export default {
  name: "HelloWorld", render() { return <h2>Hello JSX</h2>;
  }
};
</script>


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
 

文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。

原文链接：pengshiyu.blog.csdn.net/article/details/105275580