初めに

本記事は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

Vue.js 入門1 Hellow World

初めに