vue jsx 语法与 react jsx 还是有些不一样，在这里记录下。
let component = null// if 语句
if (true) {
component = (
<div></div>
);
} else {
component = (
<div></div>
);
}
var ul = (
<ul>
{component}
</ul>
);
// map 语句
var coms = limit.map(i => {
return {
<li>
{ul}
</li>
};
})
// 属性
<li onClick={(
Vue.js 是一款流行的前端框架，而 JSX 是一种用于在 JavaScript 中书写类似 HTML 的语法，它在 React 生态系统中广泛使用。Vue.js 也支持 JSX，但与 React 的 JSX 有一些差异。以下是一些关于 Vue.js 中使用 JSX 的关键知识点：
1. **变量分配组件**：
```javascript
let component = null;
if (true) {
component = <div></div>;
} else {
component = <div></div>;
}
```
在 Vue 中，你可以根据条件将组件赋值给变量，然后在其他地方渲染。
2. **映射数组创建组件**：
```javascript
var coms = limit.map(i => ({ <li>{ul}</li> }));
```
当你需要根据数组内容创建一系列组件时，可以使用 `map` 函数结合 JSX。
3. **属性绑定**：
```javascript
<li onClick={() => console.log()}></li>
<img {...{directives}}></img>
```
在 JSX 中，你可以直接在元素上设置事件监听器（如 `onClick`）和属性（如使用对象展开操作符 `...` 设置自定义指令 `directives`）。
4. **方法调用**：
```javascript
this.foo();
```
Vue 中的方法可以直接在 JSX 内部调用，例如在事件处理程序中。
5. **模型绑定**：
```javascript
<i-input value={params.row.factoryCode} onInput={val => (params.row.factoryCode = val)}></i-input>
```
在 Vue 的 JSX 中，可以使用 `value` 和 `onInput` 绑定数据模型，模拟 Vue 的 `v-model`。
6. **自定义事件**：
```javascript
<Operator category-id={this.categoryId} product={params.row} onChange={this.onChangeStatus}></Operator>
```
自定义事件可以通过 JSX 中的属性绑定来触发，如 `onChange`。
7. **三元运算**：
```javascript
<h1>{i == 1 ? 'True!' : 'False'}</h1>
```
三元运算符可以用于条件渲染。
8. **注释**：
```javascript
{/* 注释... */}
```
JSX 支持块级注释。
9. **HTML 解析**：
```javascript
{{_html: '<h1>Hello World!!</h1>'}}
```
Vue 中可以使用 `{{_html: ...}}` 来插入 HTML 字符串。
10. **使用 h 函数**：
```javascript
return h('Input', {props: {value: params.row.buyingNums}, on: {input: val => {params.row.buyingNums = val;}, 'on-blur': () => {this.update(params);}}});
```
`h` 函数是 Vue 中的渲染函数，用于创建组件实例。
11. **事件命名规则**：
```javascript
// 所有的事件监听必须以on开头，然后字母大写
<input @on-change='click'>
<input onOn-change={() => this.click()}></input>
```
在 Vue 的 JSX 中，事件监听器名称应以 `on` 开头，但 React 中通常不需要。
12. **配置 Babel**：
```json
{ "presets": ["es2015"], "plugins": ["transform-vue-jsx"] }
```
要在 Vue.js 项目中使用 JSX，你需要配置 Babel 编译器，添加相应的插件，如 `transform-vue-jsx`。
13. **创建 Vue 组件**：
```javascript
export default {
name: 'Test',
components: {},
render(h) {
return <div>test</div>;
},
data() {
return {};
}
};
```
创建一个 Vue 组件，使用 JSX 语法编写 `render` 方法。
为了在 Vue 项目中启用 JSX，你需要确保编辑器的语言配置为 JSX，以及安装并配置好相关的 Babel 插件。完成这些步骤后，你就可以在 Vue 组件中自由地使用 JSX 语法了。需要注意的是，虽然 JSX 提供了更直观的组件构建方式，但在某些场景下，使用 Vue 的模板语法可能更为简洁和高效。选择哪种方式取决于项目的具体需求和个人喜好。
