Vue.js備忘録

# Vue.jsに関する個人的な備忘録です
一つの記事にまとめるほどじゃない情報等をまとめていきます。
もしかしたら切り出して別途記事にするかもしれませんが。

## Vue.jsの思想・特徴
* データ駆動(データドリブン)、リアクティブプログラミング
* コンポーネント志向(HTML/CSS/JSを部品単位で扱う)
    * Atomic Design
* MVVMパターン(Model-View-ViewModel)
* 仮想DOM
* テンプレート構文(複雑な処理を書きたい場合は[描画関数やJSX](https://jp.vuejs.org/v2/guide/render-function.html)で実装することが公式でおすすめされていました)
* Scoped CSS(CSS in JSでも記載できるみたいです([Vueで使えるCSS in JSを調べてみた](https://qiita.com/naomunaomu/items/9b19c8ee71c760ea1ffd)))
* vue自体はコア機能のみ

## コーディング規約
* templateの中はチェインケース
* scriptの中はアッパーキャメルケース

## vueファイル

## ディレクトリパスの@
* @/folder  : アットマーク1つはソースディレクトリのルートを示す
* @@/folder : アットマーク2つはプロジェクトディレクトリのルートを示す
## export
vueの機能ではないですが、importで呼び出すために利用します
[export](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/export)

## main.js
* vueを動かす起点となる
* mainクラスみたいなもの  

### vueのインスタンス
main.js内で new Vue({}) して定義する

``` js
new Vue({
  el: "#app",
  data : {},
  computed : {},
  watch : {},
  // ライフサイクルフック
  created : function() {}
})
```

#### el
vueを描画するLocatorの定義

#### data
ページ内で保持するデータの定義

#### watch
dataで定義したデータの監視とイベントハンドリングの定義

``` js
watch : {
  testData : {
    handler : function(newData, oldData) {},
    deep: true // ネストされているデータの監視オプション
  }
}
```

#### ライフサイクルフック
Vue インスタンスは、生成時に一連の初期化を実施。その初期化の過程で、特定の段階でユーザー自身のコードを追加するいくつかのライフサイクルフックが用意されている
##### create
インスタンス生成後に発火

##### 算出プロパティ (computed property)
複雑な計算はtemplateではなく、computedプロパティに切り出してロジックを記載することで
可視化・保守性を向上する。
定義方法が違うだけで使い方はデータと一緒。

``` js
computed: {
 computedData: function() {
    return this.testData -1
 }
}
```

#### プラグインの読み込み
[プラグイン](https://jp.vuejs.org/v2/guide/plugins.html)
main.js内で new Vue()するまえに定義する必要あり
Vue.use()というグローバルメソッドを呼び出し定義する。

## App.vue
* 親となるコンポーネント
* App.vueとすることがお作法？

## Vue.config.productionTip
trueで開発者向けのメッセージがコンソール出る

### < router-view / >

routerで紐づいたtemplateを表示する個所を指定する

## 基本的な描画ルール(HTML)について

### リストの描画(v-for v-bind)
[リストレンダリング](https://jp.vuejs.org/v2/guide/list.html)
item in items で定義

``` html

<div class="message" v-for="(message, index) in messages" v-bind:key="index">
```
v-bind-keyは必須

### フォーム入力バインディング(v-model)
[フォーム入力バインディング](https://jp.vuejs.org/v2/guide/forms.html)

``` html
<input v-model="searchText">
上下ともに同じ内容を示す
<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>
```
form の input 要素 や textarea 要素、 select 要素に双方向 (two-way) データバインディングを作成することができる




### データバインディング
”Mustache” 構文(2 重中括弧)を使用したテキスト展開が可能

``` html
<span>Message: {{ msg }}</span>
```

## vue-cli
コマンドラインでvueのプロジェクトを生成する
[vue-cliを使ってプロジェクトを作成し起動するまでの手順](https://qiita.com/team_noppo/items/34c042a6433eceb73ccf)


## Vuex
Stateパターンとその他機能を実現するライブラリ

# その他
## 仮想DOM
* DOM全体を操作するJQueryとは異なる思想  
* 仮想DOMを生成し変更前との差分を更新していく:diff/patch

## イベント定義
* @ submitのように@ を着けることでイベント定義可能
* v-on でも定義可能

## DOMの参照(Locatorの定義)
ref 属性を使って参照するための名前をタグに付けておくと、その DOM に直接アクセス可能

``` html
<input type="text" ref="comment">
```
ref 属性で名前を付けたタグは、メソッド内から次のように使用可能

``` js
this.$refs.comment.value
```





# 参照ページ
## vueの思想・特徴
[他のフレームワークとの比較](https://jp.vuejs.org/v2/guide/comparison.html)
[描画関数とJSX](https://jp.vuejs.org/v2/guide/render-function.html)
[Vueで使えるCSS in JSを調べてみた](https://qiita.com/naomunaomu/items/9b19c8ee71c760ea1ffd)
[算出プロパティとウォッチャ](https://jp.vuejs.org/v2/guide/computed.html)

## 仮想DOM
[なぜ仮想DOMという概念が俺達の魂を震えさせるのか](https://qiita.com/mizchi/items/4d25bc26def1719d52e6)  
[Vue.jsの仮想DOMと差分レンダリングの仕組み](https://blog.engineer.adways.net/entry/2018/01/19/200000)