如何在vue3中使用jsx語法

今天小編給大家分享一下如何在vue3中使用jsx語法的相關(guān)知識點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

創(chuàng)新互聯(lián)服務(wù)項目包括雙鴨山網(wǎng)站建設(shè)、雙鴨山網(wǎng)站制作、雙鴨山網(wǎng)頁制作以及雙鴨山網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，雙鴨山網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到雙鴨山省份的部分城市，未來相信會繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

背景

vue3項目中推進(jìn)使用composition-api+ setup形式
配合jsx+hooks形式，按業(yè)務(wù)分離，邏輯更清晰，維護(hù)更方便。

語法

下面主要通過對比jsx和template不同語法，來實(shí)現(xiàn)同樣的功能

一丶普通內(nèi)容

普通內(nèi)容常量，寫法是一樣的

//jsx 寫法
setup() {
  return ()=><p type="email">hello</p>
}

//tempalte 寫法
  <tempalte>
     <p type="email">hello</p>
  </template>

二丶動態(tài)變量

jsx 統(tǒng)一使用大括號包裹變量，沒有引號，比如 <div age={age}>{age}</div>
tempalte 內(nèi)容使用雙大括號包裹，屬性變量使用冒號開頭 如 <div :age="age">{{age}}</div>

{} 是jsx的萬能的用法，里面可以寫js的表達(dá)式，循環(huán)邏輯操作等等

//jsx 寫法
setup() {
  let age = 1           
  return ()=><div age={age}>{age}</div> //沒有" "包裹，統(tǒng)一都是{}
}

//tempalte 寫法
  <tempalte>
     <div :age="age">{{age}}</div>
  </template>

三丶函數(shù)事件

1.基本用法

jsx和tempalte的函數(shù)區(qū)別如下：

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.參數(shù)進(jìn)階

jsx和 tempalte都一樣：無自定義參數(shù)的函數(shù)不需要帶()結(jié)尾
jsx在使用帶參數(shù)的函數(shù)，則需要使用箭頭函數(shù)包裹： {()=>fn(args)}
jsx需要借助withModifiers，實(shí)現(xiàn).self ,.stop等修飾符的效果

用例2：

//jsx 寫法
import { withModifiers} from "vue";
...
setup() {
  const age= ref(0);
  let inc = ()=>{
      age.value++
   }
  return ()=> (
  <> //根 路徑必須有節(jié)點(diǎn)，或者用<>代表fragment空節(jié)點(diǎn)
    <div onClick={inc}>{age.value}</div>  //無自定義參數(shù)，不需要()
    <div onClick={()=>inc('test')}>{age.value}</div>  //有參數(shù)，需要()=>包裹
    //withModifiers包裹vue修飾符
    <div onClick={withModifiers(inc, ["stop"])}>{age.value}</div> //也可以再inc函數(shù)中使用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標(biāo)簽的ref引用

對于ref()雙向綁定變量，jsx不會向template自動處理.value問題，需要手動加value
對于Dom標(biāo)簽的ref引用，jsx是直接用ref(null)變量，不需要加.value，tempalte則是用同名字符串

用例：

//jsx 寫法
setup() {
  const divRef=ref(null);
  const age= ref(0);  
  return ()=>
   (
     <div ref={divRef} > //Dom標(biāo)簽的ref引用
        <span>{age.value}</span>   //ref()雙向綁定變量
     </div>
   ) 
}

//tempalte 寫法
  <tempalte>
     <div ref='divRef'>  //Dom標(biāo)簽的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語法,需傳遞一個二維數(shù)組(新版已經(jīng)不推薦)

用例：

//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,傳遞二維數(shù)組 (新版不推薦)          
         [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>,     //默認(rèn)插槽
      bar: () => <span>B</span>,       //具名插槽
    };
    return () => <A v-slots={slots} />;
  },
};
//方法二
const App = {
  setup() {
    return () => (
      <>
        <A>
          {{
            default: () => <div>A</div>,   //此方法 默認(rèn)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循環(huán)來實(shí)現(xiàn)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邏輯，三目運(yùn)算，&&，||等來實(shí)現(xiàn)tempalte的v-if邏輯

用例：

//jsx 寫法
setup() {
  const show= ref(false);      
  return ()=>(   
     <>
     {show && <span>test vif</span>}      //使用&&運(yùn)算    
     {!show && <span>test velse</span>}
     </>
    ) 
}

setup() {
  const show= ref(false);      
  return ()=>(   
     <>
      <span>{show.value ? 'test vif' : 'test velse'}</span>    //三目運(yùn)算   
     </>
    ) 
}

setup() {
  const show= ref(false); 
  const vif=()=>{
     if(show) {
        return  <span>test vif</span> 
     }
     return  <span>test velse</span> 
  }   
  return ()=>(   
     <>
        vif()   //if條件函數(shù)
     </>
    ) 
}

//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語法”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

標(biāo)題名稱：如何在vue3中使用jsx語法
瀏覽地址：http://www.rwnh.cn/article10/jipido.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、靜態(tài)網(wǎng)站、云服務(wù)器、營銷型網(wǎng)站建設(shè)、網(wǎng)站制作、微信小程序

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线