vue.jsとは
- データと表示を繋げる仕組みです。
- MVVM(Model-View-ViewModel)という考え方を元に作られている
MVVM(Model-View-ViewModel)とは
- Model・・・Vue内に用意したデータ
- View・・・HTMLで表示している要素
- ViewModel・・・それらをどのように繋ぐか
MVVMの仕組みを考える際
- データは何か
- web上で変化する部分は何か。そのために必要なデータを考える。
- 表示する要素は何か
- そのデータを、HTMLのどこに、どのように表示するかを考える
- どのように繋ぐか
- HTMLのどこを操作された時にデータがどのように変化するかを考える
という流れで考える
データを作って、表示する要素を用意して、繋ぎ方を決める！
Vue.jsの主な機能
| 機能 | 書式 |
|---|---|
| データをそのまま表示する | {{データ}} |
| 要素の属性をデータで指定する | v-bind |
| 入力フォームとデータを繋げる | v-model |
| イベントと繋ぐ | v-on |
| 条件によって表示する | v-if |
| 繰り返し表示する | v-for |
| データを使って別の計算をする | computed |
| データの変化を監視する | watch |
| 表示/非表示にアニメーションする | transition |
| 部品にまとめる | component |
などなど・・・