Vue2.0 + 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: <div>确定要删除<span style="color:red">学习子君Vue系列文章</span>的笔记?</div>,
  type: 'warning'
})

函数式组件
在小编前面的文章实战技巧，Vue原来还可以这样写中介绍了为什么要使用函数式组件，及函数式组件与普通组件的区别。虽然在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 <img src={
   props.avatar}></img>
    }
    return <img src="default-avatar.png"></img>
  }
}

一个表单的需求
为了方便快速开发管理系统，小编对所使用的UI库中的表单进行了二次封装，封装之后的效果如下（仅供参考）:

<template>
  <custom-form v-model="formData" :fields="fields" />
</template>
<script>
export default {
   
  data() {
   
    return {
   
      formData: {
   },
      fields: Object.freeze([
        {
   
          label: '字段1',
          props: 'field1',
          type: 'input'
        },
        {
   
          label: '字段2',
          props: 'field2',
          type: 'number'
        }