【Nuxt.js】データ描画を実装してみた【勉強１】

## はじめに

自分が勉強した内容のまとめなので、正確性は保証しません。

[こちらのサイト](https://moneyhack.tech/04-nuxt/)にcodesandboxを埋め込んでいます。

実際の振る舞いを見ながらコードの確認ができるので非常に便利です。

https://moneyhack.tech/04-nuxt/

シンプルにcodesandboxめちゃくちゃおすすめなので、気になる方使ってみてください。

## 宣言したデータを画面上に描画する

次のコードが最もシンプルなデータ宣言です。

    <template>
      <div id="app">{{ message }}</div>
    </template>

    <script>
    export default {
      data: function() {
        return {
          message: "メッセージ"
        };
      }
    };
    </script>

{{ message }} と記載されている箇所が、宣言したデータを表示しています。

{{ ここはデータ名と一致させる必要があります }}

データを宣言しているのは data: function()の部分です。

message に"メッセージ"を定義しています。

これがデータ描画の基本的な手法です。ここから実際に使われる様々な手法を紹介します。

## 宣言したデータを属性に反映させる(v-bind)

文字列の展開に加え、要素の属性を束縛（バインディング）することもできます。

class や id の属性を束縛し、動的に色を変更したりすることも可能となります。

    <template>
      <div id="app">
        <div v-bind:class="color">文字色が変化するコード</div>
        <button @click="colorChange">変更</button>
      </div>
    </template>

    <script>
    export default {
      data: function() {
        return {
          color: "black"
        };
      },
      methods: {
        colorChange: function() {
          this.color = "red";
        }
      }
    };
    </script>

    <style>
    .black {
      color: black;
    }
    .red {
      color: red;
    }
    </style>



見慣れない記述も増えていますが、今回注目していただきたいのは次のコードです。

    <div v-bind:class="color">文字色が変化するコード</div>

v-bind:class によって属性を束縛していることがわかると思います。

今回のコードではボタン操作イベントによって切り替えを行いましたが、

属性の切り替え方法は無限に存在するので、上手に属性の束縛を使っていきましょう。

## 要素の有無をデータで切り替える(v-if)

要素の条件分岐を使い、要素の有無を切り替えることもできます。

    <template>
      <div id="app">
        <span v-if="seen">Now you see me</span>
        <button @click="seenChange">消去</button>
      </div>
    </template>

    <script>
    export default {
      data: function() {
        return {
          seen: true
        };
      },
      methods: {
        seenChange: function() {
          this.seen = false;
        }
      }
    };
    </script>

今回注目していただきたいのは、次のコードです。

    <span v-if="seen">Now you see me</span>

v-if によって、要素に条件を追加しています。

seen が true であれば要素を表示し、false であれば非表示としています。

今回はボタン操作により、表示から非表示への切り替えを行っています。

## ループ描画をデータで実現する(v-for)

配列データを使い、ループ処理によって描画を行うこともできます。

    <template>
      <div id="app">
        <li v-for="todo in todos">{{ todo.text }}</li>
      </div>
    </template>

    <script>
    export default {
      data: function() {
        return {
          todos: [
            { text: "Learn JavaScript" },
            { text: "Learn Vue" },
            { text: "Build something awesome" }
          ]
        };
      }
    };
    </script>

今回注目していただきたいのは次のコードです。

    <li v-for="todo in todos">{{ todo.text }}</li>

描画方法は最初に紹介した{{}}で囲う方法ですが、

todos の配列を呼び出し、ループ処理による描画を行っています。

## ユーザー入力を反映する(v-model)

ユーザーの入力をリアルタイムに反映させることもできます。

次の sandbox で入力を弄ってみてください。

表示される文字が入力と同時に変化することがわかります。

    <template>
      <div id="app">
        <p>{{ message }}</p>
        <input v-model="message">
      </div>
    </template>

    <script>
    export default {
      data: function() {
        return {
          message: "Hello Nuxt.js!!"
        };
      }
    };
    </script>

今回注目していただきたいのは次のコードです。

    <input v-model="message">

通常の input タグに v-model が記載されています。

この v-model がユーザーの入力とアプリケーションの状態の双方向バインディングを提供しています。

## ユーザー入力によるメソッドの呼び出し

ユーザー操作によりメソッドを呼び出すこともできます。

v-on:click で呼び出すこともできますし、@click でも呼び出すことができます。

    <template>
      <div id="app">
        <p>{{ message }}</p>
        <button v-on:click="reverseMessage">Reverse Message</button>
      </div>
    </template>

    <script>
    export default {
      data: function() {
        return {
          message: "Hello Nuxt.js!!"
        };
      },
      methods: {
        reverseMessage: function() {
          this.message = this.message
            .split("")
            .reverse()
            .join("");
        }
      }
    };
    </script>

今回注目していただきたいのは次のコードです。

    <button v-on:click="reverseMessage">Reverse Message</button>

button タグに v-on:click が追加されています。

v-on:click 以降には呼び出したい script のメソッド名を記載しています。

## おわり

データ描画、v-bind、v-if、v-for、v-model、v-on:click と表現方法を学びました。

いまいち消化しきれていない方は、実際に手を動かして動作を確認することをおすすめします。

そこまで難しくない表現方法のため、

全て習得してしまい、自身のやりたいことに合わせて使い分けていきましょう。