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

Vue为什么要用JSX？下面编程教程网小编给大家简单介绍一下它的各种写法！

一般写法

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

JSX写法

<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>

JSX写法

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