mirror of
https://github.com/vuejs/babel-plugin-jsx.git
synced 2025-07-04 19:13:26 +08:00
docs: update readme [ci skip]
This commit is contained in:
@ -134,7 +134,7 @@ const App = () => <input type="email" placeholder={placeholderText} />;
|
|||||||
|
|
||||||
### 指令
|
### 指令
|
||||||
|
|
||||||
v-show
|
#### v-show
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
const App = {
|
const App = {
|
||||||
@ -147,7 +147,7 @@ const App = {
|
|||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
v-model
|
#### v-model
|
||||||
|
|
||||||
> 注意:如果想要使用 `arg`, 第二个参数需要为字符串
|
> 注意:如果想要使用 `arg`, 第二个参数需要为字符串
|
||||||
|
|
||||||
@ -155,6 +155,10 @@ v-model
|
|||||||
<input v-model={val} />
|
<input v-model={val} />
|
||||||
```
|
```
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
<input v-model:argument={val} />
|
||||||
|
```
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
<input v-model={[val, ["modifier"]]} />
|
<input v-model={[val, ["modifier"]]} />
|
||||||
```
|
```
|
||||||
@ -175,7 +179,7 @@ h(A, {
|
|||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
v-models
|
#### v-models (从 1.1.0 开始不推荐使用)
|
||||||
|
|
||||||
> 注意: 你应该传递一个二维数组给 v-models。
|
> 注意: 你应该传递一个二维数组给 v-models。
|
||||||
|
|
||||||
@ -220,6 +224,17 @@ h(A, {
|
|||||||
|
|
||||||
自定义指令
|
自定义指令
|
||||||
|
|
||||||
|
只有 argument 的时候推荐使用
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
const App = {
|
||||||
|
directives: { custom: customDirective },
|
||||||
|
setup() {
|
||||||
|
return () => <a v-custom:arg={val} />;
|
||||||
|
},
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
const App = {
|
const App = {
|
||||||
directives: { custom: customDirective },
|
directives: { custom: customDirective },
|
||||||
@ -284,7 +299,7 @@ const App = {
|
|||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
### 在 TypeSript 中使用
|
### 在 TypeScript 中使用
|
||||||
|
|
||||||
`tsconfig.json`:
|
`tsconfig.json`:
|
||||||
|
|
||||||
|
@ -14,9 +14,9 @@ Install the plugin with:
|
|||||||
npm install @vue/babel-plugin-jsx -D
|
npm install @vue/babel-plugin-jsx -D
|
||||||
```
|
```
|
||||||
|
|
||||||
Then add the plugin to .babelrc:
|
Then add the plugin to your babel config:
|
||||||
|
|
||||||
```js
|
```json
|
||||||
{
|
{
|
||||||
"plugins": ["@vue/babel-plugin-jsx"]
|
"plugins": ["@vue/babel-plugin-jsx"]
|
||||||
}
|
}
|
||||||
@ -138,7 +138,7 @@ const App = () => <input type="email" placeholder={placeholderText} />;
|
|||||||
|
|
||||||
### Directives
|
### Directives
|
||||||
|
|
||||||
v-show
|
#### v-show
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
const App = {
|
const App = {
|
||||||
@ -151,7 +151,7 @@ const App = {
|
|||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
v-model
|
#### v-model
|
||||||
|
|
||||||
> Note: You should pass the second param as string for using `arg`.
|
> Note: You should pass the second param as string for using `arg`.
|
||||||
|
|
||||||
@ -159,6 +159,10 @@ v-model
|
|||||||
<input v-model={val} />
|
<input v-model={val} />
|
||||||
```
|
```
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
<input v-model:argument={val} />
|
||||||
|
```
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
<input v-model={[val, ["modifier"]]} />
|
<input v-model={[val, ["modifier"]]} />
|
||||||
```
|
```
|
||||||
@ -179,7 +183,7 @@ h(A, {
|
|||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
v-models
|
#### v-models (Not recommended since v1.1.0)
|
||||||
|
|
||||||
> Note: You should pass a Two-dimensional Arrays to v-models.
|
> Note: You should pass a Two-dimensional Arrays to v-models.
|
||||||
|
|
||||||
@ -222,7 +226,18 @@ h(A, {
|
|||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
custom directive
|
#### custom directive
|
||||||
|
|
||||||
|
Recommended when using string arguments
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
const App = {
|
||||||
|
directives: { custom: customDirective },
|
||||||
|
setup() {
|
||||||
|
return () => <a v-custom:arg={val} />;
|
||||||
|
},
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
const App = {
|
const App = {
|
||||||
|
Reference in New Issue
Block a user