この記事は何

Vue.jsを使ってTODOリストを作るときに調べた内容をメモ。 Vue.jsのガイドを上から読みつつ理解し、Flaskでバックエンドを作成し、環境設定をDockerfileで記述してHerokuでデプロイするまでの流れを理解したい。

用語

ディレクティブ
SPA: single page application
Vue インスタンス — Vue.js
{{}}: マスタッシュタグ
データバインディング: データと描画を同期する仕組みを指す用語
リストレンダリング — Vue.js
キーコード：キーコード一覧表

vue.js

vueを記述するにあたって『スタイルガイド | Vue.js』に目を通した上でどのようなアンチパターンがあるかを理解しておく。『俺がやらかしたVue mixinのアンチパターンから学ぶmixinの使い方と代替案』などいろいろなサイトでバッドプラクティスを説明しているページがあるので、過度に複雑な実装になりそうならば一度手を止めて調査したい。

とりあえずスタイルガイドに沿って、

複数単語で用途が明確なコンポーネント名にする
用途が定まっているPropの定義を曖昧にせず、誤ったデータを渡した時などのエラー検出をしやすくする
v-for に対しては常に key を指定することでパフォーマンスを向上させる
- アイテムごとに一意のキー (:key="todo.id" など) を追加することで、 Vue に対してどうしたらより予期した通りの動作ができるかを伝えることができます。
v-for と v-if は優先度が異なり、併用は避ける
モジュールスコープを使用して、外部からプライベート関数にアクセスできないようにする

など、詳細はドキュメントを読む。インストールはCDNを使用すれば最も簡単にセットアップできる。

ディレクティブ

v-text = テキスト表示
v-html = innerHTMLの更新
v-show = 表示切り替えのトリガ

v-for

リストレンダリング — Vue.js

v-if

条件付きレンダリング — Vue.js

v-if ディレクティブは、ブロックを条件に応じて描画したい場合に使用されます。ブロックは、ディレクティブの式が真を返す場合のみ描画されます。

複数の要素の描画を切り替える場合は<template>を使用し、elseでの表示切り替えは v-else・v-else-ifを使用する。表示切り替え時に値を再利用するかどうかは key によって制御できる（key による再利用可能な要素の制御を参照）。

v-showとv-ifの使い分けについては『v-if vs v-show』を参照。v-showはCSSの display: none;で表示を消してるがHTML要素としては存在していると理解しておく。

一般的に、v-if はより高い切り替えコストを持っているのに対して、 v-show はより高い初期描画コストを持っています。そのため、とても頻繁に何かを切り替える必要があれば v-show を選び、条件が実行時に変更することがほとんどない場合は、v-if を選びます。

v-bind

クラスとスタイルのバインディング — Vue.js

v-bind:属性="プロパティ名"といった形で指定をする。例えば、v-bind:class にオブジェクトを渡すことでクラスを動的に切り替えることが可能になる。

v-model

フォーム入力バインディング — Vue.js

v-model はユーザーの入力イベントにおいてデータを更新するための基本的な糖衣構文 (syntax sugar) ... v-model は任意の form 要素にある value、checked、または selected 属性の初期値を無視します

v-modelには修飾子をつけることができて、修飾子がつくと対応した機能が実行される。

.number: ユーザの入力を Number として自動的に型変換したい
.lazy: change イベントの後に同期する = テキスト入力を終了してフォーカスが別の箇所になるまで実行しない
.trim: ユーザの入力から空白を自動的に取り除きたいとき

v-modelとv-bindを使ってマークダウンを編集するテキストエリアを作ってみる。はじめてcodepenを使用してみた。

See the Pen by nanja (@nanjakorewa-the-selector) on CodePen.

v-on

イベントハンドリング | Vue.js

v-on ディレクティブを使うことで、DOM イベントの購読、イベント発火時の JavaScript の実行が可能になります。これは通常 @ に省略することができます。v-on:click="methodName" もしくは @click="methodName" と書いて使用します。

特定の入力に対する処理を指定するにはキー修飾子を指定する。キーコードは非推奨である点に留意しておく。 CtrlやShiftはシステム修飾子キーを使用して指定できる。

算出プロパティ

算出プロパティとウォッチャ — Vue.js

テンプレート内に式を書けるのはとても便利ですが、非常に簡単な操作しかできません。テンプレート内に多くのロジックを詰め込むと、コードが肥大化し、メンテナンスが難しくなります。 ... 上記の理由から、複雑なロジックには算出プロパティを利用すべきです。

入力した数値が変化すると変数の中身を同時に変更できる。算出プロパティ(computed)はキャッシュされて、依存するデータが変更されたときにだけ再算出される。そのためリロードした時にデータが同じだと再計算されない。一方、methodsにはキャッシュ機能がないため再計算されるという理解でいる。なので、参照しているデータの変更の有無に関係なく実行したい（乱数を作りたいなど）時や、参照しているデータの変更時に即座に処理を実行したくない時はメソッドを使う。

参考文献

監視プロパティ

算出プロパティとウォッチャ — Vue.js

Vue は Vue インスタンス上のデータの変更を監視し反応させることができる、より汎用的な監視プロパティ(watched property) を提供しています。

監視プロパティには deep と immediate というオプションがあり、deep がtrueの時はネストされたオブジェクトも監視対象になり、変更があると処理を実行する。immediateがtrueだと初期読み込み時にも処理が実行されるようになる。 watchの連続呼び出しに対する負荷対策などは必要になったらまた調べたい。

トランジション

Enter & Leave トランジション | Vue.js

DOM からアイテムが追加・更新・削除されたときにその表示のトランジション効果を適用する指定ができる。cssのtransition の表示も理解しておく必要がある。

transition - CSS: カスケーディングスタイルシート | MDN

ドキュメントのトランジションの使用例で最低限の表示はできるので、状態のトランジション | Vue.jsは必要なタイミングで参照。データを参照してデータを表示する要素サイズを動的に変更したい場合などは状態のトランジションを使用する必要がある。

コンポーネント

コンポーネントは再利用（同じものを複数使用）できて、カスタム属性を追加してデータの受け渡しができる。ローカル登録＝特定のVueインスタンスの中に登録し、そのVueインスタンス内部でのみ使用できる登録方法。ローカル登録をする最小限のコードは

<script>
    var MyFirstComponent = {
        template: '<h1>This is my first component!</h1>'
    }
    new Vue({
        el: '#app',
        components: {
            'tag-name': MyFirstComponent
        }
    })
</script>