#おさらい

vue.jsとは

vue.jsは、Webアプリケーションのユーザインターフェースを効率的に構築するのに適したjavaScriptのフレームワークです。

SPA

SPAは、基本部分が単一のページで構成されるWebアプリケーションです。
JavaScriptでサーバと通信してDOMを操作することでコンテンツを切り替えます。

DOM（Document Object Model)

JavaScriptからHTML文書やXML文書の要素を操作する仕組みです。
Vue.jsはリアクティブなフレームワークであり、JavaScript側のVueインスタンス内のデータとHTMLを基本としてテンプレート構文に記述した内容がバインドされデータを変更すると、それがすぐDOMツリーに反映されWEBブラウザの表示が更新されます。

Vue CLI

Vue CLIは、大規模なVueアプリケーションを効率的に作成するためのツールです。
Node.jsやVueRouterなどと連携していくことにより、シングルページアプリケーション（SPA）を効率的に開発できます。

#vue-cliでプロジェクト作ってみた

vue create hello

cd hello

シングルファイルコンポーネント

拡張子が「.vue」で、javascript,html,cssがひとまとまりになったもの。
(ES2015のモジュール機能を使用している）

Helloしてみた

Hello.vue

<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
  name: "Hello",
  props: {
    msg: String
  };
</script>

<style scoped>
h1 {
  color: red;
}
</style>

やっぱり、VueCLIよりVueを先に勉強しよう。
なので一旦こちらは休憩します。