【Vue.js】Vue.jsをはじめて学びました

Vue.js について、社内ではじめて学ぶ機会がありました。
そこで学んだことの振り返りとまとめです。

学んだ事いろいろ

　参考文献：動かして学ぶ！Vue.js開発入門 翔泳社

用語関連

MVVM

Model-View-ViewModelの略。
「Model（Vue内に用意したデータ）」と「View
（HTMLで表示している要素）」と「ViewModel（それらをどのようにつなぐか）」
で考えていく方法

SPA（シングルページアプリケーション）

1枚のWebページにいろいろな機能を用意して、
1枚のページだけで動くWebアプリケーションのこと

システム修飾子キー

イベントにシステム修飾子キーを追加すると、システム修飾子キーを押しながら
キーが押されたとき（またはクリックされたとき）にだけメソッドが呼ばれるようになる

双方向データバインディング

VueインスタンスのデータがWebページ上に表示され、Webページ上から入力さ
れた値がVueインスタンスのデータに反映されること

ディレクティブ

「要素に対して Vueがどんなことを行うかを指示する命令」のこと

マスタッシュ

マスタッシュ（Mustache）とは、口ひげという意味　
{} をマスタッシュタグと言う

便利な機能

論理演算子

myAgree==falseを!myAgreeと書くことができる

<button v-bind:disabled="myAgree==false">送信</button>
OR
<button v-bind:disabled="!myAgree">送信</button>

v-ifとv-show

• v-if :HTMLから要素が削除される
• v-show :CSSスタイルのdisplay: noneで見えなくしている

配列操作

• 配列の末尾にデータを追加する

var myArray = [1,2,3,4,5];

myArray.push(100);

// myArray = [1,2,3,4,5,100]

• 配列の途中にデータを追加する

var myArray = [1,2,3,4,5];

myArray.splice(1, 0, 100);
// myArray = [1,100,2,3,4,5]

• 配列の途中にデータを削除する

var myArray = [1,2,3,4,5];

myArray.splice(1, 1);
// myArray = [1,3,4,5]

アニメーション

• transitionタグを使う
  

Enter/Leave とトランジション一覧