【JavaScript】Vue.jsの基本（1）【入門】

こんにちは。今回はVue.jsの基本的な使い方をご紹介します。
実践には及びませんが、初心者の方にはおススメの記事になります。

Vue.jsとは

JavaScriptのフレームワークの1つでUI（ユーザインタフェース）を構築するフロントエンドアプリケーションの開発で使用されています。
また、SPA（Single Page Application）開発に使われることが多いフレームワークになります。

SPAとは単一ページでコンテンツを切り替えるWebアプリケーションを指していますが、以前はFlashが多くの方で使用されていました。
ご存じの方も多いと思いますが、Flashは2020年末にサポートが終了することもあり、Vueを使用するようになった開発者も多いと思います。

まずは、Vueオブジェクトのインスタンスを作成します。
コンストラクタで引数にオプションを設定することができます。

idやclassを指定して、どのHTMLとVueインスタンスを紐づけるか、指定できます。

<div id="sample"></div>

new Vue({
  el : "#sample"
})

Vueで使用するデータを定義することができます。

<div id="sample">
  <p>こんにちは、{{ name }}さん</p>
</div>

new Vue({
  el: "#sample",
  data: {
    name: "山田　花子"
  }
})

// 処理結果
こんにちは、山田　花子さん

Vueで使用する関数を定義できます。

<div id="app">
  <p> {{count}}回</p>
  <button v-on:click="count_up">カウント</button>
</div>

new Vue({
  el: "#app",
  data: {
    count:0
  },
  methods: {
    count_up: function() {
      this.count++;
    }
  }
})

実行画面でボタンをクリックするたびに「1回…2回…」とカウントが上がっていきます。

dataオプションの値を使用して、関数で別の計算をする。
計算結果がキャッシュに格納されるため、処理が高速なのが特徴。

dataオプションの特定の値を監視して、変更時に関数を実行する。

先ほどのdataオプションの項目にもありましたが、Vueでデータを表示するのにマスタッシュを使用することで表示することができます。

例：
<p>こんにちは、{{ name }}さん</p>

マスタッシュとは、口ひげの意味があり、「{」を横にすると口ひげに見えることからこの名が付いています。

いかがでしたでしょうか。
Vueは最近JavaScriptで特に注目を集めているフレームワークの一つです。

良かったら次回の記事もご覧ください。