Vue.jsの基本

※この内容はVue.js入門の〜基礎から実践アプリケーション開発までP33〜P35を勉強したときの自己流理解メモです。

さて、Vue.jsの勉強始めるぞー！と本をペラペラめくると、繰り返し出てくる言葉があるので、その言葉の解説を交えながらゆっくり進んで行く。

まずはVue.jsの導入から。

導入の基本

Vue.jsの導入のために、scriptタグを使って、Vue.jsを読み込む。

<!DOCTYPE html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

これを読み込むと、グローバル変数Vueが定義される。

グローバル変数とは、オブジェクトつまり、様々な何かを持ち合わせているもの。

グローバル変数の役割は、コンストラクタである。

コンストラクタ
オブジェクトを生成するための関数（JSにおいては）。Vueインスタンスをコンストラクタとして使う場合は、new演算子を使う。

new〜〜Vue（省略）と書くことで、新しくオブジェクトを作成できる。そして生成されたオブジェクトをVueインスタンスという。このインスタンスをDOM要素にマウント（適用）すると、Vue.jsの機能がそのDOM要素内で使えるようになる。

インスタンス : 具体的な一つのもの（オブジェクト）。振る舞い・属性が定義されているもの。

var インスタンス　= class(データ);

(例)
class Button {
    属性、関数。定義。
}

let Vueインスタンス　= Buttonクラス（属性を代入）;

Vueクラス（） 関数のことをコンストラクタという

コンストラクタの役割は、インスタンスを作る関数
コンストラクタの中身は、引数で受け取ったデータとクラスの定義からクラスのインスタンスを作る

コンストラクタにデータを渡して生成される値
コンストラクタの引数には、オプションオブジェクトを渡す（?）

Vue.jsはオブジェクト指向でできている。
→ Vueクラスはすでに作られている。つまり定義されてる。
→ インスタンスを作って、そのインスタンスを操作するプログラミングのやり方（ここでのインスタンスとオブジェクトは同義）
→ つまりインスタンスをつくらなければいけない

VueクラスのインスタンスをVueインスタンスという。
インスタンスを作るにはコンストラクタが必要なので、コンストラクタの書き方を知らなければならない。

今後は1つづつ、コンストラクタを見ていきながらインスタンスの作り方を勉強していく。

Vueクラスのインスタンスを作れるようになる〜コンストラクタの書き方習得編 Part1〜へ続く...