詳解如何使用webpack在vue項目中寫jsx文法，webpackjsx

詳解如何使用webpack在vue項目中寫jsx文法，webpackjsx

本文介紹了如何使用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代碼。

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。