vue3에서 jsx 구문을 사용하는 방법

Background

vue3 프로젝트는 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 양식 의 사용을 장려하고

jsx

+

hooks

양식과 협력하며, 비즈니스로 구분되고 논리가 더 명확합니다. 유지관리가 더욱 편리해졌습니다.

Grammar

다음은 주로 jsx와 템플릿의 서로 다른 구문을 비교하여 동일한 기능을 구현합니다.一丶일반 콘텐츠

일반 콘텐츠 상수는 같은 방식으로 작성됩니다.

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

이丶동적 변수
jsx <div age={age}>{age}</div>tempalte와 같이 따옴표 없이 중괄호를 사용하여 변수를 균일하게 묶습니다. 콘텐츠는 이중 중괄호로 묶기, <div :age="age">{{age}}<와 같은 <code>콜론으로 시작하는 속성 변수를 사용합니다. /div>

{}은 jsx의 보편적인 사용법입니다. js 표현식, 루프 논리연산 등을 작성할 수 있습니다.

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

세 가지 함수 이벤트

1.

jsx

과

tempalte

의 기능 차이점은 다음과 같습니다.

jsx는 on + big Camel Case 를 사용합니다. (첫 글자를 대문자로 시작), template은 @+dash

형식

을 사용합니다.

jsx

메서드 이름은

{}, tempalte로 묶어야 합니다. 는 " " Wrapping을 사용합니다.

사용 사례 1:

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

2. 매개변수 발전

jsx

과

tempalte

은 동일합니다.

사용자 정의 매개변수가 없는 함수

()로 끝날 필요가 없습니다.

jsx 매개변수가 있는 함수
를 사용하는 경우

화살표 함수 래퍼🎜를 사용해야 합니다. {()=>fn(args)}🎜 🎜jsx🎜.self, .stop 및 기타 수정자의 효과를 얻으려면 🎜withModifiers🎜를 사용해야 합니다. 🎜🎜🎜사용 사례 2: 🎜

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

🎜4개의 참조 바인딩 🎜🎜vue3에는 두 종류의 참조가 있는데, 하나는 🎜ref()에 의해 정의된 양방향 바인딩 변수🎜를 참조하고, 다른 하나는 🎜Dom 태그🎜🎜🎜🎜에 바인딩된 참조 참조입니다. () 양방향 바인딩 변수🎜, jsx는 이를 🎜template🎜로 보내지 않습니다. .value 문제를 자동으로 처리하므로 값을 수동으로 추가해야 합니다🎜🎜Dom 태그의 참조 참조🎜의 경우, jsx는 🎜ref(null) 변수🎜를 직접 사용하므로 .value를 추가할 필요가 없습니다. 🎜tempalte🎜는 동일한 이름의 🎜문자열🎜🎜🎜🎜사용 사례: 🎜

//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 -model 구문🎜🎜jsx는 🎜template🎜의 🎜v-model 🎜🎜🎜🎜대신 🎜v-model 또는 v-models🎜을 사용합니다. 구성 요소에 🎜하나의 v-model🎜만 있는 경우 v-model 구문을 사용하세요. 🎜When 구성 요소에 🎜여러 v-model🎜만 있으면 v-model:xx 구문🎜🎜🎜🎜을 사용할 수 있습니다. v-model이 여러 개 있으면🎜 🎜v-models🎜 구문도 사용할 수 있습니다. 두- 차원 배열(🎜새 버전은 더 이상 권장되지 않습니다🎜)🎜🎜사용 사례: 🎜

//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-슬롯 구문🎜🎜jsx에서 v-slot(약어) 대신 v-slot을 사용합니다 #) 🎜🎜사용 사례: 🎜

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

asven 丶 v-for syntax🎜🎜🎜jsx🎜는 js의 🎜map 루프를 사용하여 🎜 템포의 v-for v-for🎜logic🎜🎜use 케이스를 구현할 수 있습니다 : 🎜rrreee🎜 八 丶 v -if syntax🎜🎜🎜jsx🎜 js에서 🎜if logic🎜, 🎜ternary Operation🎜, 🎜&&, ||🎜 등을 사용하여 🎜tempalte의 v-if🎜logic🎜🎜을 구현할 수 있습니다. 사용 사례: 🎜rrreee🎜nine丶v-show 구문🎜🎜사용 사례: 🎜rrreee🎜10개 지침의 수정자 사용🎜🎜명령어는 🎜밑줄🎜을 사용합니다. 예를 들어 v-loading🎜사용 사례: 🎜rrreee

위 내용은 vue3에서 jsx 구문을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!