So verwenden Sie die jsx-Syntax in vue3

Hintergrund

vue3-Projekt fördert die Verwendung von 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)变量，不需要加.valuecomposition-api + setup-Formular kooperiert mit

jsx

+

hooks

-Formular, getrennt nach Geschäft, klarere Logik, Wartung Bequemer.

Grammatik

Das Folgende implementiert hauptsächlich dieselbe Funktion, indem die verschiedenen Syntaxen von jsx und template verglichen werden一丶Normaler Inhalt

Normale Inhaltskonstanten werden auf die gleiche Weise geschrieben

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

二丶Dynamische Variablen
jsx Verwenden Sie geschweifte Klammern, um Variablen einheitlich zu umschließen, ohne Anführungszeichen, wie zum Beispiel <div age={age}>{age}</div>tempalte Der Inhalt verwendet Umbruch in doppelte geschweifte Klammern, Attributvariablen beginnen mit Doppelpunkt wie <div :age="age">{{age}}< /div>

{} ist eine universelle Verwendung von jsx. Sie können js-Ausdrücke, SchleifenlogikOperationen usw.rrree

drei Funktionsereignisse

1 schreiben

Die Funktionsunterschiede zwischen

jsx

und

tempalte

sind wie folgt:

jsx verwendet on + Big Camel Case (Großschreiben Sie den ersten Buchstaben), template verwendet die Form @+Bindestrich

jsx

Der Methodenname muss mit

{}

, tempalte umschlossen werden verwendet " " verpackt

Anwendungsfall 1:

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

2. Parametererweiterung

jsx

und

tempalte

sind gleich:

Funktionen ohne benutzerdefinierte Parameter

müssen nicht mit () enden

jsx

Bei der Verwendung von Funktionen mit Parametern müssen Sie
Pfeilfunktions-Wrapper

verwenden: {()=>fn(args)}🎜 🎜jsx🎜muss 🎜withModifiers🎜 verwenden, um den Effekt von .self, .stop und anderen Modifikatoren zu erzielen 🎜🎜🎜Anwendungsfall 2: 🎜

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

🎜Vier Ref-Bindungen 🎜🎜Es gibt zwei Arten von Referenzen in vue3, eine bezieht sich auf die durch 🎜ref() definierte bidirektionale Bindungsvariable 🎜 und die andere ist die Referenzreferenz, die an das 🎜Dom-Tag gebunden ist 🎜🎜🎜🎜Für die 🎜ref () Zwei-Wege-Bindungsvariable 🎜, jsx sendet sie nicht an 🎜template🎜 Behandeln Sie das Problem .value automatisch. Sie müssen den Wert manuell hinzufügen🎜Für die Referenzreferenz🎜 des 🎜Dom-Tags, jsx verwendet direkt die Variable 🎜ref(null)🎜, kein Hinzufügen von .value erforderlich, 🎜tempalte🎜 verwendet den gleichnamigen 🎜String🎜🎜🎜🎜Anwendungsfall: 🎜

//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 -Modellsyntax🎜🎜jsx verwendet 🎜V-Modell oder V-Modelle🎜 anstelle des 🎜V-Modells von 🎜template🎜🎜🎜🎜🎜Wenn die Komponente nur 🎜ein V-Modell🎜 hat, verwenden Sie die V-Modell-Syntax 🎜Wann Die Komponente verfügt nur über 🎜mehrfache V-Modelle🎜. Sie können die Syntax „v-model:xx“ verwenden. Wenn mehrere V-Modelle vorhanden sind, können Sie auch die Syntax „V-Modelle“ verwenden. dimensionales Array (🎜Die neue Version wird nicht mehr empfohlen🎜)🎜🎜Anwendungsfall: 🎜

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

🎜Sechste V-Slots-Syntax🎜🎜Verwenden Sie V-Slots anstelle von V-Slot (Abkürzung) in jsx #) 🎜🎜Anwendungsfall: 🎜

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

🎜seven丶v-for-Syntax🎜🎜🎜jsx🎜 kann die 🎜map-Schleife🎜 in js verwenden, um 🎜tempaltes v-for-Logik🎜🎜 zu implementieren. Anwendungsfall: 🎜

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

🎜八丶v -If.-Syntax🎜🎜 🎜jsx🎜 kann die 🎜if-Logik🎜, die 🎜ternäre Operation🎜, 🎜&&, ||🎜 usw. in js verwenden, um 🎜tempaltes v-if-Logik🎜🎜Anwendungsfall: 🎜rrreee🎜nine丶v-show-Syntax🎜🎜Verwenden Fall: 🎜rrreee🎜Modifikatorverwendung von zehn丶Anweisungen🎜🎜Anweisungen verwenden 🎜Unterstrich🎜, z. B. V-Loading🎜Anwendungsfall: 🎜rrreee

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die jsx-Syntax in vue3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!