background
vue3Promote use in the projectcomposition-api + setupform
Cooperatejsx+hooksForm, separate by business, clearer logic and more convenient maintenance;
grammar
The following mainly passesComparing different syntaxes of jsx and templateto achieve the same function
1. Ordinary content
Ordinary content constants, the writing method is the same
//jsx writing methodsetup() {
return ()=><p type="email">hello</p>
}
//template writing method <tempalte>
<p type="email">hello</p>
</template>2. Dynamic variables
jsx Use braces to wrap variables, no quotes, e.g.<div age={age}>{age}</div>
template content usageDouble braces package，Attribute variables start with colonlike<div :age="age">{{age}}</div>
{} is a universal usage of jsx, which can be written in itjs expression，Loop logicOperations and so on
//jsx writing methodsetup() {
let age = 1
return ()=><div age={age}>{age}</div> //No " " package, unified is {}}
//template writing method <tempalte>
<div :age="age">{{age}}</div>
</template>3. Function events
1. Basic usage
jsxandtempalteThe functions are different as follows:
-
jsxuseon+big hump form(
Capitalization of the initial letter)，templateuse@+short horizontal lineform - jsxMethod name needs to be used{}Wrap it up,tempalteuse" "Wrap up
Use Case 1:
//jsx writing methodsetup() {
const age= ref(0);
let inc = ()=>{
++
}
return ()=> <div onClick={inc}>{}</div>
}
//template writing method <tempalte>
<div @click="inc">{{age}}</div>
</template>2. Parameters advanced
jsxandtempalteAll the same:No custom parametersFunctions ofNo need to end with()
jsxIn useFunctions with parameters, you need to useArrow function wrap ：{()=>fn(args)}
jsxNeed helpwithModifiers,accomplish.self,.stopEffects of modifiers
Use Case 2:
//jsx writing methodimport { withModifiers} from "vue";
...
setup() {
const age= ref(0);
let inc = ()=>{
++
}
return ()=> (
<> //The root path must have a node, or use <> to represent the fragment empty node <div onClick={inc}>{}</div> //No custom parameters, no () is required <div onClick={()=>inc('test')}>{}</div> //There are parameters, need ()=>Package //withModifiers wrap vue modifier <div onClick={withModifiers(inc, ["stop"])}>{}</div> //You can also use() and so on inc function <input onKeyup=={(ev) => { //Keyboard event enter event //The logical part can also be written to js if ( === 'Enter') {
inc ();
}
}}></input >
</>
)
}
//template writing method <tempalte>
<div @click="inc"}>{{age}}</div>
<div @click="inc('test')"}>{{age}}</div>
<div @="inc"}>{{age}}</div> //stop modifier <input @="inc"}>{{age}}</input> //Keyboard event enter event </template>
4. Ref binding
There are two types of refs in vue3, one refers toBidirectional binding variable defined by ref(), and in addition, it is bound toDom tag ref reference
forref() two-way binding variable, jsx will nottemplateAutomatic processing
.valueProblem, you need to manually add value
forDom tag ref reference, jsx is used directlyref(null) variable, no need to add.value，tempalteIt's useString of the same name
Use cases:
//jsx writing methodsetup() {
const divRef=ref(null);
const age= ref(0);
return ()=>
(
<div ref={divRef} > //Ref reference of Dom tag <span>{}</span> //ref() Bidirectional binding variable </div>
)
}
//template writing method <tempalte>
<div ref='divRef'> //Dom tag ref, use string with the same name <span>{{age}}</span> //ref() two-way binding variable, no need for .value </div>
</template>V. v-model syntax
Used in jsxv-model or v-modelsreplacetemplateofv-model
Components onlyA v-modelWhen using v-model syntax
Components onlyMultiple v-modelsWhen using v-model:xx syntax
Multiple v-modelsIt's OK whenv-modelsSyntax, you need to pass a two-dimensional array (The new version is no longer recommended)
Use cases:
//jsx writing methodsetup() {
const age= ref(0);
const gender =ref('')
return ()=>
(
<tz-input v-model={age} />
<tz-input v-model:foo={age} /> //v-model with modification, recommended (v-model: modifier) <tz-input v-model={[age, "foo"]} /> //v-model with modification (new version is not recommended)
//Multiple v-models <tz-input //Recommended (v-model: modifier) v-model:foo={age}
v-model:bar={gender}
/>
<tz-input
v-models={[ //Use v-models to pass a two-dimensional array (not recommended for the new version) [age, "foo"],
[gender, "bar"],
]}
/>
)
}
//template writing method <tempalte>
<tz-input v-model="age" />
<tz-input ="age" /> //v-model with decoration <tz-input
="age" //Multiple v-models ="gender"
/>
</template>
6. v-slots syntax
Use v-slots instead of v-slot in jsx (abbreviation#)
Use cases:
//jsx writing method//Method 1const App = {
setup() {
const slots = {
default: () => <div>A</div>, //Default slot bar: () => <span>B</span>, //Name slot };
return () => <A v-slots={slots} />;
},
};
//Method 2const App = {
setup() {
return () => (
<>
<A>
{{
default: () => <div>A</div>, //This method cannot be used for default default bar: () => <span>B</span>, //Name slot }}
</A>
<B>{() => "foo"}</B>
</>
);
},
};
//template writing method <tempalte>
<tempalte v-slot:bar> //Name slot, also called #bar <A />
</template>
<tempalte v-slot:default>
<A />
</template>
</template>
7. v-for syntax
jsxYou can use js inMap loopTo achievetemplate v-forlogic
Use cases:
//jsx writing methodsetup() {
const arr= ref([{label:'1'},{label:'2'},{label:'3'}]);
return ()=>(
<>
{ (item=> <span key={}>{}</span> ) }
</>
)
}
//template writing method <tempalte>
<span v-for="item in arr" :key="">{{}}</span>
</template>8. v-if syntax
jsxYou can use js inif logic，Three-mean operation，&&，||Wait for implementationtemplate's v-iflogic
Use cases:
//jsx writing methodsetup() {
const show= ref(false);
return ()=>(
<>
{show && <span>test vif</span>} //Use && operation {!show && <span>test velse</span>}
</>
)
}
setup() {
const show= ref(false);
return ()=>(
<>
<span>{ ? 'test vif' : 'test velse'}</span> //Three-point operation </>
)
}
setup() {
const show= ref(false);
const vif=()=>{
if(show) {
return <span>test vif</span>
}
return <span>test velse</span>
}
return ()=>(
<>
vif() // if conditional function </>
)
}
//template writing method <tempalte>
<span v-if="show">test vif</span>
<span v-else>test velse</span>
</template>
9. v-show syntax
Use cases:
//jsx writing methodsetup() {
const show= ref(false);
return ()=>(
<>
<span v-show={}> test vshow</span> //v-show
</>
)
}
//template writing method <tempalte>
<span v-show="show"> test vshow </span>
</template>10. Use of modifiers for instructions
Command usageUnderline, for example, v-loading
Use cases:
//jsx writing methodsetup() {
const isLoading= ref(true);
return ()=>(
<>
<span v-loading_fullscreen_lock={isLoading}> loading </span>
</>
)
}
//template writing method <tempalte>
<span ="isLoading"> loading </span>
</template>This is the end of this article about using jsx syntax in vue3. For more related content on using jsx syntax for vue3, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!