Vue.jsをイチから実践し学ぶ(1) – Hello world

Vue.jsを学び、実践する
前提事項および注意事項
CDN版とビルド版
Hello worldしてみる
1. ソースコードと結果イメージ
2. 簡単な解説
まとめ
参考URL

Vue.jsを学び、実践する

仕事の都合でVue.jsを扱うことになりそうなので、これから勉強していこうと思います。
恥ずかしながらVue.jsはほとんど触ったことがないため、基礎の基礎から学んでいこうと思います。

前提事項および注意事項

こちらの記事を書いていくにあたり、事前の注意事項として、

・筆者はVue.js初心者のため、用語や理解が曖昧で内容に誤りがある可能性がある

ということをお伝えしておきます。こちらについてはご了承いただければと思います。
( = 厳密な情報を得たいという場合、書籍や公式のリファレンスを参照するのが良いかもしれません)

また、Vue.jsのバージョンとしては、2023/4/23時点で最新バージョンである 3.2.47を使用していこうと思います。

参考：JSDELIVRのVue.jsのページ
https://www.jsdelivr.com/package/npm/vue

CDN版とビルド版

Vue.jsはCDNを取得してそれを使用するCDN版と、.vue形式のファイルに全ての情報を記載するビルド版の2種類があります(という理解です)。
ここでは、

・ひとまず慣れるまではCDN版を使う
・高度なことができるようになってきたらビルド版に移行する

としていきたいと思います。

Hello worldしてみる

まずは定番のHello worldをしてみようと思います。

ソースコードと結果イメージ

いきなり結論ですが、htmlファイルを以下のように記載することでHello worldできました。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>my vue hello world</title>
</head>
<body>
<div id="app">
  <p>{{ message }}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@3.2.47/dist/vue.global.min.js"></script>
<script  type="module">
  const { createApp } = Vue;
  createApp({
    data(){
      return {
        message: 'Hello World!'
      }
    }
  }).mount('#app')
</script>
</body>
</html>

こちらのhtmlファイルをブラウザで開くと以下のような感じになります。

簡単な解説

scriptタグ内にてcdnを使用してvueを読み込んでいます。
これによって後続のscriptタグ内で”Vue”を呼び出すことができます。
2個目のsciprtタグではtype=”module”を付与することでVueのモジュールの定義を行うことができます。
ここでは、Vue内の”createAppを呼び出し、データとして”message”の値を定義後に”#app”にマウントしています。”#app”はid=”app”と解釈できます。これはcssのセレクタの記述の仕方と同じですね。

で、遡る形になりますが、bodyタグ内の”<div id=”app”>”がこのマウントを受ける形になります。
“{{ xxx }}”はマスタッシュ(mustache)構文と呼ばれています。createAppにて定義されたデータがバインディングされます。この例においては、”message”に”Hello World!”が定義されているため、この”Hello World!”がセットされるということになります。
このあたりのデータ紐付けの仕組みがVue.jsのミソとなりそうです(※私の予想です)。