ホームページ >ウェブフロントエンド >Vue.js >vue3でjsx構文を使用する方法
vue3でjsx構文を使用する方法
- WBOY転載
- 2023-05-12 12:46:121649ブラウズ
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 中括弧を使用して変数を囲みます 引用符なしで、例: 53ec08d205260096759c8a3dcf84462b{age}16b28748ea4df4d9c2150843fecfba68テンプレート コンテンツは
二重中括弧 で囲まれ、属性変数は次のように始まります。コロン 8d5412f9a5d7cc1c9246b09508402009{{age}}16b28748ea4df4d9c2150843fecfba68
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 パラメータを定義する関数を参照し、もう 1 つはは () で終わる必要はありません jsx パラメータを指定した 関数を使用する場合 、 アロー関数を使用する必要がありますパッケージ:
ref() で定義された双方向バインディング変数
{()=>fn(args)}jsx は withModifiers を使用する必要があります を実装するには.self,
.stop などの修飾子の効果 使用例 2:<pre class="brush:js;">//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></pre>Four, ref bindingvue3 ref には 2 つのタイプがあります。1 つは
にバインドされた ref 参照です。
ref() 双方向バインディング変数の Dom タグ
## では、jsx は template# に対する .value の問題を自動的に処理しません。 ##、
Dom タグの値を手動で追加する必要があります。 ref 参照ではなく jsx で、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='divRef'> //Dom标签的ref,使用同名字符串 <span>{{age}}</span> //ref()双向绑定变量,不需要.value </div> </template>五丶v-モデル構文v-model
v-model または v-models
を使用するtemplateには
1 つの v-modelしかありません。v-model 構文 コンポーネントを使用します。 複数の v-model しかない場合は、v-model:xx を使用できます。構文
複数の v-modelがある場合、6 番目、v-slots 構文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>
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 ? 'test vif' : 'test velse'}</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 サイトの他の関連記事を参照してください。