详解如何使用webpack在vue项目中写jsx语法


Posted in Javascript onNovember 08, 2017

本文介绍了如何使用webpack在vue项目中写jsx语法,分享给大家,具体如下:

我们知道Vue 2.0中对虚拟DOM的支持。我们可以通过JavaScript动态的创建元素,而不用在template中写HTML代码。虚拟DOM最终将被渲染为真正的DOM。

data: {
 msg: 'Hello world'
},
render (h) {
 return h(
 'div',
 { attrs: { id: 'my-id' },
 [ this.msg ]
 );
}

渲染后的内容为:

<div id='my-id'>Hello world</div>

Vue 2.0中的render为我们开启了一片新的天地,赋予了我们无限的想象力。比如,我们可以把React中用到的JSX语法应用到Vue中来。接下来,我们就聊聊怎么在Vue项目中使用JSX.

JSX简介

JSX是基于Javascript的语言扩展, 它允许在Javascript代码中插入XML语法风格的代码。如下所示:

data: {
 msg: 'Hello world'
},
render (h) {
 return (
 <div id='my-id'>,
  { this.msg } 
 </div>
 );
}

但值得注意的是,浏览器默认是解析不了JSX的,它必须要先编译成标准的JavaScript代码才可以运行。就像我们需要将sass或者less编译为CSS代码之后才能运行一样。

在Vue中使用JSX

Vue框架并没有特意地去支持JSX,其实它也没必要去支持,因为JSX最后都会编译为标准的JavaScript代码。既然这样, 那Vue和JSX为什么能配合在一起使用呢? 很简单, 因为Vue支持虚拟DOM, 你可以用JSX或者其他预处理语言,只要能保证render方法正常工作即可。

Vue官方提供了一个叫做babel-plugin-transform-vue-jsx的插件来编译JSX, 我们稍后介绍如何使用它。

为什么要在Vue中使用JSX

为什么要再Vue中使用JSX ? 其实Vue并没有强迫你去使用JSX, 它只是提供了一种新的方式而已。正所谓萝卜青菜,各有所爱。有的人觉得在render方法中使用JSX更简洁,有的人却觉得在JavaScript代码中混入HTML代码很恶心。反正你喜欢就用,不喜欢就不用呗。废话少说,我们先看一个简单的应用:
script.js

new Vue({
 el: '#app',
 data: {
 msg: 'Click to see the message'
 },
 methods: {
 hello () {
  alert('This is the message')
 }
 }
});

index.html

<div id="app">
 <span 
  class="my-class" 
  style="cursor: pointer" 
  v-on:click="hello"
 >
  {{ msg }}
 </span>
</div>

代码很简单,就是在页面上显示一个span, 里面的内容为"Click to see the message"。当点击内容时,弹出一个alert。我们看看用render怎么实现。

用Vue 2.0中的render函数实现

script.js

new Vue({
 el: '#app',
 data: {
 msg: 'Click to see the message'
 },
 methods: {
 hello () {
  alert('This is the message')
 }
 },
 render (createElement) {
 return createElement(
  'span',
  {
  class: { 'my-class': true },
  style: { cursor: 'pointer' },
  on: {
   click: this.hello
  }
  },
  [ this.msg ]
 );
 },
});

index.html

<div id="app"><!--span will render here--></div>

使用JSX来实现

script.js

new Vue({
 el: '#app',
 data: {
 msg: 'Click to see the message.'
 },
 methods: {
 hello () {
  alert('This is the message.')
 }
 },
 render: function render(h) {
 return (
  <span
  class={{ 'my-class': true }}
  style={{ cursor: 'pointer' }}
  on-click={ this.hello }
  >
  { this.msg }
  </span>
 )
 }
});

index.html和上文一样。

babel-plugin-transform-vue-jsx

正如前文所说, JSX是需要编译为JavaScript才可以运行的, 所以第三个样例需要有额外的编译步骤。这里我们用Babel和Webpack来进行编译。

打开你的webpack.config.js文件, 加入babel loader:

loaders: [
 { test: /\.js$/, loader: 'babel', exclude: /node_modules/ }
]

新建或者修改你的.babelrc文件,加入 babel-plugin-transform-vue-jsx 这个插件

{
 "presets": ["es2015"],
 "plugins": ["transform-vue-jsx"]
}

现在运行webpack, 代码里面的JSX就会被正确的编译为标准的JavaScript代码。

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

Javascript 相关文章推荐
Javascript 学习书 推荐
Jun 13 Javascript
使用Javascript接收get传递的值的代码
Nov 30 Javascript
JS实现控制表格行内容垂直对齐的方法
Mar 30 Javascript
js窗口关闭提示信息(兼容IE和firefox)
Oct 23 Javascript
想用好React的你必须要知道的一些事情
Jul 24 Javascript
Javascript中弹窗confirm与prompt的区别
Oct 26 Javascript
微信小程序自定义toast组件的方法详解【含动画】
May 11 Javascript
javascript中如何判断类型汇总
May 14 Javascript
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
js加减乘除精确运算方法实例代码
Jan 17 Javascript
vue router 动态路由清除方式
May 25 Vue.js
thinkjs 文件上传功能实例代码
Nov 08 #Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 #jQuery
在React 组件中使用Echarts的示例代码
Nov 08 #Javascript
浅谈mint-ui loadmore组件注意的问题
Nov 08 #Javascript
es6在react中的应用代码解析
Nov 08 #Javascript
mac中利用NVM管理不同node版本的方法详解
Nov 08 #Javascript
浅谈vue-router2路由参数注意的问题
Nov 08 #Javascript
You might like
PHP图片处理之使用imagecopyresampled函数实现图片缩放例子
2014/11/19 PHP
PHP统计目录中文件以及目录中目录大小的方法
2016/01/09 PHP
解决yii2左侧菜单子级无法高亮问题的方法
2016/05/08 PHP
[原创]php使用curl判断网页404(不存在)的方法
2016/06/23 PHP
PHP框架自动加载类文件原理详解
2017/06/06 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
smarty模板的使用方法实例分析
2019/09/18 PHP
PHP+MySQL实现在线测试答题实例
2020/01/02 PHP
用jquery写的一个万年历(自写)
2014/01/20 Javascript
javascript解析xml实现省市县三级联动的方法
2015/07/25 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
2015/09/01 Javascript
浅谈jQuery hover(over, out)事件函数
2016/12/03 Javascript
从源码里了解vue中的nextTick的使用
2018/11/22 Javascript
深入剖析JavaScript instanceof 运算符
2019/06/14 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
2019/06/18 Javascript
js实现轮播图效果 纯js实现图片自动切换
2020/08/09 Javascript
PHP读取远程txt文档到数组并实现遍历
2020/08/25 Javascript
windows下python和pip安装教程
2018/05/25 Python
tensorflow 中对数组元素的操作方法
2018/07/27 Python
python判断输入日期为第几天的实例
2018/11/13 Python
Python实现的批量修改文件后缀名操作示例
2018/12/07 Python
详解将Pandas中的DataFrame类型转换成Numpy中array类型的三种方法
2019/07/06 Python
如何运行带参数的python脚本
2019/11/15 Python
Python高级property属性用法实例分析
2019/11/19 Python
Python3基本输入与输出操作实例分析
2020/02/14 Python
Python3爬虫里关于Splash负载均衡配置详解
2020/07/10 Python
html5图片上传预览示例分享
2014/04/14 HTML / CSS
国际礼品店:GiftsnIdeas
2018/05/03 全球购物
意大利折扣和优惠券网站:Groupalia
2019/10/09 全球购物
如何在存储过程中使用Loop
2016/01/05 面试题
新书吧创业计划书
2014/01/31 职场文书
《去年的树》教学反思
2014/04/11 职场文书
党员批评与自我批评思想汇报(集锦)
2014/09/14 职场文书
国家领导干部党的群众路线教育实践活动批评与自我批评材料
2014/09/23 职场文书
行政前台岗位职责
2015/04/16 职场文书
小学语文教学反思范文
2016/03/03 职场文书