Vueの勉強をしよう ～2:使ってみよう (Vue基本編) ～

Vueをインストールしたのであれば実際に使ってみよう。
（基本的にはCDNでインストールしていることを想定しています。）
今回はVueを使う場合の考え方と、基本パターンを記載することにします。

今回の大事なこと

Vue.jsは、「どの要素」に「何」を割り当てるのかを指定できることが大事。
基本パターンとしては、以下の形式で記載する。

Vue.createApp('1:何を割り当てるか').mount('2:割り当てる場所')
1: 割り当てる情報はVue独自のルールがある  
2: 割り当てる場所は、CSSセレクタと同様。

この内容を意識してサンプルを理解してみる。

Hello Worldを出してみる

HTMLとJSファイルをそれぞれ分割して書くとこんな感じです。

HTML

  <div id="helloWorld">
    {{ message }}
  </div>

javascript

const HelloWorld = {
    data() {
        return {
            message: 'Hello World'
        }
    }
}
Vue.createApp(HelloWorld).mount('#HelloWorld');

const HelloWorldがVue用の割り当て情報となっています。
{{message}} が割り当て対象となります。Vueでの割り当て対象は{{}}で囲われた文字列が対象となります。*1
'#HelloWorld'は、CSSのセレクタ上 id="HelloWorld"で指定された箇所を示します。

なので、上記は以下の流れをやってることになると思います。

• id="HelloWorld"で囲われたエリアの
• messageを
• 「Hello World」にかきかえる

今回は、こんな流れで基本的な値の割り当てを確認しました。
次回以降はもう少し細かいパターンで確認していきたいと思います。

*1:{{}}のことをMustache(口ひげのこと)と呼ぶこともあります