Using JSX Concise Syntax in Vue3

1 Text interpolation


Text interpolation in Vue uses double curly braces by default:

becomes single curly braces in JSX:
const name = 'Vue DevUI'

Like text interpolation in Vue template syntax, any valid JavaScript expression is supported inside curly braces, such as: 2 + 2, user.firstName, formatName(user), etc.

2 Conditional rendering


jsx itself is also a conditional expression and no longer needs to use the v-if directive.
2.1 Using if/else
const element = (name) => {
if (name) {
return Hello, { name }
} else {
return Hello, Stranger
}
}


2.2 Using the ternary operator
const element = icon ? : null;

The above code is equivalent to:
const element = icon && ;

3 List rendering
List rendering can directly use the map method of the JS array, without using the v-for instruction.
const data = [{
id: 1,
title: 'General'
}, {
id: 2,
title: 'Navigation'
}]

const element = data.map(item => {
return
{ item.title }

})

4 Label property binding
Attribute binding is also wrapped in curly braces and does not require the use of the v-bind directive.
const href = 'https://devui.design/'

const element = DevUI Design

5 class class name binding
Just use the JS template string directly.
const element =


Arrays can also be used:
const element =
[
'devui-accordion-item-title',
disabled && 'disabled'
]
}
>Item


6 style style binding
Style bindings require the use of double curly braces.
const width = '100px'

const element =

7 Event binding
Binding events also use curly brackets. Note that the on prefix should be added before the event name. For example, the click event should be written as onClick, and the mouseenter event should be written as onMouseenter.
const confirm = () => {
// confirm submission
}



If you want to take parameters, you need to use arrow functions to wrap:
const confirm = (name) => {
// confirm submission
}



7.1 Event modifiers
Adding modifiers to events in jsx requires the withModifiers method.
import { withModifiers, defineComponent, ref } from 'vue'

const App = defineComponent({
setup() {
const count = ref(0);

const inc = () => {
count.value++;
};

return () => (
{ count.value }

);
},
})


Note: ref variables in Vue templates can be destructed directly, but not in jsx, you need to remember to add .value, such as { count.value } above.

8 v-model two-way binding

bind modelValue

This case is simpler.
JSX writing:


SFC writing:



Bind custom name

For example, when binding visible, the syntax of v-model:visible cannot be used directly in JSX. You need to pass in an array [menuShow.value, 'visible']. The second parameter of the array is the custom name to be bound.
JSX writing:


SFC writing:


9 slot slot
There is no tag in jsx, double curly braces are required to define a slot.
If it is a named slot, change default to the name of a named slot, such as mySlot, then use ctx.slots.mySlot?.().
The slot is obtained from the second parameter ctx of setup and does not need to be prefixed with $.
import { defineComponent } from 'vue'

export default defineComponent({
setup(props, { slots }) { // logic
return() => {
return
}
},
})

You can also use the renderSlot method:
import { renderSlot } from 'vue'



9.1 Scoped Slots
Using scoped slots can implement slot parameter passing. The following is a specific example.
Comparison of the writing methods used by slots in JSX and SFC.
JSX writing:

{{
mySlot: (item) => (item.open ? : ),
}}


It can also be used by means of v-slots:
mySlot: (item) => (item.open ? : )
}}>


SFC writing:




where item is the parameter of the slot, via
ctx.slots.mySlot(item)

way to pass parameters to the slot.
Or use the renderSlot method, where the third parameter is the parameter to be passed to the slot:
import { renderSlot, useSlots } from 'vue'




Replenish:

property binding

const properties = {a: 1, b: 2}

batch binding tag properties in SFC.
The replacement in JSX is
.

class binding

Use CSS Modules to introduce local styles, which is equivalent to scoped in SFC.
import styles from './index.module.scss'



Thanks to @momo11 for providing two practical jsx usages.

10 Summary


This article is a booklet that mainly introduces the syntax and practice of using JSX in Vue3, including almost all Vue3 syntaxes such as text interpolation, property binding, event binding, two-way binding, conditional rendering, list rendering, slots, etc. If you are also writing JSX in Vue3, this guide might provide a little reference.
Welcome to join the Vue DevUI open source project and explore more Vue3 + JSX gameplay together!
Add DevUI Assistant WeChat: devui-official, join our technical exchange group, and play open source together!
github.com/DevCloudFE/…

Related Articles

Explore More Special Offers

  1. Short Message Service(SMS) & Mail Service

    50,000 email package starts as low as USD 1.99, 120 short messages start at only USD 1.00