• 技术文章 >头条

    超级容易上手,Vue中使用JSX

    小妮浅浅小妮浅浅2021-10-20 17:26:02原创464

    JSX是什么

    JSX 是一种 Javascript 的语法扩展,JSX = Javascript + XML,即在 Javascript 里面写 XML,因为 JSX 的这个特性,所以他即具备了 Javascript 的灵活性,同时又兼具 html 的语义化和直观性。(个人建议灵活度强的部分组件可以用JSX来代替,整个项目JSX属实没必要)

    XML学习地址(学与不学可随意,了解就ok):https://www.w3school.com.cn/xml/index.asp

    用template的弊端:https://www.mk2048.com/blog/blog_h1c2c22ihihaa.html

    为什么要在 Vue 中使用 JSX

    有时候,我们使用渲染函数(render function)来抽象组件,渲染函数不是很清楚的参见官方文档, 而渲染函数有时候写起来是非常痛苦的,所以只需要有个了解。

    渲染函数:https://cn.vuejs.org/v2/guide/render-function.html#%E5%9F%BA%E7%A1%80

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

    其对应的模板是下面:

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


    你看这写起来多费劲,这个时候就派上 JSX 上场了。在 Vue 中使用 JSX,需要使用 Babel 插件,它可以让我们回到更接近于模板的语法上。

    以上就是Vue中使用JSX的介绍,希望对大家有所帮助。更多精彩内容分享:头条

    专题推荐:vue jsx
    品易云
    上一篇:MySQL 8.0.27正式GA 下一篇:没有了

    相关文章推荐

    • Vue框架在PostCSS中使用sass的方法

    全部评论我要评论

    © 2021 Python学习网 苏ICP备2021003149号-1

  • 取消发布评论
  • 

    Python学习网