初投稿です。
投稿する中で徐々に慣れていけたらなあと思います。

今回は最近、Vue.jsについて勉強してたので、基本編としてまとめていきます。

Agenda：Vue.jsとは、データバインディング、ディレクティブ、Vue.jsの基本構造

参考：
【基礎から学ぶ Vue.js】（下リンク）を購入して読みました。凄くわかりやすかったので一部この記事に書くにあたって参考にしました。ありがとうございます。
https://www.amazon.co.jp/%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E5%AD%A6%E3%81%B6-Vue-js-mio/dp/4863542453

Vue.jsとは

Vue.jsとはJavaScriptのフレームワーク。（React、Angularに並ぶ三大JSフレームワーク）
本格的に触っているのはVue.jsのみですが、良い点はいくつかあります。

Vue.jsのメリット
・学習コストが低い
　　→ReactやAngularに比べると、HTMLを多少触っただけでも扱いやすい気がする。
・融通が効いてたまらない
　　→拡張機能や開発サポートツールも数多く提供されている。便利。
・ドキュメントの豊富
　　→公式サイト：https://jp.vuejs.org/index.html

公式サイトをみたら一目瞭然です。Vue.js以外にもVuexやNuxt.jsについても豊富なドキュメント。しかも日本語って、、もうなにやってくれてるの（←ここ家庭教師のトライ）。結局何が言いたいかというと「　素晴らしい！！　」

データバインディング

データと描画を同期させる仕組みのこと。
HTMLで作成するにあたりUIを操作するのは、JavaScriptではご存知のDOM操作です。

JavaScript

var element = document.getElementById('text'); //要素を探す
element.innerText = 'テキスト入力';               //要素を更新する

UIのパターンが膨大になるほどDOMの更新作業が面倒になり、小さなミスを生み出す場合もあります。Webサイトの重大な情報が間違っていたなんてなるととんでもないですね。

面倒な処理をどうにかするために現れたのがデータバインディング。これはJavaScriptのデータ（テキストなど）とそれを使用する場所を紐づけて、データに変化が起きたときでも自動的に反映させます。以下は例です。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Hello Vue.js!</title>
</head>

<body>
    <!-- Vue.jsのサンプル -->
    <div id="app">{{ message }}</div>
    <!-- Vue.js読み込み -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
    <script>
    /*データバインディング*/
    var app = new Vue({
        el : '#app',
        data : {
            message : "Hello Vue.js!"
        }
    })
    </script>
</body>
</html>

この例ではid="app"の場所にある{{ message }}においてデータバインディングがされています。単純なコードではありますけどVueのオプションにて dataのmessageの値が変わると自動的に変わります。

ディレクティブ

Vue.jsのテンプレートには、v-ifやv-bindといったVue.jsならではの"属性"があります。それぞれ特別な役割を持った属性です。これを「ディレクティブ」と呼びます。

HTML

①　　<div key="id"></div>
②　　<div v-bind:key="id"></div>

上の２つはどちらもkey属性にidという値を指定していますが、全く別物です。

①...単純な「id」という「文字列」です。
②...v-bind:keyは、ディレクティブになっている「プロパティ」です。

Vue.jsの基本構造

アプリケーションの作成にあたって、コンストラクタ関数Vueを使ってVueインスタンスを作成しましょう。（下のような感じで）。この中身においてオプション（どういうデータにどういう処理をしていくか）を追加して生きます。

Vue.js

var app = new Vue({
   //オプションを追加
})

オプションには使用するデータやメソッドを定義しましょう。
代表的なものを５つ挙げました。

Vue.jsその2

var app = new Vue({
        el : '#app',　 //..①
        data : {
            //..②
        },
        computed : {
　　　　　　　　　　　　　　　　　　　　　　　//..③
        },
        created : {
            //..④
        },
        methods : {
            //..⑤
        }
    })

①el
アプリケーションを紐づける要素のセレクタ
②data
アプリケーションで使用するデータ。配列やオブジェクトも登録可能
③computed
関数によって算出されたデータ。通称算出プロパティ
④created
アプリケーションの初期化から生成終了までのサイクルにおいて、特定のタイミングで呼び出されるもの
⑤methods
イベントハンドラ等の細かな実装、アプリケーションで使用するメソッドの登録

まとめ

今回は雑ではありますが、Vue.jsの基本編としてまとめてみました。（Part1なんでまだあるよっていう予告）
視覚的にもわかりやすいと思いますし、大規模なプロジェクトにおいても複雑な処理ができるVue.jsはほんと素晴らしい。

以上です。
最後までみてくれてありがとうございました。
※　随時編集・追加していきます（もちろんVue.jsの続きも記載していきます）。

Vue.js【基本】をまとめてみたPart1

Vue.jsとは

データバインディング

ディレクティブ

Vue.jsの基本構造

まとめ