学Vue，就要学会vue JSX（一）

最近在做一个项目，然后里面也用到了jsx。因为其实有一些功能也需要更加灵活的去处理。 介绍一下JSX JSX 简介 JSX是一种Javascript的语法扩展，JSX = Javascript + XML，即在Javascript里面写XML，因为JSX的这个特性，所以他即具备了Javascript的灵活性，同时又兼具html的语义化和直观性。 应用场景 为了让大家更方便的去理解JSX的作用及用法，我先为大家罗列了几个可能会用到JSX的应用场景。 在消息框内添加html 在开发过程中，经常会用到消息框，使用消息框可能的一种写法是这样的 Message.alert({ messge: '确定要删除?', type: 'warning' }) 但是有时候产品或UI希望message可以自定义一些样式，这时候你可能就需要让Message.alert支持JSX了（当然也可以使用插槽/html等方式解决） Message.alert({ // 此处使用了JSX messge: , type: 'warning' }) 函数式组件 虽然在Vue.2.5之后，函数式组件也可以使用模板语法,但使用JSX可能会更方便一些（个人理解） export default { // 通过配置functional属性指定组件为函数式组件 functional: true, /** * 渲染函数 * @param {*} h * @param {*} context 函数式组件没有this, props, slots等都在context上面挂着 */ render(h, context) { const { props } = context if (props.avatar) { return } return } } 一个表单的需求 为了方便快速开发管理系统，我对所使用的UI库中的表单进行了二次封装，封装之后的效果如下（仅供参考）: 这样封装之后，定义表单时，只需要定义简单的JSON即可快速完成表单开发，但有时候会有一些特殊的需求，比如希望可以给输入框后面加一个按钮或者图标之类的，这时候就需要考虑使用JSX去处理了 { label: '字段2', props: 'field2', type: 'number', // 会渲染到表单元素后面 renderSuffix() { return 选择 } } 其他一些场景 比如我们一条数据需要根据状态不同，定义不同的展现方式，这时候你可能会想到用策略模式，这时候如果将每一个策略都写成一个JSX,那么就不需要针对每一个策略定义一个单文件组件了。当然如果你说，我就喜欢用JSX，那么所有的场景你都可以用。 这篇文章先说到这里，下一篇文章继续说这个知识点。下一部分说：学习JSX，先了解一下createElement。大家可以去看哦，马上更新。

本文章由javascript技术分享原创和收集