vue3でjsx構文を使用する方法

Background

vue3composition-api setup フォームの使用を促進するプロジェクト
Cooperate withjsx hooksForm をビジネスごとに分離すると、ロジックがより明確になり、メンテナンスがより便利になります。

文法

以下は主に、jsxとテンプレートの異なる構文を比較することで同じ機能を実現しています

#1. 通常の内容

通常のコンテンツ定数は同じ方法で記述されます

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

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

2. 動的変数

jsx

中括弧を使用して変数を囲みます 引用符なしで、例:

{age}

テンプレート コンテンツは
二重中括弧 で囲まれ、属性変数は次のように始まります。コロン

{{age}}

##{} などは jsx の汎用的な使用法です

JS式

、ループロジック操作など

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

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

3.関数イベント

1.基本使用法

jsx

と tempalte の機能の違いは次のとおりです。

• jsx

  キャメルケース では ## を使用します (最初の文字は大文字になります)、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

No self パラメータを定義する関数

は () で終わる必要はありません jsx パラメータを指定した 関数を使用する場合 、 アロー関数を使用する必要がありますパッケージ:
{()=>fn(args)}jsx は withModifiers を使用する必要があります を実装するには .self,
.stop などの修飾子の効果 使用例 2: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>//jsx 写法 import { withModifiers} from &quot;vue&quot;; ... setup() { const age= ref(0); let inc = ()=&gt;{ age.value++ } return ()=&gt; ( &lt;&gt; //根 路径必须有节点，或者用&lt;&gt;代表fragment空节点 &lt;div onClick={inc}&gt;{age.value}&lt;/div&gt; //无自定义参数，不需要() &lt;div onClick={()=&gt;inc(&amp;#39;test&amp;#39;)}&gt;{age.value}&lt;/div&gt; //有参数，需要()=&gt;包裹 //withModifiers包裹vue修饰符 &lt;div onClick={withModifiers(inc, [&quot;stop&quot;])}&gt;{age.value}&lt;/div&gt; //也可以再inc函数中使用e.stopPropagation()等 &lt;input onKeyup=={(ev) =&gt; { //键盘事件enter事件 //逻辑部分也可以写入js if (ev.key === &amp;#39;Enter&amp;#39;) { inc (); } }}&gt;&lt;/input &gt; &lt;/&gt; ) } //tempalte 写法 &lt;tempalte&gt; &lt;div @click=&quot;inc&quot;}&gt;{{age}}&lt;/div&gt; &lt;div @click=&quot;inc(&amp;#39;test&amp;#39;)&quot;}&gt;{{age}}&lt;/div&gt; &lt;div @click.stop=&quot;inc&quot;}&gt;{{age}}&lt;/div&gt; //stop修饰符 &lt;input @keyup.enter=&quot;inc&quot;}&gt;{{age}}&lt;/input&gt; //键盘事件enter事件 &lt;/template&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>Four, ref bindingvue3 ref には 2 つのタイプがあります。1 つは

ref() で定義された双方向バインディング変数

を参照し、もう 1 つは

にバインドされた ref 参照です。

ref() 双方向バインディング変数

の Dom タグ

## では、jsx は template# に対する .value の問題を自動的に処理しません。 ##、

Dom タグの値

を手動で追加する必要があります。 ref 参照

、jsx は ref(null) 変数 を直接使用します。## を追加する必要はありません。 #.value、tempalte は、同じ名前の 文字を使用します String
##ユースケース:

//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-モデル構文v-model

コンポーネントが

ではなく jsx で

v-model または v-models

を使用するtemplate

には

1 つの v-model

しかありません。v-model 構文 コンポーネントを使用します。 複数の v-model しかない場合は、v-model:xx を使用できます。構文

複数の v-model

がある場合、

v-models 構文を使用することもできます。2 次元配列 ( は新しいバージョンでは推奨されません
)使用例:

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

6 番目、v-slots 構文

v- の代わりに v-slots を使用します。 jsx のスロット (# の省略形) ユースケース:

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

jsx

map ループを使用できます

tempalte の v-for

ロジックを実装するための

js

ユースケース:

//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 は、jstempalte の v-ifLogic で 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>

9丶v-show syntax使用例:

//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.命令 修飾子の使用法 ディレクティブは underscore

を使用します (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 中国語 Web サイトの他の関連記事を参照してください。