宜宾网站建设公司

如何在vue3中使用jsx语法

今天小编给大家分享一下如何在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的函数区别如下：

    用例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}  //无自定义参数，不需要()
    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事件
  

    四丶 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 ()=>
   (
      //Dom标签的ref引用
        {age.value}   //ref()双向绑定变量
     
   ) 
}

//tempalte 写法
  
       //Dom标签的ref,使用同名字符串
        {{age}}   //ref()双向绑定变量,不需要.value
     
  

    五丶 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 ()=>
   (
        
       //v-model带修饰,推荐(v-model:修饰符)
       //v-model带修饰 (新版不推荐)

     //多个v-model
       
     
   ) 
}

//tempalte 写法
  
     
       //v-model带修饰
     
  

    六丶 v-slots语法

    jsx中使用 v-slots 代替 v-slot （简写#）

    用例：

    //jsx 写法
//方法一
const App = {
  setup() {
    const slots = {
      default: () => 
    A
    ,     //默认插槽
      bar: () => B,       //具名插槽
    };
    return () => ;
  },
};
//方法二
const App = {
  setup() {
    return () => (
      <>
        
          {{
            default: () => 
    A
    ,   //此方法 默认default不能少
            bar: () => B,   //具名插槽
          }}
            
        {() => "foo"}
      
    );
  },
};

//tempalte 写法
 
     //具名插槽，也叫 #bar
     
   
   
     
   
 

    七丶 v-for语法

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

    八丶 v-if语法

    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 
  

    九丶 v-show语法

    用例：

    //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语法”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注创新互联行业资讯频道。


    本文标题：如何在vue3中使用jsx语法
    当前地址：http://hbruida.cn/article/jipido.html

    其他资讯