028-86922220
根据您的个性需求进行定制 先人一步 抢占小程序红利时代
今天小编给大家分享一下如何在vue3中使用jsx语法的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
创新互联服务项目包括双鸭山网站建设、双鸭山网站制作、双鸭山网页制作以及双鸭山网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，双鸭山网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到双鸭山省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！
vue3项目中 推进使用composition-api+ setup形式
配合jsx+hooks形式，按业务分离，逻辑更清晰，维护更方便。
下面主要通过对比jsx和template不同语法，来实现同样的功能
普通内容常量，写法是一样的
//jsx 写法
setup() {
return ()=>hello
}
//tempalte 写法
hello
jsx 统一使用大括号包裹变量，没有引号，比如 {age}
tempalte 内容使用双大括号包裹，属性变量使用冒号开头 如 {{age}}
{} 是jsx的万能的用法，里面可以写js的表达式，循环逻辑操作等等
//jsx 写法
setup() {
let age = 1
return ()=>{age} jsx和tempalte的函数区别如下：
jsx使用on+大驼峰形式(首字母大写)，template使用 @+短横线形式
jsx方法名需要使用 {}包裹起来，tempalte使用 " "包裹起来
用例1：
//jsx 写法
setup() {
const age= ref(0);
let inc = ()=>{
age.value++
}
return ()=> {age.value}
}
//tempalte 写法
{{age}}
jsx和 tempalte都一样：无自定义参数的函数不需要带()结尾
jsx在使用带参数的函数，则需要使用箭头函数包裹：{()=>fn(args)}
jsx需要借助withModifiers，实现.self,.stop等修饰符的效果
用例2：
//jsx 写法
import { withModifiers} from "vue";
...
setup() {
const age= ref(0);
let inc = ()=>{
age.value++
}
return ()=> (
<> //根 路径必须有节点，或者用<>代表fragment空节点
{age.value} //无自定义参数，不需要()
inc('test')}>{age.value} //有参数，需要()=>包裹
//withModifiers包裹vue修饰符
{age.value} //也可以再inc函数中使用e.stopPropagation()等
{ //键盘事件enter事件
//逻辑部分也可以写入js
if (ev.key === 'Enter') {
inc ();
}
}}>
)
}
//tempalte 写法
{{age}}
{{age}}
{{age}} //stop修饰符
{{age}} //键盘事件enter事件
vue3中 有两种ref,一种是指的ref()定义的双向绑定变量，另外则是 绑定在Dom标签的ref引用
对于ref()双向绑定变量，jsx不会向template自动处理
.value问题，需要手动加value
对于Dom标签的ref引用，jsx是直接用ref(null)变量，不需要加.value，tempalte则是用同名字符串
用例：
//jsx 写法
setup() {
const divRef=ref(null);
const age= ref(0);
return ()=>
(
//Dom标签的ref引用
{age.value} //ref()双向绑定变量
)
}
//tempalte 写法
//Dom标签的ref,使用同名字符串
{{age}} //ref()双向绑定变量,不需要.value
jsx中使用v-model或v-models代替template的v-model
组件只有一个v-model时，使用v-model语法
组件只有多个v-model时，可以使用v-model:xx语法
多个v-model时 也可以v-models语法,需传递一个二维数组(新版已经不推荐)
用例：
//jsx 写法
setup() {
const age= ref(0);
const gender =ref('')
return ()=>
(
jsx中使用 v-slots 代替 v-slot （简写#）
用例：
//jsx 写法
//方法一
const App = {
setup() {
const slots = {
default: () => A, //默认插槽
bar: () => B, //具名插槽
};
return () =>
//具名插槽，也叫 #bar
jsx中可使用js中的map循环来实现tempalte的v-for逻辑
用例：
//jsx 写法
setup() {
const arr= ref([{label:'1'},{label:'2'},{label:'3'}]);
return ()=>(
<>
{ arr.value.map(item=> {item.label} ) }
)
}
//tempalte 写法
{{item.label}}
jsx中可使用js中的if逻辑，三目运算，&&，||等来实现tempalte的v-if逻辑
用例：
//jsx 写法
setup() {
const show= ref(false);
return ()=>(
<>
{show && test vif} //使用&&运算
{!show && test velse}
)
}
setup() {
const show= ref(false);
return ()=>(
<>
{show.value ? 'test vif' : 'test velse'} //三目运算
)
}
setup() {
const show= ref(false);
const vif=()=>{
if(show) {
return test vif
}
return test velse
}
return ()=>(
<>
vif() //if条件函数
)
}
//tempalte 写法
test vif
test velse
用例：
//jsx 写法
setup() {
const show= ref(false);
return ()=>(
<>
test vshow //v-show
)
}
//tempalte 写法
test vshow
指令使用下划线,比如v-loading
用例：
//jsx 写法
setup() {
const isLoading= ref(true);
return ()=>(
<>
loading
)
}
//tempalte 写法
loading
以上就是“如何在vue3中使用jsx语法”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注创新互联行业资讯频道。
