Vue.js - 基礎編var2

## はじめに
Vue.jsを初めて触る人でもこれだけ覚えてたら書ける内容を記事に書いていきます。

## Vue.jsを使うには
Vue.jsを動かすためにVue.jsをインストールする方法と直接htmlに書く方法があります。
今回は直接htmlに書く方法で書いていきます。

htmlの```<head></head>```にVue.jsのURLを入れることでVue.jsが使えるようになります。

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

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="karen_u" data-slug-hash="NZxzrL" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue.js基礎 - 読み込み方">
  <span>See the Pen <a href="https://codepen.io/karen_u/pen/NZxzrL/">
  Vue.js基礎 - 読み込み方</a> by MIYOSHI ERIKA (<a href="https://codepen.io/karen_u">@karen_u</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## jsの値を渡してhtmlで表示
Vue.jsを使って早速動かして見ましょう

js側に書いてある内容についての説明をしていきます。

- el
 - ```#app```のように、DOM要素を指し示すセレクタが指定できます。
 - htmlに書いてある```<div id="app">```タグで囲まれている内容がVueアプリケーションとして認識されます。

- data
 - Vueアプリケーション内で使用する変数を指定できます。

data内で書いてある```title: 'Hellow World!'```は
titleという変数に「Hellow World!」という文字列を渡します
という意味になります。
htmlでjsで書いた変数を使いたい場合は
```<h1>{{ title }}</h1>```と書くと表示されます。

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="karen_u" data-slug-hash="WqryJm" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue.js - 変数">
  <span>See the Pen <a href="https://codepen.io/karen_u/pen/WqryJm/">
  Vue.js - 変数</a> by MIYOSHI ERIKA (<a href="https://codepen.io/karen_u">@karen_u</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## v-text
titleをテキストとして表示したい場合は```v-text```を使用します。

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="karen_u" data-slug-hash="dBGKEd" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="vue.js - v-text">
  <span>See the Pen <a href="https://codepen.io/karen_u/pen/dBGKEd/">
  vue.js - v-text</a> by MIYOSHI ERIKA (<a href="https://codepen.io/karen_u">@karen_u</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## v-html
titleをhtmlとして表示したい場合は```v-html```を使用します。
dataの中身を```<h1>```タグを入れると
上記で書いた```<p>{{ title }}</p>```と```<p v-text="title"></p>```
には文字列で```<h1>Hellow World!</h1>```と表示されます。
しかし```v-html```内で書いているところだけは```h1```タグを認識してくれます。
<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="karen_u" data-slug-hash="JQGZgy" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="vue.js - v-html">
  <span>See the Pen <a href="https://codepen.io/karen_u/pen/JQGZgy/">
  vue.js - v-html</a> by MIYOSHI ERIKA (<a href="https://codepen.io/karen_u">@karen_u</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## v-bind
v-bindを使用することでURLを指定やフォントの色を変えることができます。

- 画像を指定する場合```v-bind:src="{変数名}"```
- 画像の大きさを指定する場合```bind:width="{変数名}"```
- リンクを指定したい場合```v-bind:href="{変数名}"```
- フォントの色を指定したい場合```v-bind:style="{color:{変数名}}"```
- cssを指定したい場合```v-bind:class="{変数名}"```

※```v-bind```は```:```と省略することができます。
例えば、```v-bind:src="{変数名}"```の場合は、```:src="{変数名}"```

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="karen_u" data-slug-hash="PrZBoV" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="vue.js - v-bind">
  <span>See the Pen <a href="https://codepen.io/karen_u/pen/PrZBoV/">
  vue.js - v-bind</a> by MIYOSHI ERIKA (<a href="https://codepen.io/karen_u">@karen_u</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## v-model
- 自動的に入力要素のタイプに基づいて要素を表示させることができます。
- 初期値に何かしら表示または選択をしたい場合
 - テキスト内で初期値に文字列を表示したい場合は、````{変数名}:'初期値の文字列'```
 - チェックボックス内で初期値に選択場合は、````{変数名}:'[{チェックボックスのvalue}]'```
 - ラジオボタン内で初期値に選択場合は、````{変数名}:'{ラジオボタンのvalue}'```

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="karen_u" data-slug-hash="mZVjqg" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="vue.js - v-model">
  <span>See the Pen <a href="https://codepen.io/karen_u/pen/mZVjqg/">
  vue.js - v-model</a> by MIYOSHI ERIKA (<a href="https://codepen.io/karen_u">@karen_u</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

- 初期値を指定しない場合
 - テキスト内で初期値を空で表示したい場合は、```{変数名}:''```
 - チェックボックス内で初期値に選択したくない場合は、````{変数名}:'[]'```
 - ラジオボタン内で初期値に選択したくない場合は、````{変数名}:''```

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="karen_u" data-slug-hash="BgjPqN" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="vue.js - v-model(初期値なし)">
  <span>See the Pen <a href="https://codepen.io/karen_u/pen/BgjPqN/">
  vue.js - v-model(初期値なし)</a> by MIYOSHI ERIKA (<a href="https://codepen.io/karen_u">@karen_u</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## v-on
v-onとはイベントを実行するメソッドです。
javascriptでボタンを押下した際に```onclick```が使用されますが、これと同じ動き方をします。

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="karen_u" data-slug-hash="EBPprR" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="vue.js - v-on">
  <span>See the Pen <a href="https://codepen.io/karen_u/pen/EBPprR/">
  vue.js - v-on</a> by MIYOSHI ERIKA (<a href="https://codepen.io/karen_u">@karen_u</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

「１増やす」ボタンを押下すると「count」が１ずつ増える
という意味になります。

## v-if
html内に直接```v-if="{変数名}"```と書くことでif文を書くことができます。
今回はデフォルトでfalseにしているのでチャックボックスにチェックが入っていませんが、
デフォルトでtrueにするとチェックボックスがチェックするようにすることも可能です。
そのさいはjs側に書いている```checkboxValue```の値を```true```に変更します。

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="karen_u" data-slug-hash="qzbezd" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="vue.js - v-if">
  <span>See the Pen <a href="https://codepen.io/karen_u/pen/qzbezd/">
  vue.js - v-if</a> by MIYOSHI ERIKA (<a href="https://codepen.io/karen_u">@karen_u</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## v-for
if文と同様にhtml内に直接```v-for="({Key}, {value}) in {変数名}"```と書くことでfor文を書くことができます。
ここではfor文を使用してテーブルを作成する方法です。

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="karen_u" data-slug-hash="GbZKpv" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="vue.js - v-for">
  <span>See the Pen <a href="https://codepen.io/karen_u/pen/GbZKpv/">
  vue.js - v-for</a> by MIYOSHI ERIKA (<a href="https://codepen.io/karen_u">@karen_u</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>