详解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 相关文章推荐
瀑布流布局并自动加载实现代码
Mar 12 Javascript
javascript在myeclipse中报错的解决方法
Oct 29 Javascript
原始XMLHttpRequest方法详情回顾
Nov 28 Javascript
javascript中数组的冒泡排序使用示例
Dec 18 Javascript
js获取url中&quot;?&quot;后面的字串方法
May 15 Javascript
JavaScript 七大技巧(二)
Dec 13 Javascript
AngularJS  $on、$emit和$broadcast的使用
Sep 05 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
Mar 13 Javascript
使用vue.js编写蓝色拼图小游戏
Mar 17 Javascript
浅谈Angular路由复用策略
Oct 04 Javascript
React中上传图片到七牛的示例代码
Oct 10 Javascript
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
微信小程序异步处理详解
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
预告映像公开!第1章续篇剧场版动画《Princess Principal Crown Handler》4月10日上映!
2020/03/06 日漫
一条久听不愿放下的DIY森海MX500,三言两语话神奇
2021/03/02 无线电
PHP 和 MySQL 开发的 8 个技巧
2006/10/09 PHP
php和jquery实现地图区域数据统计展示数据示例
2014/02/12 PHP
PHP命名空间namespace的定义方法详解
2017/03/29 PHP
javascript web页面刷新的方法收集
2009/07/02 Javascript
Node.js中对通用模块的封装方法
2014/06/06 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
2015/07/01 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
2016/09/17 Javascript
简单的JS控制button颜色随点击更改的实现方法
2017/04/17 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
2017/05/20 Javascript
JS 调试中常见的报错问题解决方法
2017/05/20 Javascript
前端常见跨域解决方案(全)
2017/09/19 Javascript
vue单页应用加百度统计代码(亲测有效)
2018/01/31 Javascript
详解vue-property-decorator使用手册
2019/07/29 Javascript
JS co 函数库的含义和用法实例总结
2020/04/08 Javascript
vue实现lodop打印功能的示例
2020/11/11 Javascript
vue 项目@change多个参数传值多个事件的操作
2021/01/29 Vue.js
忘记ftp密码使用python ftplib库暴力破解密码的方法示例
2014/01/22 Python
Python中返回字典键的值的values()方法使用
2015/05/22 Python
Python对象转JSON字符串的方法
2016/04/27 Python
浅谈Python的异常处理
2016/06/19 Python
python的unittest测试类代码实例
2017/12/07 Python
python爬虫获取多页天涯帖子
2018/02/23 Python
用django设置session过期时间的方法解析
2019/08/05 Python
解决Pycharm的项目目录突然消失的问题
2020/01/20 Python
python数据库编程 ODBC方式实现通讯录
2020/03/27 Python
乐天旅游台湾网站:Rakuten Travel TW
2017/06/01 全球购物
Foot Locker德国官方网站:美国运动服和鞋类零售商
2018/11/01 全球购物
Yahoo-PHP面试题2
2014/12/06 面试题
俄语翻译实习生的自我评价分享
2013/11/06 职场文书
大学开学计划书
2014/04/30 职场文书
2014年教师节活动总结
2014/08/29 职场文书
听证会主持词
2015/07/03 职场文书
数学备课组工作总结
2015/08/12 职场文书
《静夜思》教学反思
2016/02/17 职场文书