docs: Update docs

This commit is contained in:
Amour1688 2020-07-03 00:51:53 +08:00
parent 33ff92fd87
commit d7bdb3c06d
3 changed files with 250 additions and 1 deletions

View File

@ -34,6 +34,130 @@ npm install @ant-design-vue/babel-helper-vue-transform-on
开启这个参数意味着对 { attrs, props, on } 做了兼容处理,但是所有的属性外层都会有 `compatibleProps` 方法 开启这个参数意味着对 { attrs, props, on } 做了兼容处理,但是所有的属性外层都会有 `compatibleProps` 方法
## 表达式
### 内容
函数式组件
```jsx
const App = () => <div></div>
```
在 render 中使用
```jsx
const App = {
render() {
return <div>Vue 3.0</div>
}
}
```
```jsx
const App = defineComponent(() => {
const count = ref(0);
const inc = () => {
count.value++;
};
return () => (
<div onClick={inc}>
{count.value}
</div>
)
})
```
Fragment
```jsx
const App = () => (
<>
<span>I'm</span>
<span>Fragment</span>
</>
)
```
### Attributes/Props
```jsx
const App = () => <input type="email" />
```
with a dynamic binding:
```jsx
const placeholderText = 'email'
const App = () => (
<input
type="email"
placeholder={placeholderText}
/>
)
```
### 指令
> 建议在 JSX 中使用驼峰 (`vModel`),但是 `v-model` 也能用
v-show
```jsx
const App = {
data() {
return { visible: true };
},
render() {
return <input vShow={this.visible} />;
},
};
```
v-model
* 修饰符:使用 (`_`) 代替 (`.`) (`vModel_trim={this.test}`)
```jsx
export default {
data: () => ({
test: 'Hello World',
}),
render() {
return (
<>
<input type="text" vModel_trim={this.test} />
{this.test}
</>
)
},
}
```
自定义指令
```jsx
const App = {
directives: { custom: customDirective },
setup() {
return () => (
<a
vCustom={{
value: 123,
modifiers: { modifier: true },
arg: 'arg',
}}
/>
);
},
}
```
### 插槽
目前功能没有想好怎么实现,欢迎在 issue 中讨论,可以先使用 `props` 来代替
## 兼容性 ## 兼容性
要求: 要求:

125
README.md
View File

@ -35,6 +35,131 @@ compatible with Vue 2.x
`{ props, on = {}, attrs, ...rest }` will be transformed to `{ ...props, ...attrs, ...transformOn(on), ...rest }` `{ props, on = {}, attrs, ...rest }` will be transformed to `{ ...props, ...attrs, ...transformOn(on), ...rest }`
## Syntax
### Content
functional component
```jsx
const App = () => <div></div>
```
with render
```jsx
const App = {
render() {
return <div>Vue 3.0</div>
}
}
```
```jsx
const App = defineComponent(() => {
const count = ref(0);
const inc = () => {
count.value++;
};
return () => (
<div onClick={inc}>
{count.value}
</div>
)
})
```
Fragment
```jsx
const App = () => (
<>
<span>I'm</span>
<span>Fragment</span>
</>
)
```
### Attributes/Props
```jsx
const App = () => <input type="email" />
```
with a dynamic binding:
```jsx
const placeholderText = 'email'
const App = () => (
<input
type="email"
placeholder={placeholderText}
/>
)
```
### Directives
> It is recommended to use camelCase version of it (`vModel`) in JSX, but you can use kebab-case too (`v-model`).
v-show
```jsx
const App = {
data() {
return { visible: true };
},
render() {
return <input vShow={this.visible} />;
},
};
```
v-model
* You should use underscore (`_`) instead of dot (`.`) for modifiers (`vModel_trim={this.test}`)
```jsx
export default {
data: () => ({
test: 'Hello World',
}),
render() {
return (
<>
<input type="text" vModel_trim={this.test} />
{this.test}
</>
)
},
}
```
custom directive
```jsx
const App = {
directives: { custom: customDirective },
setup() {
return () => (
<a
vCustom={{
value: 123,
modifiers: { modifier: true },
arg: 'arg',
}}
/>
);
},
}
```
### Slot
Why Not props ?
## Compatibility ## Compatibility
This repo is only compatible with: This repo is only compatible with:

View File

@ -53,7 +53,7 @@ const App = defineComponent(() => {
}) })
``` ```
fragment Fragment
```jsx ```jsx
const App = () => ( const App = () => (