docs: 添加文章内容（2013 ~ 2023）

docs/content/vue-jsx-syntax.md

@@ -0,0 +1,154 @@
+---
+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）
+
+> [渲染函数 &amp; 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>);
+```
+
+‍