Skip to content

Commit 566a58f

Browse files
committed
add vue template syntax supported jsx
1 parent a954f2e commit 566a58f

File tree

1 file changed

+83
-0
lines changed

1 file changed

+83
-0
lines changed
Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
- Start Date: 2020-10-23
2+
- Target Major Version: 2.x / 3.x
3+
- Reference Issues: N/A
4+
- Implementation PR: N/A
5+
6+
# Summary
7+
8+
This RFC provides a new method of writing Vue template, which can be mixed with JS code, and supports the syntax of Vue template.
9+
本RFC提供一种新的Vue模板写法,可以与JS代码混合编写,同时支持Vue Template的语法。
10+
11+
# Basic example
12+
13+
```jsx
14+
const MyComponent = {
15+
setup() {
16+
const count = ref(0)
17+
const inc = () => count.value++
18+
const max = 10
19+
return () => (
20+
<!vt>
21+
<div> {{ count }} </div>
22+
<button :click="inc" :disabled="count >= max">inc</button>
23+
</!vt>
24+
)
25+
}
26+
}
27+
```
28+
29+
Equivalent to JSX
30+
31+
```jsx
32+
const MyComponent = {
33+
setup() {
34+
const count = ref(0)
35+
const inc = () => count.value++
36+
const max = 10
37+
return () => (
38+
<>
39+
<div> { count } </div>
40+
<button onClick={ inc } disabled={ count >= max }>inc</button>
41+
</>
42+
)
43+
}
44+
}
45+
```
46+
47+
# Motivation
48+
49+
It absorbs the advantages of JSX: it can access any variable according to the rules of JS scope, without manually binding variables to the rendering context.
50+
It retains the advantages of Vue template: it retains the original syntax and supports the template engine.
51+
吸取了JSX的优点:能够按照JS作用域的规则访问任何变量,无需手动地将变量绑定到渲染上下文。
52+
保留了Vue Template的优点:保留原有的语法习惯,同时可以支持模板引擎。
53+
54+
```jsx
55+
const vt = (
56+
<!vt lang="pug">
57+
section
58+
header title
59+
footer copyright
60+
</!vt>
61+
)
62+
```
63+
64+
# Detailed design
65+
66+
All JSX codes wrapped in `<!vt></!vt>` are compiled as Vue template format. Different from the classical compilation results, it does not need to rely on the' context 'object, but can access the variables of the JS scope where the code is located.
67+
所有用`<!vt></!vt>`包裹的JSX代码作为Vue Template格式进行编译处理,与经典的编译结果不同的是,无需依赖`context`对象,但可以访问代码所在的JS作用域的变量。
68+
69+
# Drawbacks
70+
71+
N/A
72+
73+
# Alternatives
74+
75+
N/A
76+
77+
# Adoption strategy
78+
79+
Fully backwards compatible.
80+
81+
# Unresolved questions
82+
83+
N/A

0 commit comments

Comments
 (0)