當前位置:成語大全網 - 新華字典 - 詳細講解如何在vue項目中使用webpack編寫jsx語法。

詳細講解如何在vue項目中使用webpack編寫jsx語法。

本文介紹了如何在vue項目中使用webpack編寫jsx語法,分享給大家,具體如下:

我們知道Vue 2.0中對虛擬DOM的支持。我們可以通過JavaScript動態創建元素,而無需在模板中編寫HTML代碼。虛擬DOM最終會被渲染成真實DOM。

數據:{

味精:“妳好,世界”

},

渲染(h) {

返回h(

div ',

{ attrs: { id:'我的id' },

[ this.msg ]

);

}

呈現的內容是:

& ltdiv id = ' my-id ' & gt;Hello world & lt/div & gt;

Vue 2.0中的渲染為我們打開了壹個新的世界,給了我們無限的想象空間。例如,我們可以將React中使用的JSX語法應用於Vue。接下來,我們來談談如何在Vue項目中使用JSX。

JSX簡介

JSX是壹個基於Javascript的語言擴展,它允許妳在Javascript代碼中插入XML語法風格的代碼。如下所示:

數據:{

消息:“妳好,世界”

},

渲染(h) {

返回(

& ltdiv id = ' my-id ' & gt;,

{ this.msg }

& lt/div & gt;

);

}

但值得註意的是,瀏覽器默認情況下不能解析JSX,必須編譯成標準的JavaScript代碼才能運行。就像我們需要把sass或者更少的東西編譯成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更簡潔,也有人認為將HTML代碼和JavaScript代碼混合在壹起很惡心。反正喜歡就用,不喜歡就不用。事不宜遲,讓我們看壹個簡單的應用程序:

script.js

新Vue({

埃爾:' #app ',

數據:{

消息:“點擊查看消息”

},

方法:{

妳好(){

alert(“這是消息”)

}

}

});

index.html

& ltdiv id = " app " & gt

& lt跨度

class= "我的班級"

style="cursor: pointer "

v-on:click="hello "

& gt

{{ msg }}

& lt/span>。

& lt/div & gt;

代碼很簡單,就是在頁面上顯示壹個span,裏面的內容是“點擊查看消息”。當內容被點擊時,會彈出壹個警告。我們來看看如何用render實現。

用Vue 2.0中的渲染功能實現。

script.js

新Vue({

埃爾:' #app ',

數據:{

消息:“點擊查看消息”

},

方法:{

妳好(){

alert(“這是消息”)

}

},

渲染(createElement) {

返回createElement(

' span ',

{

class: { 'my-class': true },

樣式:{ cursor: 'pointer' },

開:{

點擊:this.hello

}

},

[ this.msg ]

);

},

});

index.html

& ltdiv id = " app " & gt& lt!- span將在此呈現-& gt;& lt/div & gt;

使用JSX來實現

script.js

新Vue({

埃爾:' #app ',

數據:{

消息:“點擊查看消息。”

},

方法:{

妳好(){

alert('這是消息。')

}

},

渲染:函數渲染(h) {

返回(

& lt跨度

class={{ 'my-class': true }}

style={{ cursor: 'pointer' }}

點擊={ this.hello }

& gt

{ this.msg }

& lt/span>。

)

}

});

Index.html同上。

巴別-插件-轉換-vue-jsx

如前所述,JSX需要編譯成JavaScript才能運行,因此第三個示例需要額外的編譯步驟。這裏我們用Babel和Webpack來編譯。

打開webpack.config.js文件並添加babel loader:

加載程序:[

{測試:/\。js$/,loader: 'babel ',exclude: /node_modules/ }

]

創建或修改您的。babelrc文件並添加插件babel-plugin-transform-vue-jsx。

{

“預置”:[“es 2015”],

"插件":["transform-vue-jsx"]

}

現在運行webpack,代碼中的JSX將被正確編譯成標準的JavaScript代碼。