今天小编给大家分享一下如何在vue3中使用jsx语法的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
背景
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>