Vue.js入門 2章 Vue.jsの入門（コンストラクタ、マウント、data）

前 [なし](https://qiita.com/tseno/items/)
次 [Vue.js入門 2章 Vue.jsの入門（テンプレート、フィルタ、算出プロパティ）](https://qiita.com/tseno/items/387164d8e6c4c59a5136)

## Vue.jsのはじめの一歩

- 実行すると`Hello World!`と表示される。
- `<script>`要素でVue.jsの読み込み。
- Vueを動作させるためのインスタンスをnewで作成し、`<div id="app"></div>`にマウントする。


```html
<!DOCTYPE html>
<title>はじめてのVue.js</title>
<script src="https://unpkg.com/vue@2.5.17"></script>

<div id="app"></div>

<script>
  new Vue({
    template: '<p>{{msg}}</p>',
    data: { msg: 'Hello World!' }
  }).$mount('#app')
</script>

```

- Hello World!と表示された。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/88686/0127f6c7-e2fa-ab3b-51e1-fef94fa62be1.png)

## JSFiddleを使う

- Vue.jsの動作を確認するには、https://jsfiddle.net を使用する。
- 左上・・・HTMLパネル
- 右上・・・CSSパネル
- 左下・・・Javascriptパネル
- 右下・・・Resultパネル
- Saveボタン・・・JSFiddleにコードの登録をする。次回からURLでアクセス可能。
- Forkボタン・・・現在の内容をコピーして新しいものを作る。（URLが新しくなる）

![image.png](https://qiita-image-store.s3.amazonaws.com/0/88686/e91bcfd2-9edb-31f8-9dd4-1ccdc164fa8b.png)

# Vue.jsの基本

## Vue.jsの導入

- Vue.jsのお手軽な導入方法は、script要素で直接読み込むこと。
- `<script src="https://unpkg.com/vue@2.5.17"></script>`はVue.jsの読み込み。
- 土台HTMLは以下の通り。

```HTML
<script src="https://unpkg.com/vue@2.5.17"></script>
<div id="app">
</div>
<script>
  // ロードされ、Vueがグローバル変数として定義されているか確認
  console.assert(typeof Vue !== 'undefined');
</script>
```

- 上記土台のHTMLに、`<div id='app'>`と、`new Vue`の部分を追加。
- 画面に「こんにちは!」が表示される。

```HTML
<div id='app'>
  <p>
    {{ message }}
  </p>
</div>

<script src="https://unpkg.com/vue@2.5.17"></script>
<div id="app">
</div>
<script>
  // ロードされ、Vueがグローバル変数として定義されているか確認
  console.assert(typeof Vue !== 'undefined');
  
  new Vue({
  	el: '#app',
    data: {
    	message: 'こんにちは!'
    }
  });
</script>
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/88686/195d586f-e286-b7d2-8fcc-5975ec378153.png)


## Vueオブジェクト

### コンストラクタ

- `new`演算子を使い、Vueインスタンスを生成する。
- このインスタンスをDOMにマウントすることで、Vue.jsの機能が使えるようになる。
- コンストラクタの引数として、オプションオブジェクトを渡す。

```js
var vm = new Vue({
  // オプションオブジェクト
})
```

- 主なオプション

|オプション名|内容|
|:--|:--|
|data|UIの状態・データ|
|el|Vueインスタンスをマウントする要素|
|filters|データを文字列として整形する|
|methods|イベントが発生した時などの振る舞い|
|computed|データから派生して算出される値|

### コンポーネント

- Vue.jsの分割の単位。
- componentメソッドで、アプリケーション全体で使うコンポーネントを登録可能。
- Vueインスタンスを生成する際のオプションのcomponentsプロパティで、Vueインスタンスのスコープ（テンプレート）だけで利用できるコンポーネントを登録できる。

## Vueインスタンスのマウント

- マウントとは、既存のDOM要素をVue.jsが生成するDOM要素で置き換えること。

### Vueインスタンスの適用（el）

- elプロパティには、DOM要素のオブジェクトかCSSセレクタの文字列を指定することができる。（複数マッチした場合は最初に発見されたもの）

```js
var vm = new Vue({
  el: '#app'
  // オプションオブジェクト
})
```

### メソッドによるマウント（$mountメソッド）

- マウント対象のDOM要素がUI操作や通信などで遅延的に追加される場合はこちらの方法を使う。

```js
var vm = new Vue({
  // オプションオブジェクト
})
vm.$mount(el)
```

## UIのデータ定義（data）

- dataプロパティには、データのオブジェクトをJson形式で指定する。
- dataプロパティの値が変わるたびに、表示が変わる。

```js
var items = [
	{
  	name: `鉛筆`,
    price: 300,
    quantity: 0
  },
	{
  	name: `ノート`,
    price: 400,
    quantity: 0
  },
	{
  	name: `消しゴム`,
    price: 500,
    quantity: 0
  }
]

var vm = new Vue({
	el: "#app",
  data: {
  	// dataプロパティ
  	items: items
  }
})
// JSFiddleでコンソールからvmにアクセスするための対応
window.vm = vm
```

- itemsプロパティの0番目の要素を表示する。

```HTML
<script src="https://unpkg.com/vue@2.5.17"></script>
<div id="app">
  <p>
    {{ items[0].name }}
  </p>
</div>
<script>
  // ロードされ、Vueがグローバル変数として定義されているか確認
  console.assert(typeof Vue !== 'undefined');
</script>
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/88686/82ab3a44-8ddc-1358-190e-c3298be3516c.png)

### Vueインスタンスの確認

- 開いている画面を右クリック→「検証」→「Console」タブ→result(fiddle)をプルダウンから選択
- 以下のコードを入力すると、vmの内容が表示される。
- `data`によってデータをプロパティとして提供できる、テンプレート中で使える。

```
console.log(vm)
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/88686/10396421-5d7b-35f1-e5d4-f3efce66d6b5.png)

### データの変更を検知する。

- 上記コンソールで、0番目のアイテムの名前を変えてみる。

```js
vm.items[0].name='万年筆'
```

- 画面の名前も変わった。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/88686/9238b001-eb64-4088-c80b-c6d965e29be9.png)

- $watchメソッドは、Vueインスタンスの変更を検知してそれをもとに動作する。
- 第1引数・・・監視対象の値を返す関数
- 第2引数・・・値が変わった場合に呼ばれるコールバック関数

```js
vm.$watch(function() {
    return this.items[0].quantity
}, function(quantity) {
    console.log(quantity)
})
```

- consoleで値を変えると、設定した個数が表示され、コールバック関数が呼ばれたことが分かった。

```console
> vm.items[0].quantity = 1
1
1
```

参考
[Vue.js入門 基礎から実践アプリケーション開発まで](https://www.amazon.co.jp/dp/B07J6FP6NQ/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1)