背景
vue3项目中 推进使用composition-api + setup 形式
配合jsx+hooks形式，按业务分离，逻辑更清晰，维护更方便；
语法
下面主要通过对比jsx和template不同语法，来实现同样的功能
一丶 普通内容
普通内容常量，写法是一样的
//jsx 写法
setup() {
return ()=><p type="email">hello</p>
}
//tempalte 写法
<tempalte>
<p type="email">hello</p>
</template>二丶 动态变量
jsx 统一使用大括号包裹变量，没有引号，比如 <div age={age}>{age}</div>
tempalte 内容使用双大括号包裹，属性变量使用冒号开头 如 <div :age="age">{{age}}</div>
{} 是jsx的万能的用法，里面可以写js的表达式，循环逻辑操作等等
//jsx 写法
setup() {
let age = 1
return ()=><div age={age}>{age}</div> //没有" "包裹，统一都是{}
}
//tempalte 写法
<tempalte>
<div :age="age">{{age}}</div>
</template>三丶 函数事件
1.基本用法
jsx和tempalte的函数区别如下：
- jsx使用on+大驼峰形式(
首字母大写)，template使用 @+短横线 形式 - jsx方法名需要使用 {} 包裹起来，tempalte使用 " " 包裹起来
用例1：
//jsx 写法
setup() {
const age= ref(0);
let inc = ()=>{
age.value++
}
return ()=> <div onClick={inc}>{age.value}</div>
}
//tempalte 写法
<tempalte>
<div @click="inc">{{age}}</div>
</template>2.参数进阶
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空节点
<div onClick={inc}>{age.value}</div> //无自定义参数，不需要()
<div onClick={()=>inc('test')}>{age.value}</div> //有参数，需要()=>包裹
//withModifiers包裹vue修饰符
<div onClick={withModifiers(inc, ["stop"])}>{age.value}</div> //也可以再inc函数中使用e.stopPropagation()等
<input onKeyup=={(ev) => { //键盘事件enter事件
//逻辑部分也可以写入js
if (ev.key === 'Enter') {
inc ();
}
}}></input >
</>
)
}
//tempalte 写法
<tempalte>
<div @click="inc"}>{{age}}</div>
<div @click="inc('test')"}>{{age}}</div>
<div @click.stop="inc"}>{{age}}</div> //stop修饰符
<input @keyup.enter="inc"}>{{age}}</input> //键盘事件enter事件
</template>
四丶 ref绑定
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 ()=>
(
<div ref={divRef} > //Dom标签的ref引用
<span>{age.value}</span> //ref()双向绑定变量
</div>
)
}
//tempalte 写法
<tempalte>
<div ref='divRef'> //Dom标签的ref,使用同名字符串
<span>{{age}}</span> //ref()双向绑定变量,不需要.value
</div>
</template>五丶 v-model语法
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 ()=>
(
<tz-input v-model={age} />
<tz-input v-model:foo={age} /> //v-model带修饰,推荐(v-model:修饰符)
<tz-input v-model={[age, "foo"]} /> //v-model带修饰 (新版不推荐)
//多个v-model
<tz-input //推荐(v-model:修饰符)
v-model:foo={age}
v-model:bar={gender}
/>
<tz-input
v-models={[ //使用v-models,传递二维数组 (新版不推荐)
[age, "foo"],
[gender, "bar"],
]}
/>
)
}
//tempalte 写法
<tempalte>
<tz-input v-model="age" />
<tz-input v-model.foo="age" /> //v-model带修饰
<tz-input
v-model.foo="age" //多个v-model
v-model.bar="gender"
/>
</template>
六丶 v-slots语法
jsx中使用 v-slots 代替 v-slot （简写#）
用例：
//jsx 写法
//方法一
const App = {
setup() {
const slots = {
default: () => <div>A</div>, //默认插槽
bar: () => <span>B</span>, //具名插槽
};
return () => <A v-slots={slots} />;
},
};
//方法二
const App = {
setup() {
return () => (
<>
<A>
{{
default: () => <div>A</div>, //此方法 默认default不能少
bar: () => <span>B</span>, //具名插槽
}}
</A>
<B>{() => "foo"}</B>
</>
);
},
};
//tempalte 写法
<tempalte>
<tempalte v-slot:bar> //具名插槽，也叫 #bar
<A />
</template>
<tempalte v-slot:default>
<A />
</template>
</template>
七丶 v-for语法
jsx中可使用js中的map循环来实现tempalte的v-for逻辑
用例：
//jsx 写法
setup() {
const arr= ref([{label:'1'},{label:'2'},{label:'3'}]);
return ()=>(
<>
{ arr.value.map(item=> <span key={item.label}>{item.label}</span> ) }
</>
)
}
//tempalte 写法
<tempalte>
<span v-for="item in arr" :key="item.label">{{item.label}}</span>
</template>八丶 v-if语法
jsx中可使用js中的if逻辑，三目运算，&&，|| 等来实现tempalte的v-if逻辑
用例：
//jsx 写法
setup() {
const show= ref(false);
return ()=>(
<>
{show && <span>test vif</span>} //使用&&运算
{!show && <span>test velse</span>}
</>
)
}
setup() {
const show= ref(false);
return ()=>(
<>
<span>{show.value ? 'test vif' : 'test velse'}</span> //三目运算
</>
)
}
setup() {
const show= ref(false);
const vif=()=>{
if(show) {
return <span>test vif</span>
}
return <span>test velse</span>
}
return ()=>(
<>
vif() //if条件函数
</>
)
}
//tempalte 写法
<tempalte>
<span v-if="show">test vif</span>
<span v-else>test velse</span>
</template>
九丶 v-show语法
用例：
//jsx 写法
setup() {
const show= ref(false);
return ()=>(
<>
<span v-show={show.value}> test vshow</span> //v-show
</>
)
}
//tempalte 写法
<tempalte>
<span v-show="show"> test vshow </span>
</template>十丶 指令的修饰符用法
指令使用下划线 ,比如v-loading
用例：
//jsx 写法
setup() {
const isLoading= ref(true);
return ()=>(
<>
<span v-loading_fullscreen_lock={isLoading}> loading </span>
</>
)
}
//tempalte 写法
<tempalte>
<span v-loading.fullscreen.lock="isLoading"> loading </span>
</template>到此这篇关于在vue3中使用jsx语法的文章就介绍到这了,更多相关vue3使用jsx语法内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
