如果我们希望在项目中使用jsx,那么我们需要添加对jsx的支持:
- jsx我们通常会通过Babel来进行转换(React编写的jsx就是通过babel转换的);
- 对于Vue来说,我们只需要在Babel中配置对应的插件即可;
webpack 中安装
- 安装Babel支持Vue的jsx插件:
npm install @vue/babel-plugin-jsx -D
在babel.config.js配置文件中配置插件:
module.exports = {
presets:[
'@vue/cli-plugin-babel/preset'
],
plugins:[
"@vue/babel-plugin-jsx"
]
}
Vite环境
如果是Vite环境,需要安装插件:
npm install @vitejs/plugin-vue-jsx -D
在vite.config.js配置文件中配置插件:
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import jsx from '@vitejs/plugin-vue-jsx' // 引入
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
jsx() // 使用
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
使用案例
基本使用
<script lang="jsx">
export default {
render() {
return (
<div class="app">
<h2>我是标题</h2>
<p>我是内容, 哈哈哈</p>
</div>
)
}
}
</script>
<style lang="less" scoped>
</style>
Options-Api中
<script lang="jsx">
import About from './About.vue'
export default {
data(){
return {
counter:0
}
},
render(){
return (
<div class="app">
<h2>当前计数:{this.counter}</h2>
<button onClick={this.increment}>+1</button>
<button onClick={this.decrement}>-1</button>
<About />
</div>
)
},
methods:{
increment(){
this.counter++
},
decrement(){
this.counter--
}
}
}
</script>
<style lang="less" scoped>
</style>
Compitions-Api中
<template>
<jsx />
</template>
<script lang="jsx" setup>
import { ref } from 'vue'
import About from "./About.vue"
const counter = ref(0)
const increment = () => {
counter.value++
}
const decrement = () => {
counter.value--;
}
const jsx = () => (
<div>
<h2>当前计数:{ counter.value }</h2>
<button onClick={increment}> +1 </button>
<button onClick={decrement}> -1 </button>
<About />
</div>
)
</script>
<style lang="less" scoped>
</style>
setup函数中使用
<script lang="jsx">
import { ref } from 'vue'
import About from './About.vue'
export default {
setup(){
const counter = ref(0)
const increment = () => {
counter.value++
}
const decrement = () => {
counter.value--
}
return () => (
<div class="app">
<h2>当前计数:{ counter.value }</h2>
<button onClick={increment}>+1</button>
<button onClick={decrement}>-1</button>
<About />
</div>
)
}
}
</script>
<style lang="less" scoped>
</style>
感谢大家观看,我们下次见
[...]export default App 这就是React中用函数的方式实现页面的展示,看得出来React又向函数式编程的开发方式迈进。是否能够成为主流这还要看市场,另外React中的Hook也是函数式编程的体现。后面我们也会写到。如果你还对类组件感兴趣,可以看这一篇文章: React中类组件如何实现?感谢大家观看,我们下次再见。[...]
[...]}从上面可以看出,在React中我们使用this.setState来修改变量的值。在这里我们要注意this的指向问题,如果有不懂可以看:函数中的this指向componentDidMountcomponentDidMount是表示组件已被渲染到dom中,被挂载到DOM上,这里就不得不提一下在React中如何引入组件相关的内容了。那么如何引入组件呢?在React中非常简单import HelloWo[...]
of course like your web site but you need to test the spelling on quite a few of your posts. A number of them are rife with spelling problems and I in finding it very troublesome to inform the reality nevertheless I will surely come again again.
新年快乐!
十天看一部剧,还可以吧
@梦不见的梦 行,谢谢提醒,我优化一下
网站的速度有待提升,每次打开都要转半天还进不来呢
@React实战爱彼迎项目(二) - 程序员鸡皮 哪里有问题了,报错了吗?
@Teacher Du 那是怕你们毕不了业,我大学那会儿给小礼品
我们大学那会,献血还给学分~