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

1.はじめに

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

2.基本的な書き方

概要

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

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

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

3.基本的な操作

①v-bind

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

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

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

<htmlタグ :プロパティ名="変数">
 // 例 <img :src="imageUrl">

** ＜説明＞ **
下記のコードだとsrcの値は静的（固定）であるため、常に "dog.jpg" しか表示されません。

　// srcは画像の場所（URL）を指定するタグです。
　<img src="dog.jpg">

下記のコードのようにv-bindを使うと** imageUrlのデータの中身を見て ** 、表示する内容を変えられるようになります。
（imageUrlの値が"dog.jpg" の場合は"dog.jpg"が、"cat.jpg"の場合は"cat.jpg"と動的に変化します。）

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

** ＜テストコード＞ **

<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の値が変更されるので、

から

へと画像が変わります（エッホエッホ）！

②{{ 変数名 }}

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

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

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

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

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

③v-on

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

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

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

** ＜説明＞ **

<template>
    <!-- メッセージ表示 -->
    <p> {{ message }} </p>

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

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

ボタンをクリックをすると、

messageの値が変わる関数が実行されます。

④ v-model

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

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

// 入力すると message が自動的に更新され、画面の表示も変わります。
<input v-model="message">

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

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

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

入力を変えても変わりません。

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

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

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

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

入力を変えると画面表示も変わるようになります。

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

4.さいごに

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