详解Vue如何支持JSX语法
更新时间：2017年11月10日 17:19:06 作者：清风晴雨
这篇文章主要介绍了详解Vue如何支持JSX语法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
通常开发vue我们使用的是模板语法，其实还有和react相同的语法，那就是render函数，同样支持jsx语法。
Vue 的模板实际是编译成了 render 函数。
1.传统的createElement方法
createElement(
'anchored-heading', {
props: {
level: 1
}
}, [
createElement('span', 'Hello'),
' world!'
]
)
渲染成下面这样
<anchored-heading :level="1"> <span>Hello</span> world! </anchored-heading>
2.使用jsx语法
这就是会用到一个Babel plugin 插件，用于在 Vue 中使用 JSX 语法的原因，它可以让我们回到于更接近模板的语法上。
1.安装
npm install\ babel-plugin-syntax-jsx\ babel-plugin-transform-vue-jsx\ babel-helper-vue-jsx-merge-props\ babel-preset-es2015\ --save-dev
2.编辑.babelrc文件
{
"presets": ["es2015"],
"plugins": ["transform-vue-jsx"]
}
代码编辑如下
Vue.component('jsx-example', {
render (h) { // <-- h must be in scope
return <div id="foo">bar</div>
}
})
将 h 作为 createElement 的别名是 Vue 生态系统中的一个通用惯例，实际上也是 JSX 所要求的，如果在作用域中 h 失去作用， 在应用中会触发报错。
官网说明文档：https://cn.vuejs.org/v2/guide/render-function.html#JSX
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
今天小编就为大家分享一篇vue兄弟组件传递数据的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
Vue3中provide和inject作用和场景是顶层组件向任意的底层组件传递数据和方法,实现跨层组件通信,本文通过实例介绍Vue3 provide和inject的相关知识,感兴趣的朋友一起看看吧2023-11-11
这篇文章主要介绍了前端vue a链接下载文件失败的问题(未发现文件)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了vue 通过ref调用router-view子组件的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-11-11
在现代 Web 开发中,定时刷新页面或定时更新数据是一种常见的需求,尤其是在需要与服务器进行定时通信或者展示实时数据的场景下,Vue.js 提供了简单而有效的方法来实现定时刷新和自动更新,本文将介绍几种常见的定时刷新方式、适用场景、优缺点以及性能考虑2024-11-11
这篇文章主要介绍了vue自定义指令directive的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
在本篇文章里小编给大家整理了关于vue中英文切换实例代码，需要的朋友们学习参考下。2020-01-01
这篇文章主要介绍了安装vue-cli报错 -4058 的解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
作为使用Vue已经很多年的人，特别是去年一直在使用 Vue3，因此，学到了很多东西。所以本文为大家准备了7个让我们成为更好 Vue 开发者的技巧，需要的可以参考一下2022-06-06
VueJS 集成 Medium Editor的示例代码 （自定义编辑器按钮）
本篇文章主要介绍了VueJS 集成 Medium Editor的示例代码 （自定义编辑器按钮），具有一定的参考价值，有兴趣的可以了解一下2017-08-08
最新评论