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 |
などなど・・・