この記事を書くにあたって

私は都内のWeb制作会社で働くエンジニアです。今の現場ではPHPを使ったスクラッチ開発をしています。今後モダンな企業への転職を考えているので勉強面ではLaravelを学んでおり、その延長線上でVueの勉強もしているので記事にまとめてみました。

Vue.jsとは

Vue.js公式サイト
Evan You氏が創始者である　Javascriptのフレームワークです。リリースは2014年にされました。

Vue.jsは、他のjavascriptのフレームワークと比べてシンプルであり、学習コストが低いと言われています。

実際にVue.jsを使ってみた

インストール

今回はCDNを使って実装しました。インストールの必要はないので、とても簡単にVue.jsを、使うことができます。
中規模開発ではnpmやyarnを利用して、インストールする必要があるみたいですね。

<script src="https://unpkg.com/vue"></script>

Hello Worldを出力

シンプルにHello Worldを表示させてみます。

<!DOCTYPE html>
<html>
<head>
  <title>stady Vue</title>
</head>
<body>
  <div id="app">
    <h1>{{ message }}</h1>
  </div>

  <script src="https://unpkg.com/vue"></script>
  <script src="/app.js"></script>
</body>
</html>

const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello world'
  }
})

ソースコードについて

HTMLのscriptのCDNからVueのソースコードを取得しています。javascriptのロジックはapp.jsに切り出しています。

app.jsでは、Vueオブジェクトのインスタンスをnewで生成しています。Vueオブジェクトのインスタンスが生成されることで、Vueアプリケーションが起動します。
設定オブジェクトによって、どのデータ（変数）がDOMのどの要素と関連づけられるのか、どの関数がどのイベントと関連づけられるのか、この設定オブジェクトから取得します。

✅el

まず一つ目のプロパティはelです。

el: '#app'

elには、#appのように、DOM要素を指し示すセレクタが指定されます。このプロパティの値は、Vueアプリケーションの範囲、Vueの管轄領域を表します。今回は<div id="app">タグ内部がVueアプリケーションとして認識されるということです。

✅data

二つ目のプロパティはdataです。

data: {
    message: 'Hello world'
  }

dataは、Vueアプリケーション内で利用できるデータ（変数）を表します。Vueアプリケーション内とはつまりelでした範囲です。変数名とその値を組みにしてオブジェクトが指定されます。

✅テンプレート

<div id="app">
  <h1>{{ message }}</h1>
</div>

<h1>{{ message }}</h1>　に注目してみてください。

二重括弧で指定することによって値が表示される。
設定オブジェクトのdataプロパティに指定したオブジェクトに含まれている、messageがアプリケーション内で使用できる
Vueインスタンスが起動すると{{ message }}の部分がHello Worldに書き換えられ、<h1>Hello world</h1> というDOMが生成された。

　まとめ

#app のように、DOM要素を指し示すセレクタが指定されます。このプロパティの値は、Vueアプリーケーションの範囲、Vueの管轄領域を表します。
dataは、変数名とその値を組みにしたオブジェクトが指定されます。Vueアプリケーション内で利用できるデータ（変数）を表します。