vue.jsについて勉強メモ

単一ファイルコンポーネント

画面の部品ごとにHTMLタグ・JavaScriptのコード・スタイルの3点セットで分割
<template>
 <script>
  <style>

Vue.jsとは

Vue.js（ビュージェイエス）は，インタラクティブなUIを構築するためのJavaScriptライブラリです。
Webサイト内のウィジェットや管理画面のダッシュボードといったビュー（view）層に特化しています。
設計の特徴としてMVVMパターンに影響を受けています。

Vue.jsのアーキテクチャ

リアクティブシステム

フレームワークが備えている仕組み
Vue.jsはDOMとJavaScriptのデータを同期するためにリアクティブなデータバインディングを提供します。
HTMLテンプレート内でデータバインディングを指定することで，DOMとデータが同期され続けます。
データを変更するたびにDOMが，DOMを変更するたびにデータがそれに応じて更新されます。
このような双方向データバインディングにより，面倒なデータとDOMの同期から解放され，
データ駆動的にアプリケーションを設計・実装することが可能になります。

コンポーネントシステム

Vue.jsはUIをコンポーネント化する仕組みを持ちます。
Webサイト/WebアプリケーションのUIをコンポーネントとして設計し実装すれば，高い再利用性やカプセル化で開発が楽になります。
コンポーネントを組み合わせることで，大規模なWebサイト/Webアプリケーションの構築も容易になります。

レンダリングシステム

Vue.jsは仮想DOM（Virtual-DOM）でDOMを高速にレンダリングします。
他のライブラリ・フレームワークにも仮想DOMを採用しているものがありますが，Vue.jsではHTMLテンプレートでわかりやすく開発でき，
かつ最適化された高速なレンダリングができるという優位性を持ちます。
上述のリアクティブシステムと仮想DOMを組み合わせることで可能となりました。
仮想DOMは特に意識せずに使えますが，より柔軟な動作を指定することも可能です。

基礎文法

ディレクティブ

ディレクティブは，"v-"から始まるVue.jsで利用できる特別なHTMLの属性です。
属性値の変化に応じたDOM操作や，DOMイベントのハンドリングを実現します。
Vue.jsが標準で提供しているディレクティブの他に，自身でディレクティブを定義することも可能です。
以降では，v-for, v-ifといったよく利用されるディレクティブについて取り上げます。

#### リストレンダリング
Vue.jsでは，v-forというディレクティブを利用して，配列のデータをリストレンダリングすることができます。

var vm = new Vue({
el: '#example',
data: {
    items: [
    {
        name: 'みかん',
        price: 100
    },
    {
        name: 'もも',
        price: 300
    },
    {
        name: 'いちじく',
        price: 500
    },
    {
        name: 'メロン',
        price: 1000
    }
    ]
}
});

<div id="example">
<li v-for="item in items">
    <p>{{ item.name }} は {{ item.price }}円</p>
</li>
</div>

Vue Routerの基礎

ue.jsのプラグインとして公式に提供されているSPA構築のためのルーティングライブラリがVue Routerです。
Vue Routerは，ページ遷移先URLに対応するViewのレンダリング管理機能の他にも，便利なフック関数や遅延ローディングなどの機能を持っています。
インストールするにはスクリプトタグでVue.js本体に続けて読み込んでください。以下のようにjsdelivrなどのCDNサービスを使うと便利です

ルートの定義

ルートとは，URLとViewの情報を保持する1つのレコードです。
Vue Routerにおけるルートは，前回の記事で解説したVue.jsのコンポーネントを特定のURLにマッピングしたオブジェクトとして，
ルーター初期化時のroutesオプションに設定されます。


/ ルートオプションを渡してルーターインスタンスを生成します
var router = new VueRouter({
// 各ルートにコンポーネントをマッピングします
// コンポーネントはVue.extend() によって作られたコンポーネントコンストラクタでも
// コンポーネントオプションのオブジェクトでも構いません
routes: [
    {
    path: '/top',
    component: {
        template: '<div>トップページです。</div>'
    }
    },
    {
    path: '/users',
    component: {
        template: '<div>ユーザー一覧ページです。</div>'
    }
    }
]
})

// ルーターのインスタンスをrootとなるVueインスタンスに渡します
var app = new Vue({
router: router
}).$mount('#app')

SPAとは(シングルページアプリケーション)

1つのHTMLをロードして，ユーザーインタラクションに応じて動的にページを更新するWebアプリケーション

参考

https://reffect.co.jp/vue/vue-js-basic
https://cr-vue.mio3io.com/guide/
https://router.vuejs.org/ja/guide/#html