Vue.jsを学習するにあたり、言語化するため記事を作成しました。
ディレクティブ
「v」から始まる属性をディレクティブと呼ぶ。主にデータバインディングを行うために使用される。
データバインディング・・・データと描画を同期させる仕組み。データに変化があれば、自動的にDOMを更新させる。例としてE-mail入力欄に入力した時に確認として入力した文字列を表示させて確認させる仕組みなど。
filename.rb
① <div key="id"></div
② <div v-bind:key="id"></div>
①の場合は文字列、②の場合はv-bindであるためJavaScriptの変数となる。
v-bind=ディレクティブ :value=引数 .sync = "message"=値
引数や値はオプションで付き、②の場合は:key引数のオプションが付属している。
コンポーネント
機能ごとにJavaScript, HTML, CSSを１セットとして他機能とは分離させる仕組み。
つまり上記ファイルをよりスマートに扱うことができる。
例)header...HTML+CSS+JavaScript, main...HTML+CSS+JS, footer...HTML+CSS+JS
このように、ヘッダー・メイン・フッターを独立したコンポーネントとすることで、ファイル管理が容易になる。