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

Vue.jsとは

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

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

Vueインスタンスを作成

new Vueでインスタンスを作成

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

オプション

el : element

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

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

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

data

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

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

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

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

methods

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回…」とカウントが上がっていきます。

computed

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

watch

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

データ表示：マスタッシュ構文

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

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

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

ひとこと

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

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

投稿 【JavaScript】Vue.jsの基本（1）【入門】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。