初めに
本記事はVue.js初学者向けの記事になります。
忘れっぽいので自分が学んだVue.jsのサンプルコードを記載していきます。
とりあえずCDNを使用した簡単な方法になります。
htmlファイルを作成し、下記のコードを記入してください。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Hellow World</title>
<!--ここでVue.jsの読み込み-->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app1">
app1: {{message}}
</div>
<div id="app2">
app2: {{message}}
</div>
<script>
const App1 = {
data() {
return {
//変数名
message: "Hello Word!"
}
},
}
const App2 = {
data() {
return {
//変数名は分かれていれば
message: "Hello Word!2"
}
},
}
app1 = Vue.createApp(App1)
//上部のid=app1部分に表示させる事が出来ます。
app1.mount('#app1')
app2 = Vue.createApp(App2)
app2.mount('#app2')
</script>
</body>
</html>
ブラウザで開くと下記の様に表示されます。
{{message}}が表示されてしまう場合はVue.jsの読み込みに失敗している可能性があります。
app1: Hello Word!
app2: Hello Word!2