Vue.jsの基本的な使い方まとめ

## はじめに

フロントエンドとしての技術習得のために学習を始めました。

まず目指すべき目標は**Vue.jsとBaaSでオリジナルのポートフォリオを作る事**

「Vueやりたいんだよねぇ〜」って人も僕と一緒にレッツトライ

Vue.jsを学習するにあたって、**HTML、CSS、JavaScriptの基礎知識**が必要になってきます。

## Vueインスタンスの作成

`elオプション`でVueインスタンスを展開する場所を指定する。

`#app`は`id="app"`を指定したことになる。

```js
var app = new Vue({
  el: '#app'
})
```

## ルートテンプレートの作成

HTMLでVueインスタンスを展開する場所を指定する。

HTMLにVueを埋め込むイメージ。

```html
<div id="app">
  <!--ここにVueインスタンスが展開される -->
</div>
```

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

データバインディングとはJavaScriptのデータを変えると描画されている内容も同時に変わる仕組みのこと。

Vueインスタンスに設定した値は`マスタッシュ構文`で展開する。

```js:マスタッシュ構文例
{{ message }}
```

Vueインスタンスの`dataオプション`に`message`の値を設定する

```js
var app = new Vue({
  el: '#app', // マウントするセレクタの指定
  data: {
    message: 'Hello Vue.js!'
  }
})
```

設定した`message`は`elオプション`に定義した`id=app`の中で展開できる。

```html
<div id="app">
  <p>
    {{ message }} <!-- Hello Vue.js! -->
  </p>
</div>
```

`id=app`の外では展開できない

```html
<div id="app">
</div>
{{ message }} <!-- {{ message }} -->
```

`dataオプション`で定義したデータは外部からアクセスできる

```js
console.log(app.message) // Hello Vue.js!
```

## dataオプションにオブジェクトや配列を設定

カンマで続けて書く事ができる。

```js
var app = new Vue({
  el: '#app',
  data: {
    // userオブジェクトを定義
    user: {
      lastName: 'Yamada',
      firstName: 'Taro',
      prefecture: 'Tokyo'
    },
    // 配列を定義
    colors: ['Red', 'Green', 'Blue']
  }
})
```

オブジェクトは`オブジェクト名.キー名`

配列は`配列名[数値]`でアクセス出来ます。

```html
<div id="app">
  <p>
    {{ user.prefecture }} <!-- Tokyo -->
  </p>
  <p>
    {{ colors[0] }} <!-- Red -->
  </p>
</div>
```

## 属性のデータバインディング v-bind

属性のデータバインディングには`v-bind`ディレクティブを使用する。

```html
<div id="app">
  <input type="text" v-bind:value="message" />
</div>
```

## 条件分岐 v-if v-show

`v-if`の場合、要素はDOMレベル削除される。
頻繁に表示・非表示を繰り返す場合、**描画コストが高くなる。**

```html
<div id="app">
  <p v-if="toggle"> <!-- 表示されない -->
    Hello
  </p>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    toggle: false
  }
})
</script>
```

`v-show`の場合、条件を満たさない時は`display: none`で非表示させる。

表示を頻繁に切り替える際は`v-if`と比べて**描画コストの点で有利になる。**

```html
<div id="app">
  <p v-show="toggle">
    Hello
  </p>
</div>
```

## 繰り返し処理 v-for

`v-for`ディレクティブは繰り返し処理を行う事ができる。

試しに`data`オプションに配列`colors`を定義する。

```js
var app = new Vue({
  el: '#app',
  data: {
    colors: ['Red', 'Green', 'Blue']
  }
})
```

`v-for`を使って配列の値を一つずつ取り出して繰り返し処理を行う。

配列名は`複数形`、繰り返し処理で使う値は`単数形`にしておくとコードが読みやすくなる。

```html
<div id="app">
  <ol>
    <li v-for="color in colors">
　　　　{{ color }
　　</li>
  </ol>
</div>
```

```html:結果
<div id="app">
  <ol>
    <li>Red</li>
    <li>Green</li>
    <li>Blue</li>
  </ol>
</div>
```

