关联精彩文章:# 改进tabs组件切换效果,丝滑的动画获得一致好评~
简介
会react的同学都知道,jsx非常灵活,写起来随心所欲!其实,vue3中也是可以支持JSX的!让我们花里胡哨起来吧!
为什么要在Vue 3中使用JSX?
JSX是一种语法糖,可以在JavaScript中编写类似HTML的代码,最初是由React引入的。使用JSX写vue的主要原因有以下几点:
- 为了花里胡哨 灵活性高:与模板语法相比,JSX允许你在模板中使用所有的JavaScript功能,这使得处理复杂的逻辑更加方便。
- 可组合性:JSX语法与Vue 3的组合式API(Composition API)非常契合,使得组件之间的组合和复用更加自然。
如何在Vue 3中使用JSX
配置项目
首先,需要我们的项目配置支持JSX的Babel插件。
安装必要的依赖:
npm install @vitejs/plugin-vue-jsx
配置 Vite: 在vite.config.js
中添加JSX插件:
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
export default defineConfig({
plugins: [vue(), vueJsx()]
});
现在,我们就可以愉快的在vue中写jsx了!
编写JSX组件
基础用法,变量用{}包裹即可。
import { defineComponent } from 'vue';
export default defineComponent({
props: {
msg: {
type: String,
required: true
}
},
setup(props) {
const handleClick = () => {
console.log('Button clicked!');
};
return () => (
<div>
<h1>{props.msg}</h1>
<button onClick={handleClick}>Click me</button>
</div>
);
}
});
使用JSX组件
组件的用法是木有变化的!
// App.vue
<template>
<div id="app">
<HelloWorld msg="Hello Vue 3 with JSX!" />
</div>
</template>
<script setup>
import HelloWorld from './components/HelloWorld.jsx';
</script>
响应式数据
vue的一些属性什么的都是正常使用的,没有变化,比如:使用ref
和reactive
来创建响应式数据,并在JSX模板中使用它们
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const count = ref(0);
const increment = () => {
count.value++;
};
return () => (
<div>
<p>数值: {count.value}</p>
<button onClick={increment}>点我</button>
</div>
);
}
});
条件渲染和列表渲染
和vue模板语法不同的时,条件渲染和列表渲染要使用JavaScript中的条件和循环语句来实现
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const items = [1, 2, 3, 4, 5];
return () => (
<div>
{items.length > 0 ? (
<ul>
{items.map(item => (
<li key={item}>{item}</li>
))}
</ul>
) : (
<p>No items available</p>
)}
</div>
);
}
});
事件处理
事件处理器可以直接在JSX标签中定义,名称与vue模板写法稍有区别
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const handleClick = () => {
alert('Button clicked!');
};
return () => (
<button onClick={handleClick}>Click me</button>
);
}
});
总结
在Vue 3中使用JSX提供了更高的灵活性和可读性,特别是在需要动态生成模板或在模板中使用复杂逻辑时。在开发组件库的时候,这种写法比较常见(我们公司组件库就是jsx写的),日常开发,感觉用的还是比较少!