我們知道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代碼。