【学習メモ】基礎から学ぶ Vue.jsを読んで

# 概要
[基礎から学ぶ Vue.js](https://www.amazon.co.jp/%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E5%AD%A6%E3%81%B6-Vue-js-mio/dp/4863542453) を読んで感じたことや知らなかったこと、覚えておきたいこと等を随時メモしています。自分用。

# はじめに

**データバインディング** ・・・　JavaScriptのデータを変えるだけで描画内容も一緒に変わる仕組みのこと

## Vue.jsの特徴
* 高い機能性を持つサイトの構築・リソースの再利用を得意としている
* データバインディングをはじめとするView（つまりDOM）に関わるさまざまな機能を持つ
* **コンポーネント** （HTMLとJavaScriptをセットにしたもの）という機能がある

# CHAPTER 1 Vur.jsとフレームワークの知識

## SECTION 01 Vue.jsについて

* Adobeや任天堂、LINEやGitLabをはじめとした有名な企業・プロジェクトで広く採用されている

https://github.com/vuejs/awesome-vue#enterprise-usage

### フレームワークとは？

* ライブラリ　・・・　呼び出す側を作る
* フレームワーク　・・・　呼び出される側を作る

## SECTION 02 Vue.jsのキーコンセプト

画面を描画する構造の本体は **DOMではなくJavaScriptのデータ** である

❌先にDOMが存在してそれを読み込んだり操作する
⭕最初にデータが存在してそのデータの状態に適したDOMを構築する

* **データ連動** ・・・　データを中心とするアプリケーション設定のこと
データの状態によって描画は更新され、時には自動的にアクションを起こしたり、いろいろなふるまいが変わることもある。
* **テンプレート**　・・・　Vue.jsでDOMを構築する手段
* **ディレクティブ** ・・・　テンプレートとロジックを関連付けるもの。「v-」から始まる属性のこと。
* **mount**　・・・　配置する要素とアプリケーションを紐付けること
* viewの管理　・・・　DOMの更新や状態の管理
* **コンポーネント** ・・・　Vue.jsの「コンポーネント」は、機能ごとにJavaScriptとテンプレートを1つのセットにして、他の機能とは分離して開発できるようにする仕組みのこと

📝属性の名前が「v-」から始まっていなければ値は文字列（一部例外あり）

## SECTION 03 豊富なリソースを活用しよう

### Element
ウェブサイト向けUIコンポーネント集
https://element.eleme.io/#/en-US/component/layout

### Onsen UI
ハイブリッド、モバイルアプリ用のUIコンポーネント集
https://ja.onsen.io/theme-roller/

## SECTION 04 Vue.jsのインストール

```js

var app = new Vue({
  // オプション  
})
```

* コンストラクタ関数「Vue」を使う
* ルートとなるVueインスタンスを作成する

📝ざっくり用語復習

**インスタンス**
https://wa3.i-3-i.info/word1118.html
クラスをnewしたもの

**コンストラクタ**
https://wa3.i-3-i.info/word13646.html
クラスをnewした瞬間に実行される関数のこと

## SECTION 05 Vue.jsの基本機能

### テキストのバインディング

```html
<p>{{ msg }}</p>
```

```js
var app = new Vue({
  el: '#app',
  data: {
    msg: 'Hello Vue.js!'
  }
})
```
```html
<p>Hello Vue.js!</p>
```
```js
// console
console.log(app.msg) // -> Hello Vue.js!
```

アクセスは `app.msg`
🚨`app.data.msg` ではないことに注意


### 繰り返しの描画

```html
<ol>
  <li v-for="item in list">{{ item }}</li>
</ol>
```

```js
var app = new Vue({
  el: '#app',
  data: {
    list: ['りんご', 'ばなな', 'いちご']
  }
})
```
```html
<ol>
  <li>りんご</li>
  <li>ばなな</li>
  <li>いちご</li>
</ol>
```
```js
// console
app.list.push('おれんじ')
```


### イベントの利用

```html
<button v-on:click="handleClick">Click</button>
```

```js
var app = new Vue({
  el: '#app',
  methods: {
    handleClick: function(event) {
      alert(event.target)
    }
  }
})
```

`addEventListener` や `$(element).on` メソッドと似たように作用する


### フォーム入力との同期

```html
<p>{{ msg }}</p>
<input v-model="msg">
```

```js
var app = new Vue({
  el: '#app',
  data: {
    msg: '初期メッセージ'
  }
})
```

フォームに入力した文字と `<p>` 要素の文字が同期する


### 条件分岐

```html
<p v-if="show">Hello Vue.js!</p>
```

```js
var app = new Vue({
  el: '#app',
  data: {
    show: true
  }
})
```
```js
// console
app.show = false
```

### トランジション＆アニメーション

```html
<button v-on:click="show=!show">切り替え</button>
<transition>
  <p v-if="show">Hello Vue.js!</p>
</transition>
```

```js
var app = new Vue({
  el: '#app',
  data: {
    show: true
  }
})
```
```css
.v-enter-active,
.v-leave-active {
  transition: opacity 1s;
}
.v-enter,
.v-leave-to {
  opacity: 0;
}
```

## SECTION 06 オプションの構成を見てみよう

```js
var app = new Vue({

  // 1 mountする要素
  el: '#app',

  // 2 アプリケーションで使用するデータ
  data: {
    message: 'Vue.js'
  },

  // 3 算出プロパティ
  computed: {
    computedMessage: function() {
      // 何か処理した結果をデータとして返す
      return this.message + '!'
    }
  }

  // 4 ライフサイクルフック
  created: function() {
    // 行いたい処理
  },

  // 5 アプリケーションで使用するメソッド
  methods: {
    myMethod: function() {
      // 行いたい処理
    }
  }
})
```

**ライフサイクルハック** ・・・　Vue.jsの「おはよう」から「おやすみ」までの一定のサイクルを表すもの
**フック**　・・・　決まったタイミングに処理を割り込ませること

# CHAPTER 2 データの登録と更新

## SECTION 07 基本のデータバインディング

**データバインディング** （DOMの更新の自動化）を行うには、テンプレートで使用するすべてのデータは **リアクティブデータ** として定義する必要がある

**リアクティブデータ**　・・・　Vue.jsによって取得した時（get）と代入した時（set）のフック処理が登録された「反応のできるデータ」のこと

### リアクティブなデータの定義

`data` オプションに文字列などを定義　→　リアクティブなデータに変換される

```js

var app = new Vue({
  el: '#app',
  data: {
    message: 'Vue.js' // messageは変化を検知できるようになる
  }
})
```

🚨`data` オプションの直下のプロパティは **後から追加できない**
　→　内容が決まっていなくても初期値や空データとして定義しておく必要がある

```js
data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos false,
  todos: [],
  error: null
}
```

# ～～　随時更新　～～