2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Vue.js 入門1 Hellow World

Last updated at Posted at 2022-03-20

初めに

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?