首页js和jsx有什么区别

js和jsx有什么区别

时间: 2023-10-19 18:05:21 浏览: 271

vue jsx 使用指南及vue.js 使用jsx语法的方法

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 的模板语法可能更为简洁和高效。选择哪种方式取决于项目的具体需求和个人喜好。

JS 和 JSX 是不同的文件扩展名，JS 是 JavaScript 文件的常见扩展名，而 JSX 是一种特殊的 JavaScript 语法扩展。 JSX 是 React 中用于编写组件的语法扩展，它允许在 JavaScript 中编写类似于 HTML 的语法。React 中的组件通常由 JSX 和 JavaScript 代码组成，其中 JSX 负责定义组件的结构和样式，而 JavaScript 代码则负责定义组件的行为和动态逻辑。 JSX 语法看起来很像 HTML，但实际上它是一种 JavaScript 语法扩展，需要通过工具（如 Babel）将其转换为普通的 JavaScript 代码才能在浏览器中运行。因此，JS 和 JSX 可以说是两种不同的文件扩展名，用于表示不同的文件类型和语法扩展。

阅读全文