详解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 禁用浏览器的后退功能的简单方法
Dec 10 Javascript
JavaScript iframe的相互操作浅析
Oct 14 Javascript
Javascript attachEvent传递参数的办法
Dec 14 Javascript
基于jquery的自定义鼠标提示效果 jquery.toolTip
Nov 14 Javascript
javascript创建createXmlHttpRequest对象示例代码
Feb 10 Javascript
Javascript获取当前时间函数和时间操作小结
Oct 01 Javascript
jQuery实现冻结表头的方法
Mar 09 Javascript
JavaScript函数中关于valueOf和toString的理解
Jun 14 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
Feb 20 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
Aug 07 Javascript
JavaScript实现复选框全选和取消全选
Nov 20 Javascript
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
Apr 03 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
浅析php中抽象类和接口的概念以及区别
2013/06/27 PHP
php实现paypal 授权登录
2015/05/28 PHP
php比较相似字符串的方法
2015/06/05 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
prototype Element学习笔记(篇一)
2008/10/26 Javascript
Javascript 判断函数类型完美解决方案
2009/09/02 Javascript
屏蔽F1~F12的快捷键的js函数
2010/05/06 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
2010/12/28 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
2013/05/14 Javascript
jQuery实现点击文本框弹出热门标签的提示效果
2013/11/17 Javascript
简单的代码实现jquery定时器
2013/11/17 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
2014/08/18 Javascript
实例讲解javascript注册事件处理函数
2016/01/09 Javascript
Vue开发过程中遇到的疑惑知识点总结
2017/01/20 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
2018/07/12 Javascript
vue-cli创建的项目中的gitHooks原理解析
2020/02/14 Javascript
Vue.js的模板语法详解
2020/02/16 Javascript
JavaScript封装单向链表的示例代码
2020/09/17 Javascript
[51:52]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
Python 错误和异常小结
2013/10/09 Python
使用python读取csv文件快速插入数据库的实例
2018/06/21 Python
python学生管理系统学习笔记
2019/03/19 Python
ubuntu 18.04搭建python环境(pycharm+anaconda)
2019/06/14 Python
详解程序意外中断自动重启shell脚本(以Python为例)
2019/07/26 Python
Python Web框架之Django框架Model基础详解
2019/08/16 Python
Python 点击指定位置验证码破解的实现代码
2019/09/11 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
Python代码块及缓存机制原理详解
2019/12/13 Python
python 用opencv实现霍夫线变换
2020/11/27 Python
Python爬虫之Selenium库的使用方法
2021/01/03 Python
奥林匹亚体育:Olympia Sports
2020/12/30 全球购物
高三毕业典礼主持词
2014/03/27 职场文书
社会实践活动总结报告
2014/04/29 职场文书
党员民主生活会对照检查材料思想汇报
2014/09/28 职场文书
2014财务部年度工作总结
2014/12/08 职场文书
宣传稿格式范文
2015/07/23 职场文书