详解Vue如何支持JSX语法


Posted in Javascript onNovember 10, 2017

通常开发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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js querySelector和getElementById通过id获取元素的区别
Apr 20 Javascript
javascript动画浅析
Aug 30 Javascript
Extjs表单常见验证小结
Mar 07 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
Mar 24 Javascript
js获取时间函数及扩展函数的方法
Oct 30 Javascript
JS跨域请求外部服务器的资源
Feb 06 Javascript
jQuery实现按比例缩放图片的方法
Apr 29 jQuery
webpack v4 从dev到prd的方法
Apr 02 Javascript
详解ES6系列之私有变量的实现
Nov 21 Javascript
vue自动添加浏览器兼容前后缀操作
Aug 13 Javascript
8个非常实用的Vue自定义指令
Dec 15 Vue.js
利用promise及参数解构封装ajax请求的方法
Mar 24 Javascript
微信小程序异步处理详解
Nov 10 #Javascript
微信小程序实现选项卡功能
Jun 19 #Javascript
微信小程序实现多宫格抽奖活动
Apr 15 #Javascript
十分钟带你快速了解React16新特性
Nov 10 #Javascript
JS实现移动端整屏滑动的实例代码
Nov 10 #Javascript
Three.js加载外部模型的教程详解
Nov 10 #Javascript
vue2导航根据路由传值,而改变导航内容的实例
Nov 10 #Javascript
You might like
在WAMP环境下搭建ZendDebugger php调试工具的方法
2011/07/18 PHP
php中使用PHPExcel读写excel(xls)文件的方法
2014/09/15 PHP
浅谈PHP定义命令空间的几个注意点(推荐)
2016/10/29 PHP
PHP基于ORM方式操作MySQL数据库实例
2017/06/21 PHP
php微信公众号开发之二级菜单
2018/10/20 PHP
Laravel框架路由管理简单示例
2019/05/07 PHP
主页面中的两个iframe实现鼠标拖动改变其大小
2013/04/16 Javascript
jquery设置text的值示例(设置文本框 DIV 表单值)
2014/01/06 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
2014/09/15 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
2015/12/26 Javascript
vue-router路由参数刷新消失的问题解决方法
2017/06/17 Javascript
Angular指令之restict匹配模式的详解
2017/07/27 Javascript
Vue 进入/离开动画效果
2017/12/26 Javascript
使用vue-cli编写vue插件的方法
2018/02/26 Javascript
微信小程序中添加客服按钮contact-button功能
2018/04/27 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
2018/07/31 Javascript
使用NestJS开发Node.js应用的方法
2018/12/03 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
2020/03/17 Javascript
[01:08:33]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python入门篇之正则表达式
2014/10/20 Python
Python中IPYTHON入门实例
2015/05/11 Python
Python实现批量下载图片的方法
2015/07/08 Python
Python爬虫代理IP池实现方法
2017/01/05 Python
python实现词法分析器
2019/01/31 Python
Anaconda和ipython环境适配的实现
2020/04/22 Python
Python 利用argparse模块实现脚本命令行参数解析
2020/12/28 Python
详解如何修改jupyter notebook的默认目录和默认浏览器
2021/01/24 Python
sealed修饰符是干什么的
2012/10/23 面试题
工程师求职简历的自我评价分享
2013/10/10 职场文书
单位人事专员介绍信
2014/01/11 职场文书
地理教师岗位职责
2014/03/16 职场文书
市级绿色学校申报材料
2014/08/25 职场文书
三八妇女节寄语
2015/02/27 职场文书
工厂仓库管理员岗位职责
2015/04/09 职场文书
宣传部部长竞选稿
2015/11/21 职场文书
Java org.w3c.dom.Document 类方法引用报错
2021/08/07 Java/Android