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