详解如何使用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中String和StringBuffer的速度之争
Apr 01 Javascript
一些经常会用到的Javascript检测函数
May 31 Javascript
jquery 使用点滴函数代码
May 20 Javascript
JavaScript中window、doucment、body的解释
Aug 14 Javascript
js实现在同一窗口浏览图片
Sep 17 Javascript
DOM基础教程之使用DOM控制表格
Jan 20 Javascript
html的DOM中document对象images集合用法实例
Jan 21 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
Oct 12 Javascript
微信小程序拍照和摄像功能实现方法示例
Feb 01 Javascript
JS使用cookie保存用户登录信息操作示例
May 30 Javascript
layUI实现列表查询功能
Jul 27 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
May 03 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
异步加载技术实现当滚动条到最底部的瀑布流效果
2014/09/16 PHP
PHP file_get_contents函数读取远程数据超时的解决方法
2015/05/13 PHP
PHP面向对象自动加载机制原理与用法分析
2016/10/14 PHP
PHP批量获取网页中所有固定种子链接的方法
2016/11/18 PHP
超级简单的图片防盗(HTML),好用
2007/04/08 Javascript
jQuery为iframe的body添加click事件的实现代码
2011/04/07 Javascript
javascript读取xml实现javascript分页
2013/12/13 Javascript
js限制文本框的输入内容代码分享(3类)
2015/08/20 Javascript
超赞的jQuery图片滑块动画特效代码汇总
2016/01/25 Javascript
JavaScript基础教程——入门必看篇
2016/05/20 Javascript
AngularJS中$apply方法和$watch方法用法总结
2016/12/13 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
2017/03/13 Javascript
vue.js 初体验之Chrome 插件开发实录
2017/05/13 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
2018/02/11 Javascript
从零开始学习搭建React脚手架项目
2018/08/23 Javascript
基于elementUI实现图片预览组件的示例代码
2019/03/31 Javascript
面试题:react和vue的区别分析
2019/04/08 Javascript
JS的时间格式化和时间戳转换函数示例详解
2020/07/27 Javascript
python实现超简单端口转发的方法
2015/03/13 Python
详谈python read readline readlines的区别
2017/09/22 Python
python实现随机调用一个浏览器打开网页
2018/04/21 Python
Python Django2 model 查询介绍(条件、范围、模糊查询)
2020/03/16 Python
使用keras实现BiLSTM+CNN+CRF文字标记NER
2020/06/29 Python
纯CSS3制作漂亮带动画效果的主机价格表
2015/04/25 HTML / CSS
英国的领先快速时尚零售商:In The Style
2019/03/25 全球购物
微软马来西亚官方网站:Microsoft马来西亚
2019/11/22 全球购物
经典导游欢迎词大全
2014/01/16 职场文书
群众路线批评与自我批评
2014/02/06 职场文书
语文高效课堂实施方案
2014/05/03 职场文书
技术岗位竞聘演讲稿
2014/05/16 职场文书
党员个人剖析材料2014
2014/10/08 职场文书
群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
工程部岗位职责范本
2015/04/11 职场文书
叶问观后感
2015/06/15 职场文书
2015年秋学期教研工作总结
2015/10/14 职场文书
公务员廉洁从政心得体会
2016/01/19 职场文书