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

vue.jsのインスタンスを理解したいと思ったので

vue.jsをふわっと触って動くものを作るなど学習していますが、vue.jsのインスタンスという概念についてあまり理解出来ていないようだったので調べてみました。

まず

  • vue.jsでSPAを作るには、まず、Vueインスタンスを作るところから始める
  • SPAを裏で動かしている実態
vue.js
new Vue ({インスタンスの中身})

または

vue.js
var 変数名 = new Vue({ Vue インスタンスの中身})

という構文で書きます。

インスタンスのなかで、下記のようにずらずらっとオプションというものがあります

(公式の目次のスクショです。)
スクリーンショット 2020-01-21 16.40.56.png

この中で、一番上にある「data」というオプションは、「どんなデータがあるか」を指しています。

書き方は、

vue.js
new Vue ({
  el:"#ID名",
  data:{
     プロパティ:  // ←データ部分
   プロパティ:   // ←データ部分
    }
  })

という感じで書きます。

dataの「どんなデータがあるか」 の他に、

  • どのHTML要素と繋がるか (el)
  • どんな処理を行うのか (methods)
  • どのデータを使って別の計算をするのか (computed)
  • どのデータを監視するのか (watch)

などの情報を、Vueインスタンス内に書いていきます。

参考図書

動かして学ぶ!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