Vue 2 中的 Hello World(JSX 方式)
JSX 並不打算由瀏覽器解釋。它必須首先轉換為標準的 Javascript。要使用 JSX,你需要安裝 babel babel-plugin-transform-vue-JSX
的外掛
執行以下命令:
npm install babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props --save-dev
並將其新增到你的 .babelrc
,如下所示:
{
"presets": ["es2015"],
"plugins": ["transform-vue-jsx"]
}
使用 VUE JSX 的示例程式碼:
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
methods: {
handleClick () {
alert('Hello!')
}
},
render (h) {
return (
<div>
<h1 on-click={this.handleClick}>Hello from JSX</h1>
<p> Hello World </p>
</div>
)
}
})
通過使用 JSX,你可以在編寫 JavaScript 程式碼的同一檔案中編寫簡潔的 HTML / XML 結構。