Help us understand the problem. What is going on with this article?

Vue.jsを学ぶ #1

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を1セットとして他機能とは分離させる仕組み。
つまり上記ファイルをよりスマートに扱うことができる。
例)header...HTML+CSS+JavaScript, main...HTML+CSS+JS, footer...HTML+CSS+JS
このように、ヘッダー・メイン・フッターを独立したコンポーネントとすることで、ファイル管理が容易になる。

2に続きます。

tomoyuki_kt
2020/05 Rails,AWS,Docker等学習開始。 地方公務員からWeb系エンジニアに転職しました。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away