当前位置：首页 > 文章列表 > 文章 > 前端 > 怎么在vue3中使用jsx语法

怎么在vue3中使用jsx语法

来源：亿速云 2024-04-01 16:30:38 0浏览收藏

各位小伙伴们，大家好呀！看看今天我又给各位带来了什么文章？本文标题是《怎么在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}

//没有" "包裹，统一都是{} } //tempalte 写法 {{age}}

三丶函数事件

1.基本用法

jsx和tempalte的函数区别如下：

jsx使用on+大驼峰形式(首字母大写)，template使用 @+短横线 形式
jsx方法名需要使用 {} 包裹起来，tempalte使用 " " 包裹起来

用例1：

//jsx 写法
setup() {
  const age= ref(0);
  let inc = ()=>{
      age.value++
   }
  return ()=> {age.value}

} //tempalte 写法 {{age}}

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空节点
    {age.value}

//jsx 写法 setup() { const divRef=ref(null); const age= ref(0); return ()=> ( //Dom标签的ref引用 {age.value} //ref()双向绑定变量 ) } //tempalte 写法 //Dom标签的ref,使用同名字符串 {{age}} //ref()双向绑定变量,不需要.value

//jsx 写法 setup() { const age= ref(0); const gender =ref('') return ()=> (

//v-model带修饰,推荐(v-model:修饰符) //v-model带修饰 (新版不推荐) //多个v-model

) } //tempalte 写法

//v-model带修饰

//jsx 写法 //方法一 const App = { setup() { const slots = { default: () =>

, //默认插槽 bar: () => B, //具名插槽 }; return () => ; }, }; //方法二 const App = { setup() { return () => ( <> {{ default: () =>

, //此方法默认default不能少 bar: () => B, //具名插槽 }} {() => "foo"} ); }, }; //tempalte 写法

//具名插槽，也叫 #bar

//jsx 写法 setup() { const arr= ref([{label:'1'},{label:'2'},{label:'3'}]); return ()=>( <> { arr.value.map(item=> {item.label} ) } ) } //tempalte 写法

//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

//jsx 写法 setup() { const isLoading= ref(true); return ()=>( <> loading ) } //tempalte 写法