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

はじめに

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

こちらのサイトにcodesandboxを埋め込んでいます。

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

シンプルに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 と表現方法を学びました。

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

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

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