«

如何在vue3中使用jsx语法

时间:2024-4-23 09:40     作者:韩俊     分类: Javascript


今天小编给大家分享一下如何在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.基本用法

    jsxtempalte的函数区别如下:

    • 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.参数进阶

    jsxtempalte都一样:无自定义参数的函数不需要带()结尾
    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代替templatev-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>

    标签: javascript vue

    热门推荐