初心者の自分がvueをやろうとして初心者向けの本を読んでも分からない単語でつまづくことがあったので、自分の経験を踏まえて分からなかった箇所をメモしていく。
#Vue.jsとは
Vue.js：https://jp.vuejs.org/v2/guide/
双方向データバインディング（リアクティブ）な設計で実装する、MVVM（Model-View-ViewModel）モデルを起用したjsフレームワークです。
・大規模開発
・アプリ開発
・SPA
等複雑なページを効率良く、煩雑にならないように構築する手助けをしてくれます。
MVVMとは
設計思想のひとつ。
他にはMVC等がある。
（中級者以上向けだと思うので、初心者の段階ではふんわりと、設計の概念と思っていれば良いかと）
基本フロー
1. ページにVue.js本体を読み込む
vue.js本体を読み込むとVueオブジェクトが生成される（グローバル変数Vueが生成される）。
2. jsファイルにVueインスタンスを記述する(DOMをマウントする)
指定したhtml要素に対応するインスタンスを生成する。
インスタンスはこんな感じでnew Vueで作成するやつ↓
new Vue({
el: 'html element',
data: {
},
method(){
},
})
↑のhtml elementの箇所がvueで操作する範囲になります。
※vue操作はデータバインディングで使う範囲なので、それ以外は普通のノーマルなjsでDOMを操作します。
Vueインスタンスについて：https://jp.vuejs.org/v2/guide/instance.html
3. Vueインスタンスにオプションを記述する
指定したhtml要素内でvue.jsを操作できるようになります。
オプションの種類：https://jp.vuejs.org/v2/api/#%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3-%E3%83%87%E3%83%BC%E3%82%BF
4. コンポーネントやmixinや色んな技術で拡張していく
#用語
| 用語 | 説明 |
|---|---|
| グローバル変数Vue | Vue.js本体を読み込んだときに生成されるオブジェクト。 |
| Vueインスタンス | Vue.jsで構築するに当たってまず最初に生成するコンストラクタ。 |
| コンストラクタ | オブジェクトを生成するための関数。(例 new Vueで作ったVueインスタンス |
| オプションオブジェクト | Vueインストラクタを生成するときに指定するオプション。 |
| コンポーネント | 再分化したモジュール郡。再利用できるモジュールにそれぞれ機能を分けて管理することで、プロジェクト内の見通しと開発効率を上げる。 |
| Mastache | {{}}←コレ。Vue.jsで使用するテンプレート構文です。データをMastacheで囲むとテキストとして展開されます。 |
| ディレクティブ | v-show、v-if、v-on、...等、v-から始まるデータバインディングをするための記述。 |
| プリコンパイル | 事前にブラウザが取り込みやすいようにjsのコンパイルをしておくのでパフォーマンスが良い。 |
| JustInTimeコンパイル(JIT) | webページを初期表示するときに、ブラウザ側でjsをコンパイルするのでプリコンパイルより反応が遅い。 |
| 単一ファイルコンポーネント | SFC(single file component)と省略される。template、script、cssをひとつのファイルにまとめた記述方法。 |
#その他メモ
コンポーネント
記述方法としては2パターンある。
・Vueオブジェクトを拡張してグローバルに登録する記述方法
・オブジェクトを作成してvueインスタンスに登録する方法
Vueオブジェクトを拡張してグローバルに登録する方法
Vue.component('my-component', {
// オプション
})
オブジェクトを生成してvueインスタンスに登録する方法
//コンポーネントオブジェクト
var component = {
//オプション
}
//↑このコンポーネントオブジェクトを↓vueインスタンスに登録する
new Vue({
components:{
'component':Component
}
});
気づいたことがあったら追記していきます