How to use jsx syntax in vue3

Background

vue3Promote the use of composition-api setup form in the project
Cooperate withjsx hooksForm, separated by business, the logic is clearer and maintenance is more convenient.

Grammar

The following mainly achieves the same function by comparing the different syntaxes of jsx and template

1. Ordinary content

Ordinary content constants are written in the same way

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

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

2. Dynamic variables

jsx Use curly braces to wrap variables without quotation marks, such as <div age={age}>{age}</div>
tempalte content is wrapped in double braces, attribute variables start with a colon Such as <div :age="age">{{age}}</div>

##{} is a universal usage of jsx, you can write in it

JS expression, Loop logicOperation, etc.

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

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

3. Function events

1. Basic usage

# The function differences between

##jsx

and tempalte are as follows:

• jsx

  Use on Camel case (first letter is capitalized), template uses @ dash form

• jsx

  The method name needs to be wrapped with {}, tempalte is wrapped with " "

Use case 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. Parameter advancement

jsx

and tempalte are the same: No self Functions that define parameters do not need to end with () jsx
When using functions with parameters , you need to use arrow functions Package: {()=>fn(args)}jsx
needs to use withModifiers to implement .self,.stopThe effect of modifiers such as

Use case 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>

Four, ref binding

There are two types in vue3 ref, one refers to the two-way binding variable

defined by

ref(), and the other is the ref reference bound to the Dom tag ## for

ref() two-way binding variable

, jsx will not automatically handle the

.value problem to template, you need to manually add value for the Dom tag The ref reference , jsx directly uses the
ref(null) variable , there is no need to add .value, tempalte uses the character with the same name String##Use case:

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

Use

v-model or v-models

in jsx When the

v-model

component instead of template has only one v-model

, use the v-model syntax

component When there are only

multiple v-model, you can use v-model:xx syntax
When there are multiple v-model

, you can also use

v- models

syntax, you need to pass a two-dimensional array ( is no longer recommended in the new version)Use example:

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

Sixth, v-slots syntax

Use v-slots instead of v-slot (abbreviated #) in jsx

Use case:

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

Seven, v-for syntax

jsx

You can use

map loop

in js to implement tempalte’s v-for logicUse case:

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

jsx

can be implemented using

if logic

, ternary operation, &&, || etc. in jstempalte’s v-ifLogicUse example:

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

9丶v-show syntax

Use example:

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

10.Instruction The modifier usage

directive uses

underscore

, such as v-loading

use case:

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

The above is the detailed content of How to use jsx syntax in vue3. For more information, please follow other related articles on the PHP Chinese website!