21stepで体得Vue.jsハンズオンをやってみたよ1日目

Vue3の案件がこの頃増えてきて、個人受注でもなかなか学習時間がまとまって確保できていない状況のため購入。

早速一日目をやってみたが、Vue2系の時と根本的な部分が変わっていた。

2系の時はdata内にel関数で描画先の指定をしていたが、3系ではmountメソッドで実装している。

実際のソースコードが下記

<!doctype html>
<html>
<head>
<meta charset=”UTF-8″>
<title>無題ドキュメント</title>
</head>
<body>
<div id=”app”>
<p>{{ display }}</p>
</div>
<script src=”https://cdn.jsdelivr.net/npm/vue@3.0.0/dist/vue.global.js”></script>
<script>
const app = Vue.createApp({
data: () => ({
display: “hellow world”
}),
});
app.mount(‘#app’);
</script>
</body>
</html>

 

引き続き学習を進めます。