详解如何使用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居然支持中文(unicode)编程!
Apr 12 Javascript
jquery select(列表)的操作(取值/赋值)
Aug 06 Javascript
jQuery Ajax之$.get()方法和$.post()方法
Oct 12 Javascript
javascript与CSS复习(《精通javascript》)
Jun 29 Javascript
一步一步制作jquery插件Tabs实现过程
Jul 06 Javascript
图片动画横条广告带上下滚动的JS代码
Oct 25 Javascript
Css3制作变形与动画效果
Jul 24 Javascript
详解webpack的proxyTable无效的解决方案
Jun 15 Javascript
JS逻辑运算符短路操作实例分析
Jul 09 Javascript
原生js实现针对Dom节点的CRUD操作示例
Aug 26 Javascript
Js代码中的span拼接问题解决
Nov 22 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
Jan 16 Javascript
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删除与复制文件夹及其文件夹下所有文件的实现代码
2013/01/23 PHP
深入PHP与浏览器缓存的分析
2013/06/03 PHP
php 读取文件头判断文件类型的实现代码
2013/08/05 PHP
PHP中多维数组的foreach遍历示例
2014/06/13 PHP
thinkphp在模型中自动完成session赋值示例代码
2014/09/09 PHP
用 Composer构建自己的 PHP 框架之设计 MVC
2014/10/30 PHP
递归实现php数组转xml的代码分享
2015/05/14 PHP
php简单日历函数
2015/10/28 PHP
JavaScript中伪协议 javascript:使用探讨
2014/07/18 Javascript
详谈nodejs异步编程
2014/12/04 NodeJs
推荐一个自己用的封装好的javascript插件
2015/01/29 Javascript
初步使用Node连接Mysql数据库
2016/03/03 Javascript
React快速入门教程
2017/01/17 Javascript
vue-router:嵌套路由的使用方法
2017/02/21 Javascript
JavaScript中三种常见的排序方法
2017/02/24 Javascript
js实现图片轮播效果学习笔记
2017/07/26 Javascript
Vue 换肤的示例实践
2018/01/23 Javascript
Vue 3.0双向绑定原理的实现方法
2019/10/23 Javascript
Vue+Bootstrap实现简易学生管理系统
2021/02/09 Vue.js
[00:32]2018DOTA2亚洲邀请赛出场——VP
2018/04/04 DOTA
python根据开头和结尾字符串获取中间字符串的方法
2015/03/26 Python
Python 实现购物商城,含有用户入口和商家入口的示例
2017/09/15 Python
Python实现上下班抢个顺风单脚本
2018/02/07 Python
查看python安装路径及pip安装的包列表及路径
2019/04/03 Python
浅析图片上传及canvas压缩的流程
2020/06/10 HTML / CSS
德国高品质男装及配饰商城:Cultizm(Raw Denim原色牛仔裤)
2018/04/16 全球购物
英国在线购买轮胎、预订汽车、汽车维修和装配网站:Protyre
2020/04/12 全球购物
餐厅楼面部长岗位职责范文
2014/02/16 职场文书
工程师岗位职责规定
2014/02/26 职场文书
毕业寄语大全
2014/04/09 职场文书
设备售后服务承诺书
2014/05/30 职场文书
2015大学自主招生自荐信范文
2015/03/04 职场文书
大一新生军训新闻稿
2015/07/17 职场文书
2016年秋季开学典礼新闻稿
2015/11/25 职场文书
800字作文之大雪
2019/12/04 职场文书
Vue接口封装的完整步骤记录
2021/05/14 Vue.js