怎麼在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(&#39;test&#39;)}>{age.value}</div>  //有参数，需要()=>包裹
    //withModifiers包裹vue修饰符
    <div onClick={withModifiers(inc, ["stop"])}>{age.value}</div> //也可以再inc函数中使用e.stopPropagation()等
    <input onKeyup=={(ev) => {     //键盘事件enter事件 
        //逻辑部分也可以写入js
        if (ev.key === &#39;Enter&#39;) {
           inc ();
        }
     }}></input > 
  </>
 )
}

//tempalte 写法
  <tempalte>
     <div @click="inc"}>{{age}}</div>
     <div @click="inc(&#39;test&#39;)"}>{{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=&#39;divRef&#39;>  //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 ? &#39;test vif&#39; : &#39;test velse&#39;}</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>

以上是怎麼在vue3中使用jsx語法的詳細內容。更多資訊請關注PHP中文網其他相關文章！