本文介紹了如何使用webpack在vue項(xiàng)目中寫(xiě)jsx語(yǔ)法，分享給大家，具體如下:

我們知道Vue 2.0中對(duì)虛擬DOM的支持。我們可以通過(guò)JavaScript動(dòng)態(tài)的創(chuàng)建元素，而不用在template中寫(xiě)HTML代碼。虛擬DOM最終將被渲染為真正的DOM。

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

渲染后的內(nèi)容為：

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

Vue 2.0中的render為我們開(kāi)啟了一片新的天地，賦予了我們無(wú)限的想象力。比如，我們可以把React中用到的JSX語(yǔ)法應(yīng)用到Vue中來(lái)。接下來(lái)，我們就聊聊怎么在Vue項(xiàng)目中使用JSX.

JSX簡(jiǎn)介

JSX是基于Javascript的語(yǔ)言擴(kuò)展， 它允許在Javascript代碼中插入XML語(yǔ)法風(fēng)格的代碼。如下所示：

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

但值得注意的是，瀏覽器默認(rèn)是解析不了JSX的，它必須要先編譯成標(biāo)準(zhǔn)的JavaScript代碼才可以運(yùn)行。就像我們需要將sass或者less編譯為CSS代碼之后才能運(yùn)行一樣。

在Vue中使用JSX

Vue框架并沒(méi)有特意地去支持JSX，其實(shí)它也沒(méi)必要去支持，因?yàn)镴SX最后都會(huì)編譯為標(biāo)準(zhǔn)的JavaScript代碼。既然這樣， 那Vue和JSX為什么能配合在一起使用呢？ 很簡(jiǎn)單， 因?yàn)閂ue支持虛擬DOM， 你可以用JSX或者其他預(yù)處理語(yǔ)言，只要能保證render方法正常工作即可。

Vue官方提供了一個(gè)叫做babel-plugin-transform-vue-jsx的插件來(lái)編譯JSX， 我們稍后介紹如何使用它。

為什么要在Vue中使用JSX

為什么要再Vue中使用JSX ? 其實(shí)Vue并沒(méi)有強(qiáng)迫你去使用JSX， 它只是提供了一種新的方式而已。正所謂蘿卜青菜，各有所愛(ài)。有的人覺(jué)得在render方法中使用JSX更簡(jiǎn)潔，有的人卻覺(jué)得在JavaScript代碼中混入HTML代碼很惡心。反正你喜歡就用，不喜歡就不用唄。廢話(huà)少說(shuō)，我們先看一個(gè)簡(jiǎn)單的應(yīng)用：
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>

代碼很簡(jiǎn)單，就是在頁(yè)面上顯示一個(gè)span, 里面的內(nèi)容為"Click to see the message"。當(dāng)點(diǎn)擊內(nèi)容時(shí)，彈出一個(gè)alert。我們看看用render怎么實(shí)現(xiàn)。

用Vue 2.0中的render函數(shù)實(shí)現(xiàn)

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來(lái)實(shí)現(xiàn)

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

正如前文所說(shuō)， JSX是需要編譯為JavaScript才可以運(yùn)行的， 所以第三個(gè)樣例需要有額外的編譯步驟。這里我們用Babel和Webpack來(lái)進(jìn)行編譯。

打開(kāi)你的webpack.config.js文件， 加入babel loader:

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

新建或者修改你的.babelrc文件，加入 babel-plugin-transform-vue-jsx 這個(gè)插件

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

現(xiàn)在運(yùn)行webpack, 代碼里面的JSX就會(huì)被正確的編譯為標(biāo)準(zhǔn)的JavaScript代碼。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論