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

Vue.jsについて基礎的なことを少しまとめました

vue.jsとは

  • データと表示を繋げる仕組みです。
  • MVVM(Model-View-ViewModel)という考え方を元に作られている

MVVM(Model-View-ViewModel)とは

  • Model・・・Vue内に用意したデータ
  • View・・・HTMLで表示している要素
  • ViewModel・・・それらをどのように繋ぐか

MVVMの仕組みを考える際

  1. データは何か
    • web上で変化する部分は何か。そのために必要なデータを考える。
  2. 表示する要素は何か
    • そのデータを、HTMLのどこに、どのように表示するかを考える
  3. どのように繋ぐか
    • HTMLのどこを操作された時にデータがどのように変化するかを考える

という流れで考える

データを作って、表示する要素を用意して、繋ぎ方を決める!

Vue.jsの主な機能

機能 書式
データをそのまま表示する {{データ}}
要素の属性をデータで指定する v-bind
入力フォームとデータを繋げる v-model
イベントと繋ぐ v-on
条件によって表示する v-if
繰り返し表示する v-for
データを使って別の計算をする computed
データの変化を監視する watch
表示/非表示にアニメーションする transition
部品にまとめる component

などなど・・・

参考図書

動かして学ぶ!Vue.js開発入門

selftalk______
学んだことの備忘録にしたいと思います。めちゃくちゃど初心者です。
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