【今日からはじめるVue.js】Vue.jsのはじめのいっぽ(Vueインスタンスの作成～双方向データバインディングまで)

先日、udemyで提供されているVue JS 入門決定版！jQuery を使わない Web 開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ
の学習が完了したので基礎的なところからアウトプットしたいと思います。

今回は、Vue.jsで実装する上で基礎中の基礎となる内容について書いていきたいと思います。

１．Vueインスタンス、テンプレートの作成

Vue.jsで実装していくためには、何よりもまずVueインスタンスの作成が必要です。

1-1.Vue.jsを利用する

Vue.jsを利用するためには、公式サイトからパッケージをダウンロードする、NPM(パッケージ管理ソフト。Maven的な。)など行う必要がありますが、
学習を目的とするならば、CDN(Content Delivery Network)がベストでしょう。

HTMLに

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

と入力することで、利用可能となります。詳しくはインストール方法を。

1-2.インスタンス、テンプレートの作成

Vueインスタンスは、

var app = new Vue({})

という実装で作成できます。この際、変数(var app)として定義しているとコンソールなどでアクセスすることができます。

作成したVueインスタンス内に、

el :'任意の変数名'

を定義します。

el(element)というオプションによって指定した要素を使って
Vue.jsが作用を及ぼす範囲を決定します。

HTML側で以下

<div id="elで定義した任意の変数名"></div>

の記述を行うことで、divタグ内はVue.jsの実装が適用されます。
「el」のような定義を「オプションオブジェクト」と呼び、上記のようにVueインスタンス内に

オプション名 :　オプションに関する記述

と実装することで、Vue.jsがもつ様々な機能を使うことができます。

２．データバインディング

Vue.jsで代表的な機能は、「データバインディング」という仕組みです。
データバインディングとは、簡単にいうと、データを表示する部分(html)とデータを処理する部分(js)においてデータの連動が行われる仕組みです。実装を見てみましょう。

インプット欄の文字列を変更すると、表示されている文字列も変わります。

2-1.js側

扱うデータをVueインスタンスの「data」オプションで定義します。
dataオプションには、文字列だけでなく、数値、配列やオブジェクトなどを定義することができます。

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js',
    count: 0,
    user: {
      name: 'Tom',
      age: 18,
      address: 'america'
    },
    color: [
      'red', 'green', 'blue'
    ]
  }
})

2-2.html側

入力欄(input)を見てみると「v-model」と「{{message}}」という見慣れない記述があります。

１つずつみていきましょう

①{{message}}

「{{jsのdataオプションで定義した変数名}}」と定義することで
jsで定義した変数のデータを表示することができます。

「{{}}」のことは「Mustache(ますたっしゅ)構文」と呼ばれています。

ちなみに先述のとおり、divタグの外に書くとVue.jsが作用を及ぼす範囲外なので
htmlに記載した文字列がそのまま出力されます。

②v-model

input要素の中に、v-model:value=“jsのdataオプションで定義した変数名” と定義することで
html上の入力欄とjsで定義した変更のデータがバインディングされます。
「双方向データバインディング」を呼ばれています。

v-modelの使い方には注意すべきことがいくつか存在します。
こちらの記事が参考になりました。

「v-」ではじまる実装を「ディレクティブ」と呼びます。v-modelのほかにも、v-ifやv-forなどが存在するのですが
基礎の基礎ということで今回はここまでにします。おつかれさました。