對于Vue的開發(fā)者來說，JSX已成為一種流行的模板語言，Vue 2.5引入了對JSX的一些支持，允許開發(fā)者在Vue組件中使用JSX語法。Vue中提供了兩種方式來使用JSX，一種是使用單文件組件（.vue）中的render函數(shù)，另一種則是使用vue-loader的JSX語法插件。下面我們將會詳細(xì)介紹這兩種方式：

// JSX對象
const vnode =
Hello {msg}
// render函數(shù)中使用JSX
export default {
name: 'MyComponent',
props: {
msg: String
},
render () {
return
Hello {this.msg}
}
}

第一種方式是直接在JSX中編寫一個vnode，然后將其渲染到頁面上。在比較簡單的情況下，這種方式非常友好，因為它看起來非常類似于模板語言。在這種方式下，你可以非常方便地寫代碼，因為你可以直接使用JavaScript寫代碼。

第二種方式是使用單文件組件來實現(xiàn)，這種方式相對復(fù)雜一些，但是如果你的組件比較復(fù)雜，使用單文件組件的方式相比使用JSX對象的方式，可以更方便靈活地控制你的整個組件。

要使用單文件組件，你需要配置一個vue-loader的JSX語法插件，它可以將JSX語法轉(zhuǎn)化為createElement函數(shù)。然后你就可以在單文件組件中使用JSX了。例如以下組件：

當(dāng)然，這里的使用JSX只是一個例子，我們可以使用更復(fù)雜的代碼來展示此方式的優(yōu)點。

在使用js-2/3 版本配置以前jsx語法的使用

var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods:{
renderCreateElement:function(createElement){
return createElement(
'div',  // 標(biāo)簽名稱
{
'class': 'main',
attrs: {
id: 'app1'
}
},
[ this.message,   // 子元素數(shù)組
createElement(
'button',
{
attrs: {
id: 'foo'
}
},
'確定'
),
]
)
}  
},
render: function(createElement) {
return this.renderCreateElement(createElement);  // 創(chuàng)建虛擬節(jié)點vnode并返回
}
})

在JSX語法中，Vue用H函數(shù)代替createElement，代替h去調(diào)用createElment

var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
render(createElement) {
return
{this.message}確定
}
})