Vue.jsを全く知らない状態から、とりあえず使ってみるまで

業務でVue.jsを使えないとメンテ出来ない事があるので、とりあえず使って概要を抑える
ことにしました。


# とりあえず使えるようにする設定


## インストール

[Vue.js公式のインストールの項目](https://jp.vuejs.org/v2/guide/installation.html)に書いてある、CDNでのインストールを試します。

CDNでのインストールであれば、htmlの```head```内に以下を書くだけで使用出来ました。

```html
<head>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
</head>
```

## vueインスタンスの生成
以下を追加する事でVue.jsインスタンスを作成する事が出来、実際に使用していく事が出来ます。

```html
</body>
<script>
  var app = new Vue({
    // newしてvueインスタンスというものを作る。vueの処理はここに書いていく。
  })
</script>

```

今回はとりあえず使ってみる事が目的なので、Vue.jsの構文を```</body>```の下あたりに直接```<script></script>```で書いてしまいます。

## データバインディング

データバインディングとは、データを同期させて表示に反映させる事。

まず、vueインスタンス内に```el: '#id名'```と書き、html内のidと紐づけてみます。


```html
<body>
  <div id="app">
  </div>
</body>
<script>
  var app = new Vue({
    el: '#app' // id="app"を指定して、その配下のhtmlにVue.jsを反映させる
  })
</script>
</html>

```

## データオプション作成とhtml内での展開

Vue.jsではvueインスタンス内にdataオプションでデータを定義した後、html内で```{{ 展開したいdataのキー }}```のように書く事でデータを展開して表示出来ます。

{{}}で囲って書く事をマスタッシュ構文と言います。

```html
<body>
  <div id="app">
    {{ greet }}  // 3. 作ったデータをマスタッシュ構文で展開
  </div>
</body>
<script>
  var app = new Vue({
    el: '#app',
    data: {                 // 1. データオプションでデータを用意する
      greet: 'Hello Vue.js' // 2. greetというキーで'Hello Vue.js'というデータを作る
    }
  })
</script>
</html>

```


## 完成

最終的に以下のようになります。

```html

<html>
  <head>
      <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
  </head>
  <body>
    <div id="app">
      {{ greet }}
    </div>
  </body>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        greet: 'Hello Vue.js'
      }
    })
  </script>
</html>

```

# Vue.jsの基本構文

先ほどの完成形を以下のようにテンプレートとして使い、Vue.jsの基本構文を使ってみました。

```html

<html>
  <head>
      <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
  </head>
  <body>
    <!--ここにhtmlとVue.jsの構文を書く-->
  </body>
  <script>
    // ここにVue.jsのデータを設定する
  </script>
</html>

```

## v-bind

vueオブジェクト内に定義したdataオプションのキーをv-bind:valueに設定する事でデータを表示します。

* html

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

* Vue.js

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

## v-if

dataオプションで設定した真偽値によって表示、非表示を切り替えます。
下記の例だとon_offが偽の場合、pタグごと表示を消します。

* html

```html
<div id="app">
  <p v-if="on_off">
    Hello
  </p>
</div>
```

* Vue.js

```js
var app = new Vue({
  el: '#app',
  data: {
    on_off: true
  }
})
```

## v-show

v-showはv-ifの例のように表示、非表示を制御出来ますが、タグ毎非表示にするのではなく、
display: none;にします。

* html

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

* Vue.js

```js
var app = new Vue({
  el: '#app',
  data: {
    on_off: true
  }
})
```

## v-for　繰り返し

要素の個数分繰り返して表示出来ます。
dataオプションで設定した配列colorsを１つずつcolorに入れて表示します。

* html

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

* Vue.js

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

## v-on　イベント処理

クリックされた時の動作など、イベント処理を設定出来ます。

* html

```html
<div id="app">
  <button v-on:click="on_click">
    クリックボタン
  </button>
</div>
```

* Vue.js

```js
var app = new Vue({
  el: '#app',
  methods: {
    on_click: function() {
      alert('クリックされました');
    }
  }
})
```

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

データを共有してリアルタイムで変更を反映します。
1つ目のテキストボックスに入力すると、dataオプションのtextが更新され、2つ目のテキストボックスにもすぐに反映されます。

* html

```html
<div id="app">
  <p>
    <input type="text" v-model="text"> // 1つ目のテキストボックス
  </p> 
  <p>
    <input type="text" v-model="text"> // 2つ目のテキストボックス
  </p> 
</div>
```

* Vue.js

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

# まとめ、感想
とりあえず使ってみて、なんとなくこんな感じか？というところはわかりました。
でもQiitaにあるVue.jsでゲーム作る記事とか見てると、まだ全体の1%くらいしか理解してない感じがする^^;
とりあえず何かアプリを作りたいところです。