### オブジェクトを繰り返し処理する

`data`オプションに`user`オブジェクトを定義する

```js
var app = new Vue({
  el: '#app',
  data: {
    user: {
      firstName: 'Daiki',
      LastName: 'Tsuneta',
      age: 28
    }
  }
})
```

`value in オブジェクト名`でオブジェクトの中身を一つずつ取り出して繰り返し処理を行う

`value`は任意の値を設定できる。`v`でも動く。

```html
<div id="app">
  <ul>
    <li v-for="value in user">{{ value }}</li>
  </ul>
</div>
```

```html:結果
<div id="app">
  <ul>
    <li>Daiki</li>
    <li>Tsuneta</li>
    <li>28</li>
  </ul>
</div>
```

オブジェクトのキーも一緒に表示させたい時は`v-for="(値, キー) in オブジェクト名"`で表示させる事ができる。

`第一引数が値`、`第二引数がキー`になっているので注意。

```html
<ul>
  <li v-for="(value, key) in user">
    {{ key }} : {{ value }}
  </li>
</ul>
```

## イベント処理 v-on

`v-on`ディレクティブはイベント処理の基本。

ボタンをクリックしたら現在時刻を表示させるプログラムを書いてみる。

```html
<div id="app">
  <!-- クリックするとonclickメソッドが呼び出される -->
  <button v-on:click="onclick">
    Click!
  </button>
  <p>
  <!-- 現在時刻を表示させるプロパティを定義 -->
    {{ now }}
  </p>
</div>
```

js側で`dataオプション`にプロパティ`now`の設定と、`methodsオプション`にメソッドを定義する。

メソッドは`メソッド名: function() {..処理..}`で記述する。

`this.now`でプロパティ`now`にアクセスできる。

```js
var app = new Vue({
  el: '#app',
  data: {
    now: '' // nowに空の文字列を設定
  },
  methods: {
    onclick: function() {
      this.now = new Date().toLocaleString()
    }
  }
})
```

## 双方向データバインディング v-model

`v-model`は双方向にデータバインディングする事ができる

これは実際に手を動かした方が分かりやすいかもしれない。

まず`message`プロパティを用意します。

```js
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
```

後は`v-model="プロパティ名"`で双方向にデータバインディングされる。

具体的には、下記の`input`の値を変更すると`{{ message }}`の値もリアクティブに書き換わる。

```html
<div id="app">
  <p>
    <input type="text" v-model="message">
  </p>
  <p>
    {{ message }}
  </p>
</div>
```

文字数カウントとかもめっちゃ楽。

```html
  <p>
    <input type="text" v-model="message">
  </p>
  <p>
    文字数{{ message.length }}
  </p>
```

## コンポーネント

よく使う機能を、再利用可能なコンポーネントにできる。

コードの見通しが良くなり、開発効率の改善に繋がる。

`Vue.component`メソッドを使用する。

```js
// Vueインスタンス作成よりも前に記述する
// Vue.component(コンポーネント名, { コンポーネントの定義情報 })`で作成
Vue.component('hello-component', {
  template: '<p>Hello</p>'
})

var app = new Vue({
  el: '#app',
  --以下省略--
  )}
```

コンポーネントの呼び出しは`テンプレート名`を記述するだけ。

```html
<div id="app">
  <hello-component></hello-component> <!-- <p>Hello</p> -->
  <hello-component></hello-component> <!-- <p>Hello</p> -->
</div>
```

## まとめ

Vue.js 楽しい:v:

## 更新履歴

:zap:[Vue.jsの基本的な使い方まとめ](https://qiita.com/yukiji/items/862b8dd91dc410259fb4) :point_left:今ココ
:zap:[Vue.jsでTO DOアプリを作る](https://qiita.com/yukiji/items/dc45f45f7f3f0e53f626)
:zap:[Vue.js テンプレート制御ディレクティブ まとめ](https://qiita.com/yukiji/items/a77dd6d8dd0f194770c3)
:zap:[Vue.js 算出プロパティとメソッドの違い](https://qiita.com/yukiji/items/525469503cdba334658e)