vue勉強

• const vm = new Vue ({のVは大文字じゃなきゃ動かない

• <input type="text" v-model="message">のv-modelみたいなv-〇〇はディレクティブ（属性ディレクティブ）といって、「ここを動かしまっせ」みたいな印の役割をしている
  直訳で 指示 という意味
  ディレクター（監督）から出る指示のニュアンス

• バインディング
  相互に関連付けること。
  双方向データバインディングとかいう

• v-model
  フォーム入力バインディング。
  input要素とかtextarea要素とかのフォームの状態を、p要素などにリアルタイムで関連付けることができる。
  textareaに入力した文言をp要素内に出力するなど。
  公式

• idとエレメント名(elの値)が一致していることを確認する

• v-forのときにリストの配列名を複数形にしたときにsの付け忘れに注意

• ES6
  スプレッド構文
  アロー関数

• マウント：mounted は Vue.js におけるライフサイクル(参考)において、仮想 DOM が DOM に置き換わるタイミングを指します

• const
  定数。多分、「以下を定義します」みたいな意味

• vm
  view model　の略

• v-bind:class
  状況によってクラスを可変にする
  チェックボックスにチェックが入っていたらクラス（スタイル）を変えるみたいなことができる
  公式

• filter()メソッド
  例えば、「todoリスト内のアイテムをふるいに掛けてチェックが入っていないアイテムだけを並べる」みたいなことができる。
  配列にフィルターを掛けてあたらしい配列を生成する。
  カッコ内の引数には関数を渡す。その関数に従ってフィルターをかける

• v-for
:key(v-bind:keyの略)を必ず付ける。
  固有（ユニーク）なidなどをリストアイテムに付す役割。
  理由は固有のidを振らないとスタイルやチェックの有無などの状態を紐付けられないから。
  keyを持ったアイテムは、状態を維持したまま並べ替えることができるが、keyを持たせないと並べ替えや削除などを行ったときにインデックス番号が状態を持ってしまい、状態を紐付けられない
  わかりやすい説明
  公式

• el,props,data,methodsなどの名前
  コンポーネントオプション
  推奨される順序

• 簡単なhello world

script src="https://cdn.jsdelivr.net/npm/vue"
#app
  | {{testVal}}
javascript:
  const app = new Vue({
    el: '#app',

    data: {
        testVal: 'Hello World!' //testValを定義
    }
  });