【Vue.js初学者向け】Hello Worldを表示する方法を紹介します

今回は、Vue.jsで「Hello World」を表示させていきます。

Vue.jsをこれから勉強する方々にとっては、最初の第一歩になるので、しっかり学習していきましょう。

Vue.jsは日本でよく使用されるライブラリのようなので、僕もかじってみようと思います!

Hello Worldを表示しよう

早速書いていきます。

今回は簡単にCDNを使って表示していきます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://unpkg.com/vue@next" defer></script>
  <script src="index.js" defer></script>
  <title>Document</title>
</head>
<body>
  <h1 id="hello">
    {{ hello }}
  </h1>
</body>
</html>
const app = Vue.createApp({
    data() {
        return {
            hello: 'Hello world!'
        }
    }
});

app.mount('#hello');

簡単に解説をしていきます。

1. CDNを使用して、Vue.jsのライブラリを読み込む

  <script src="https://unpkg.com/vue@next" defer></script>
  <script src="index.js" defer></script>

2. Vueのインスタンスを生成してマウントする

const app = Vue.createApp({
});

app.mount('#hello');

僕が感動したのが、ここ!
いちいちDOMを取得するのではなくて、マウントするだけでいいんですね!

3. data関数を使用して、値を設定する

    data() {
        return {
            hello: 'Hello world!'
        }
    }

Vue.jsでは、data関数に値をセットすると、HTML側で自由に呼び出し可能になります。

最後にマウントしたHTMLに、キーの記述をすれば完了です。

まとめ

  • Vueのインスタンスを作成し、任意のHTMLをマウントする
  • data関数を使用するとマウントしたHTMLに対して、自由に値を呼び出せる

今まで素のjavascriptで頑張ってきたので、正直これだけで感動レベルです!

参考

Vue – The Complete Guide (w/ Router, Vuex, Composition API)