vue用template还是JSX？

各自特点

template

• 模板语法（HTML的扩展）
• 数据绑定使用Mustache语法（双大括号）

{{title}}

JSX

• JavaScript的语法扩展
• 数据绑定使用单引号

{title}

vue官方建议

Vue官方建议使用template模板，但是 ：

“更抽象一点来看，我们可以把组件区分为两类：一类是偏视图表现的 (presentational)，一类则是偏逻辑的 (logical)。我们推荐在前者中使用模板，在后者中使用 JSX 或渲染函数。这两类组件的比例会根据应用类型的不同有所变化，但整体来说我们发现表现类的组件远远多于逻辑类组件。”

也就是说，在一些特定场景下可以建议使用JSX语法。

JSX语法如何在vue中使用

先看下template的情况

是不是很多v-if-else 看的眼花缭乱？

别着急，来看jsx大法。

// nav-jsx.jsx
export default {
  props: {
    level: {
      type: Number,
      default: 1
    }
  },
  render: function(h) {
    const Tag = `h${this.level}`;
    return {this.$slots.default};
  }
};

是不是简洁了许多？！

jsx组件使用的方式和vue组件相同，先导入，然后components注册，就可以使用了。