Vue.js入門

##始めに
Vue.jsの基礎をまとめました。
初学者の方でも分かるように書いていますので、よければ参考にしてください！

参考記事
[URL]https://qiita.com/kiyokiyo_kzsby/items/ce9fe8b72953584fecee

##環境
JSFiddle(HTML・CSS・JavaScriptを簡単に試せるオンラインIDE)
![スクリーンショット 2021-06-08 13.48.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1025549/8db3d635-5ccb-234b-b1bd-969eb055d841.png)

##Viuインスタンスの生成
① 　html側にVueを適応したい箇所に```<div id="id名"></div>```を記載する。(jsffidleでは、headやbodyタグがあらかじめ読み込まれているので、ここでは記載していない。)

②  divタグ外に```<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>```と記載する。
これによりVue.jsを使用できるようになる。
詳細は公式ホームページ参照　https://jp.vuejs.org/v2/guide/installation.html#CDN

③new VueでVueインスタンスを生成し el でhtml側のどの部分でVueを適用するのか指定できます。


``` html:html

<div id='app'>
</div>

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

```js:js

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

##変数
###data
jsに以下のように記述することで、data要素に変数を定義することができます。
html側に{{変数名}}とすることで、変数を表示できます。※{{}}はマスタッシュ構文

``` html:html

<div id='app'>
 {{ message }}
</div>

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

```js:js

new Vue ({
el: '#app',
data: [
 message: '初めてのVue'
]
})
```

![スクリーンショット 2021-06-08 14.20.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1025549/28c23293-75d7-5978-b409-d1b625dc45d7.png)

##ディレクティブ
###v-on 　任意のイベントによってメソッドを実行させる
Vueインスタンスにmethodsを記載することで、メソッドを使用できます。

①html側にbuttonタグを配置し、```v-on:アクション="アクション名"```のようにv-onディレクティブを指定する。
これによりボタンをクリックした際に、②で作成するmethodsのbuttonメソッドを実行させることができる。

②```methods: {~~~} ```以下を記述することで、buttonメソッドを作成する。
ここではメソッドが実行された際、alertを表示させるようにしている。


``` html:html

<div id='app'>
 {{ message }}

 <button v-on:click="button">
 ここをクリック
 </button>

</div>

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

```js:js

new Vue ({
 el: '#app',
 data: [
  message: '初めてのVue'
   ],
 methods: {
  button: function {
   alert();
    }
  }
})
```

![スクリーンショット 2021-06-08 14.41.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1025549/feca4c22-b708-ec62-e640-71b8999ee9e8.png)

###v-vind
タグ属性の値をVueインスタンス内で定義した変数で表現する際に使います。

①html側に、aタグを配置しv-bindディレクティブを指定する。(v-bind:属性="属性名")

②js側で、data内に変数url(属性名)を記述する。

③リンクをクリックすると、任意のページを表示する。

```html:html

<div id='app'>
  <p><div id='app'>
   {{ message }}
  <button v-on:click="button">
  ここをクリック
  </button>
  <a v-bind:href="url">Vue公式</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

```

```js:js

new Vue ({
 el: '#app',
 data: [
  message: '初めてのVue',
  url: 'https://jp.vuejs.org/v2/guide/installation.html#CDN'
   ],
 methods: {
  button: function {
   alert();
    }
  }
})
```

![スクリーンショット 2021-06-08 15.19.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1025549/8e51dbb4-f986-b448-a968-fc0734718077.png)

###v-model 双方向データバインディング。
双方向データバインディングとはvue.jsの機能で、data変数とフォームの値を連動させることが出来ます。
v-bindでは変数を表示させるだけでしたが、v-modelではフォームの値を変更すると変数の値も変更されます。

① html側で、```<input>タグ```を記述しv-modelディレクティブを指定する。(v-model="変数名")
v-modelの動作を確認する為、hello変数を{{ hello }}で表示させる。

②js側で、hello変数を記述する。

③フォームの値を変更すると、hello変数の値が変化していることが確認できる。

``` html:html

<div id='app'>
 <input v-model="hello">
 {{ hello }}
</div>

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

```js:js

new Vue ({
 el: '#app',
 data: [
  hello: 'こんにちは'
   ],
})
```

![スクリーンショット 2021-06-08 15.37.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1025549/91ddc6e8-f6cb-14ac-c6df-0b09ad1ff263.png)

###v-for 配列を要素にマッピングする。
v-forはdata内で、記述した配列よhtml側で表示させることができます。

①js側で、languages配列を作成する。

②ulタグ内にliタグを作成する。
liタグにv-forディレクティブを指定する。(v-for="要素　in 配列名")

③``` <li v-for="la in languages"></li>```内に{{ la }}と記述して配列の要素の表示させる。

```html:html

<div id='app'>
　<ul>
   <li v-for="la in languages">{{ la }}</li>
  </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

```

```js:js

new Vue ({
 el: '#app',
 data: [
  languages: ['Ruby', 'PHP', 'Python'],
   ],
 methods: {
  button: function {
   alert();
    }
  }
})
```

![スクリーンショット 2021-06-08 15.58.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1025549/d8e710c3-c1b9-b8c1-841c-cda87dec1a7d.png)

##終わりに
Vue.jsの基礎をまとめました。
次回は一歩進んだ内容をまとめるので良ければ見てください！