Vue.js 2.x で書いた hello world を Vue.js 3.0 beta を使って書き換え
CDNを使ってHTMLファイルとして作っています。
Composition APIは使ってません。
Vue.js 2.x
<!DOCTYPE html>
<html lang="ja">
<meta charset="utf-8">
<title>hello world</title>
<div id="app">
<p>{{ display }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: { display: 'Hello World!' }
});
</script>
Vue.js 3.0.0-beta.20
<!DOCTYPE html>
<html lang="ja">
<meta charset="utf-8">
<title>hello world</title>
<div id="app">
<p>{{ display }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@3.0.0-beta.20/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data: () => ({
display: 'Hello World!'
})
});
app.mount('#app');
</script>
ポイント
- Vueコンストラクタの代わりに、
createAppを使います。 -
dataオプションはコンポーネントと同様に、関数にする必要があります。 -
elオプションの代わりに、mountを使います。