Vue.jsとフレームワークの基礎

この項では、主に「フレームワークとは・JSとは」や、 Vue.jsの基本的な説明がされていました。

Qiita等でも載っている話なので、説明はそちらに譲ります。強いて言うならば「オブジェクト指向に触れた人間であれば、導入部分は簡単に消化できる」でしょうか。

Vue.jsをはじめよう！

こちらも前半は似たような話が続いていましたが、途中からVue.jsならではの話が出てきています。それが「ライフサイクルハック」

何かというと、

コンポーネントがDOMと結びついた瞬間や、DOMからコンポーネントが削除された瞬間など、いくつかの特殊なタイミングでVueが自動的にコンポーネントへ通知を送ってくれる仕組み

とのこと。ハック名は固定で、コンポーネントのインスタンスが生成された直後や、コンポーネントのインスタンスがDOMと結びつく前後等、様々なものが用意されていました。

これらを利用して、コンポーネントのデータを初期化したりします。

「ディレクティブ」についても述べられていて、「v-〇〇」と記載されている独自属性を使って、様々な機能を利用することができるものを指します。 Vue.jsについてQiitaを漁っていると大体のページで出てくるキーワードですね。

色々あります。

マスタッシュでテンプレートにバインドしたデータがテキストとして出力される前に、何らかの可能を加えられる機能。

俗に言うキャッシュ機能

JS的な話なので割愛ただし、イベントの登録時はv-on:イベント名としてやる必要がある。

データの変更を検知して、イベントハンドラを呼び出してくれる。算出プロパティと置き換えられる場合もあるが、ウォッチャは非同期で動くので、外部データ取得時などは重宝する。また、ユーザーの操作で高い頻度で処理が発生する場面についても重宝する。

算出プロパティのウォッチも可能。

v-modelを使えば、入力フォームの内容もバインド出来る。テキスト・ラジオ・チェックボックス等でバインドの仕方が変わるので注意。

要素に動きをつけられる機能。フェードインやフェードアウトがこれに該当。他にもスライド系がある。

ここまでが1章・2章の内容でした。基本的なことから、Vue.jsならではの機能も紹介されていて、 Vueで何が出来るかのイメージがしやすかったです。

次回からは実際どのようにして画面を作っていくかを見ていきます。