Bagaimana untuk menggunakan sintaks jsx dalam vue3

Latar Belakang

vue3 Galakkan penggunaan komposisi-api + persediaan borang
dalam projek Digabungkan dengan format jsx+cangkuk, dipisahkan oleh perniagaan, logiknya lebih jelas dan penyelenggaraan lebih mudah.

Sintaks

Yang berikut terutamanya menggunakan untuk membandingkan sintaks yang berbeza bagi jsx dan templat untuk mencapai fungsi yang sama

Satu kandungan biasa

Pemalar kandungan biasa ditulis dengan cara yang sama

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

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

2. Pembolehubah dinamik

jsx 统一使用大括号包裹变量, tanpa tanda petikan, seperti 53ec08d205260096759c8a3dcf84462b{age}16b28748ea4df4d9c2150843fecfba68
kandungan tempalte menggunakan 双大括号包裹, 属性变量使用冒号开头 seperti 8f6404fe4a2a5802333026abb7ebacfb{{age}}16b28748ea4df4d9c2150843fecfba68

{} ialah penggunaan universal jsx, di mana anda boleh menulis ungkapan js, logik gelung Operasi, dsb.

//jsx 写法
setup() {
  let age = 1           
  return ()=><div age={age}>{age}</div> //没有" "包裹，统一都是{}
}

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

Tiga peristiwa fungsi

1. Penggunaan asas

jsx dan. tempaltePerbezaan fungsi adalah seperti berikut:

• jsx menggunakan pada+sarung unta besar (首字母大写), templateGunakan @+dash dalam bentuk

• jsxNama kaedah perlu dibalut dengan {}, tempalteGunakan " " untuk membalut

Kes penggunaan 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. Kemajuan parameter

jsx dan tempalte adalah sama: Fungsi tanpa parameter tersuai tidak perlu untuk mengakhiri dengan ()
jsx menggunakan fungsi dengan parameter, anda perlu menggunakan pembungkus fungsi anak panah: {()=>fn(args)}
jsx perlu menggunakan withModifiers , untuk mencapai kesan .self, .stop dan pengubah suai lain

Use case 2:

rreee

empat pengikatan ref

tersedia dalam vue3 Terdapat dua jenis ref, satu merujuk kepada pembolehubah pengikatan dua hala yang ditakrifkan oleh ref(), dan satu lagi ialah rujukan ref terikat pada teg Dom

Untuk ref() pembolehubah mengikat dua hala , jsx tidak akan mengendalikan masalah secara automatik dengan templat.value, dan anda perlu menambah nilai secara manual
untuk rujukan ref teg Dom , jsx terus menggunakan pembolehubah ref(null) tanpa menambah .value , dan tempalte menggunakan rentetan dengan nama yang sama

Kes penggunaan:

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

五丶 sintaks model v

Gunakan v-model atau v-model dan bukannya template dalam jsx Apabila v-model

komponen mempunyai hanya satu v-model, gunakan sintaks v-model
komponen hanya berbilang v- Apabila model, anda boleh menggunakan sintaks v-model:xx

Apabila anda mempunyai berbilang v-model, anda juga boleh menggunakan sintaks v-models, yang perlu diluluskan Tatasusunan dua dimensi (The versi baharu tidak lagi disyorkan)

Kes penggunaan:

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

Sintaks enam v-slot

Gunakan v-slot sebaliknya dalam jsx v-slot (singkatan # )

Kes penggunaan:

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

Tujuh v-untuk sintaks

jsx boleh menggunakan dalam gelung peta js untuk melaksanakan logik v-for tempalte

kes penggunaan:

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

sintaks lapan v-if

jsx boleh menggunakan jika logik , operasi ternari , &&, ||, dsb. dalam js untuk melaksanakan v-jikatempalte 🎜>Logik

Kes penggunaan:

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

Sintaks rancangan sembilan丶v

Kes penggunaan:

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

Penggunaan pengubah suai arahan sepuluh丶

Arahan penggunaan

garis bawah, seperti pemuatan v kes penggunaan:

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

Atas ialah kandungan terperinci Bagaimana untuk menggunakan sintaks jsx dalam vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!