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

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

一般写法

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

react如何实现滚动条（全部代码）

关于vue3中JSX的使用方法介绍

标签： JSX

上面是“Vue为什么要用JSX？语法介绍”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_3258.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！