155 lines
2.4 KiB
Markdown
155 lines
2.4 KiB
Markdown
---
|
||
title: "「Web 前端」在 Vue 中使用 JSX 的语法"
|
||
date: 2025-03-15T23:05:31Z
|
||
lastmod: 2025-10-07T16:10:57Z
|
||
tags: [Web 前端,JavaScript,JSX,Vue.js]
|
||
---
|
||
|
||
# 「Web 前端」在 Vue 中使用 JSX 的语法
|
||
|
||
## 来源
|
||
|
||
- [GitHub - vuejs/jsx](https://github.com/vuejs/jsx#syntax)
|
||
|
||
## 语法
|
||
|
||
### 内容（Content）
|
||
|
||
```javascript
|
||
render() {
|
||
return <p>hello</p>;
|
||
}
|
||
```
|
||
|
||
动态内容：
|
||
|
||
```javascript
|
||
render() {
|
||
return <p>hello { this.message }</p>;
|
||
}
|
||
```
|
||
|
||
使用自闭合标签：
|
||
|
||
```javascript
|
||
render() {
|
||
return <input />;
|
||
}
|
||
```
|
||
|
||
使用组件：
|
||
|
||
```javascript
|
||
import MyComponent from './my-component';
|
||
|
||
export default {
|
||
render() {
|
||
return <MyComponent>hello</MyComponent>;
|
||
},
|
||
}
|
||
```
|
||
|
||
### Attributes / Props
|
||
|
||
```javascript
|
||
render() {
|
||
return <input type="email" />;
|
||
}
|
||
```
|
||
|
||
动态绑定：
|
||
|
||
```javascript
|
||
render() {
|
||
return <input
|
||
type="email"
|
||
placeholder={this.placeholderText}
|
||
/>;
|
||
}
|
||
```
|
||
|
||
使用 “展开” 操作符：
|
||
|
||
> 传递的对象需要与 [深入数据对象](https://cn.vuejs.org/v2/guide/render-function.html#%E6%B7%B1%E5%85%A5%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1) 相匹配。
|
||
|
||
```javascript
|
||
render() {
|
||
const inputAttrs = {
|
||
type: 'email',
|
||
placeholder: 'Enter your email',
|
||
};
|
||
return <input {...{ attrs: inputAttrs }} />;
|
||
}
|
||
```
|
||
|
||
### 插槽（Slots）
|
||
|
||
具名插槽：
|
||
|
||
```javascript
|
||
render() {
|
||
return (
|
||
<MyComponent>
|
||
<header slot="header">header</header>
|
||
<footer slot="footer">footer</footer>
|
||
</MyComponent>
|
||
);
|
||
}
|
||
```
|
||
|
||
作用域插槽：
|
||
|
||
```javascript
|
||
render() {
|
||
const scopedSlots = {
|
||
header: () => <header>header</header>,
|
||
footer: () => <footer>footer</footer>,
|
||
};
|
||
return <MyComponent scopedSlots={scopedSlots} />;
|
||
}
|
||
```
|
||
|
||
### 指令（Directives）
|
||
|
||
```html
|
||
<input vModel={this.newTodoText} />
|
||
```
|
||
|
||
使用修饰符（modifier）：
|
||
|
||
```html
|
||
<input vModel_trim={this.newTodoText} />
|
||
```
|
||
|
||
使用参数（argument）：
|
||
|
||
```html
|
||
<input vOn:click={this.newTodoText} />
|
||
```
|
||
|
||
同时使用参数和修饰符：
|
||
|
||
```html
|
||
<input vOn:click_stop_prevent={this.newTodoText} />
|
||
```
|
||
|
||
v-html：
|
||
|
||
```html
|
||
<p domPropsInnerHTML={html} />
|
||
```
|
||
|
||
### 函数式组件（Functional Components）
|
||
|
||
> [渲染函数 & JSX - 函数式组件](https://cn.vuejs.org/v2/guide/render-function.html#%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BB%84%E4%BB%B6)
|
||
|
||
```javascript
|
||
export default ({ props }) => (<p>hello {props.message}</p>);
|
||
```
|
||
|
||
```javascript
|
||
const HelloWorld = ({ props }) => (<p>hello {props.message}</p>);
|
||
```
|
||
|
||
|