【Vue.js】Vue.jsって何だろう（基本な操作（v-bind・{{ }}・v-on・v-model）編）

## 1.はじめに
今回は、Vue.jsの基本的な操作のうちhtml部分に記述する部分をいくつかまとめていきます。

## 2.基本的な書き方
### 概要
``` javascript

<template>
　// 今回はここに書くことをまとめていきます。
     // htmlに書くこと（画面に表示するもの）を記述
</template>

<script>
     // javascriptに書くこと（関数など）を設定
</script>

<style>
    // cssに書くこと（文字の色・大きさなどのデザイン）を記述
</style>
```

## 3.基本的な操作

### ①v-bind
HTMLの属性に Vue のデータを動的に結びつける（バインドする）ための構文です。

** ＜基本的な書き方＞ **

``` javascript
<htmlタグ v-bind:プロパティ名="変数">
 // 例 <img v-bind:src="imageUrl">
    
// v-bindは下記のように省略可能です。

<htmlタグ :プロパティ名="変数">
 // 例 <img :src="imageUrl">
``` 
** ＜説明＞ **
下記のコードだとsrcの値は静的（固定）であるため、常に "dog.jpg" しか表示されません。

``` javascript
　// srcは画像の場所（URL）を指定するタグです。
　<img src="dog.jpg">
``` 
下記のコードのようにv-bindを使うと** imageUrlのデータの中身を見て ** 、表示する内容を変えられるようになります。
（imageUrlの値が"dog.jpg" の場合は"dog.jpg"が、"cat.jpg"の場合は"cat.jpg"と動的に変化します。）

``` javascript
<img v-bind:src="imageUrl">
``` 

** ＜テストコード＞ **
``` javascript
<template>
    <!-- v-bindを使って画像を切り替える -->
    <img :src="imageUrl" width="200">

    <!-- ボタンを押すと画像が変わる -->
    <br><br>
    <button @click="changeImage">画像を変える</button>
</template>

// ここは次回以降説明します。
<script>
  export default {
  data() {
    return { imageUrl:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG4xpQ_FMBOIdN_junRODMG3TxJw1q5hSm_OVtAJkeI_qS2JBSQbHltv1SE46v-zagGxHe6aKvzbkziOE7LeInDS7UIIhwUfcCBYnmFhJe6dNjM4Jribry1PoJagMXmVhOsR7ESGt-0l9G/s800/dog_akitainu.png'
    };
  },
 methods: {
  changeImage() {   this.imageUrl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRuu0RWoeHs26-kJWDLyILcJZ9OljBuc_LyatexrDqGsYOBKNqKJWrt_jKhFATb1jmj124nhh4vTprkPzcRYemzFuSxbCR9cGFomOZx-vnOwQ5a16_4TmbjRWUolmtkNHg_d_5h-BtyvoTMJCvJ6ZmiiiSyu_0RfsbAStBrMaoUm8HN6NFJHIi-Lv8f0hh/s790/bird_fukurou_run.png';
  }
 }
}
</script>
``` 

ボタンを押すと、imageUrlの値が変更されるので、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762100/9ffd134c-ce42-47ce-9eb0-3987c6b47e5b.png)

から
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762100/e7076a90-f9d8-46e6-8159-ec2e88516478.png)
へと画像が変わります（エッホエッホ）！

### ②{{ 変数名 }}
Vue の中で定義した変数（＝データ）を、画面に**埋め込む（バインドする）**ことができるコードです。
v-bindと同様、変数の値が変更されると、{{  変数名 ]}で表示される内容も変わります。

** ＜基本的な書き方＞ **

``` javascript
　// data内の中で定義したmessageの値が表示されます。
　<p>{{ message }}</p>

　data() {
  　return {
    　message: 'こんにちは、Vue！'
  　}
　}
``` 

テストコードは③v-onと統合します。

### ③v-on
ボタンをクリックするなどの **「ユーザーの操作」に反応して ** 処理を実行します。

** ＜基本的な書き方＞ **
``` javascript
// ボタンを押すと指定した関数が実行されます。
<button v-on:click="関数名">クリック</button>
    
// v-onは下記のように省略可能です。
<button @click="関数名">クリック</button>
``` 

** ＜説明＞ **
``` javascript
<template>
    <!-- メッセージ表示 -->
    <p> {{ message }} </p>

    <!-- ボタンをクリックすると、changeMessageの関数が実行されます。 -->
    <button @click="changeMessage">メッセージを変更</button>
</template>

<script>
  export default {
    data() {
      return {
        message: 'こんにちは！'
      }
    },
    methods: {
      changeMessage() {
        this.message = 'クリックされました！';
      }
    }
  }
</script>
``` 

ボタンをクリックをすると、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762100/32c6f11d-41d8-4cd0-9142-c78b1c376416.png)


messageの値が変わる関数が実行されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762100/20682b37-f589-44c7-bd87-0f6a6be337e2.png)


### ④ v-model
ユーザーの入力（フォームの値）とVueのデータを双方向（リアルタイム）に結びつける仕組みです。

** ＜基本的な書き方＞ **
``` javascript
// 入力すると message が自動的に更新され、画面の表示も変わります。
<input v-model="message">
``` 

<b>＜説明＞ </b>
v-bindを使用した場合、 ユーザーが入力欄の値を変更しても、画面に変更後の値は表示されません。

``` javascript
<template>
    <!-- メッセージ表示 -->
  <input :value="text">
  <p>{{ text}}</p>
</template>

<script>
  export default {
  data() {
      return {
        text: '入力前の値'
      }
  }
}
</script>
``` 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762100/87e59491-329e-4bd1-a5a6-596d6974deff.png)

入力を変えても変わりません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762100/daad22d4-acb3-412f-97af-0153c271471f.png)

これはVue は「最初に値を渡すだけ」で、以降は反映をおこなわないためです。データ→画面表示という一方方向のデータ流れを「** 片方向バインディング **」と呼びます。

v-modelを使用した場合、 ユーザーが入力欄の値を変更すると、画面にも変更後の値が表示されます。

``` javascript
<template>
    <!-- v-bindをv-modelに変更 -->
  <input v-model="text">
  <p>{{ text}}</p>
</template>

<script>
  export default {
  data() {
      return {
        text: '入力前の値'
      }
  	}
	}
</script>
``` 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762100/a9697208-eff4-4f26-ab1f-dd5dc3b6bb20.png)


入力を変えると画面表示も変わるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762100/1f4d9440-d52e-472e-8415-8d90b319fa30.png)

v-modelにはデータ→画面表示だけでなく画面表示→データのやり取りも行われています。このような双方向のデータ流れを「<b>双方向バインディング</b>」と呼びます。

## 4.さいごに
その他にも色々できることがあるため、次回以降もhtmlタグ内に記述できることをまとめていきます。
ご興味ある方は次回以降も見ていただけると嬉しいです。