Vue 3 JSX Explorer

Options ↘
  • Source:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<>
    <h1>The 1:1 mapping syntax, it reduces the mental burden, 
recommended for users who use js:</h1>
    
    <input v-model_number={ refVal.value } />
    <input v-on-click_stop={ handler } />
 
    <p>You can still use the original jsx syntax:</p>
    <div onClick={ hander }></div>
 
 
    <h1>Better type hinting and type safety, recommended to 
typescript users</h1>
 
    <input vModel={ [refVal.value, { number: true }] } />
    <input vModel={ [refVal.value, ['number']] } />
    <input vModel={ [refVal.value, modifiers] } />
 
    <Comp vModel={ [refVal.value, 'foo', { a: true }] } />
    <Comp vModel={ [refVal.value, 'foo', ['a']] } />
    <Comp vModel={ [refVal.value, dynamic, ['a']] } />
    <Comp vModel={ [refVal.value, dynamic, modifiers] } />
 
    <p>withModifiers:</p>
    <div onClick={ withModifiers(handler, ['self']) }></div>
</>
Enter to Rename, Shift+Enter to Preview

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
import { buildModifiers } from "@hcysunyang/babel-plugin-vue-next-jsx/dist/runtime.js";
import { createTextVNode, createVNode, vModelText, withDirectives, withModifiers, Fragment } from "vue";
createVNode(Fragment, null, [createVNode("h1", null, [createTextVNode("The 1:1 mapping syntax, it reduces the mental burden, recommended for users who use js:")]), withDirectives(createVNode("input", {
  "onUpdate:modelValue": $event => refVal.value = $event
}), [[vModelText, refVal.value, void 0, {
  "number": true
}]]), createVNode("input", {
  "onClick": withModifiers(handler, ["stop"])
}), createVNode("p", null, [createTextVNode("You can still use the original jsx syntax:")]), createVNode("div", {
  "onClick": hander
}), createVNode("h1", null, [createTextVNode("Better type hinting and type safety, recommended to typescript users")]), withDirectives(createVNode("input", {
  "onUpdate:modelValue": $event => refVal.value = $event
}), [[vModelText, refVal.value, void 0, {
  number: true
}]]), withDirectives(createVNode("input", {
  "onUpdate:modelValue": $event => refVal.value = $event
}), [[vModelText, refVal.value, void 0, {
  'number': true
}]]), withDirectives(createVNode("input", {
  "onUpdate:modelValue": $event => refVal.value = $event
}), [[vModelText, refVal.value, void 0, buildModifiers(modifiers)]]), createVNode(Comp, {
  "foo": refVal.value,
  "onUpdate:foo": $event => refVal.value = $event,
  "fooModifiers": {
    a: true
  }
}), createVNode(Comp, {
  "foo": refVal.value,
  "onUpdate:foo": $event => refVal.value = $event,
  "fooModifiers": {
    'a': true
  }
}), createVNode(Comp, {
  [dynamic]: refVal.value,
  ["onUpdate:" + dynamic]: $event => refVal.value = $event,
Enter to Rename, Shift+Enter to Preview