Vue为什么要用JSX？语法介绍

createElement(  
  'a-heading', {  
    props: {  
      level: 1  
    }  
  }, [  
  createElement('span', 'Hello'),  
    ' world!' 
  ]  
)

<a-heading :level="1">  
  <span>Hello</span> world!  
</a-heading>

<script type="text/x-template" id="a-heading-template">
<h1 v-if="level === 1"> 
  <slot></slot> 
</h1> 
<h2 v-else-if="level === 2"> 
  <slot></slot> 
</h2> 
<h3 v-else-if="level === 3"> 
  <slot></slot> 
</h3> 
</script>

const App = {
  render() {
    const tag = `h${this.level}`
    return <tag>{this.$slots.default}</tag>
  }
}