[Vue.js]TODOアプリの開発〜Vueインスタンスとルートテンプレートの作成 / 主要な要素の配置 / 追加ボタンのイベントハンドリング

Vue.jsを利用して、TODOアプリの開発をしてみます。今まで学習した内容のまとめはこちらから一覧でご覧いただけます。引き続きjsFiddleを利用して開発していきます。

Vue.js以外にも基本的なWebスキルを動画で受講することができます。年に何回かセールがあるので、その時にまとめて購入するのがおすすめです。

Vue.jsを読み込む

まずはVue.jsを読み込みます。今回はCDNを使います。こちらに掲載されているものをコピペしてきましょう。

https://jp.vuejs.org/v2/guide/installation.html

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

こちらの講座では、Vue.jsのバージョンを2.5.16に固定しているので、任意で変更をします。

空のVueインスタンスを作成

空のVueインスタンスを作成します。以前作ったように作りましょう。

var app = new Vue({

})

ルートテンプレートを作成

htmlにテンプレートを作ります。

<div id="app">

</div>

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

テンプレートをマウント

Vueインスタンス側でテンプレートをマウントします。

var app = new Vue({
    el: '#app'
})

主要な要素の配置

ここでは以下を配置していきます。

• 見出し
• テキスト入力欄
• 追加ボタン

<div id="app">
  <h2>Todo List</h2><!-- 見出し -->
  <form>
    <input type="text"><!-- テキスト入力欄 -->
    <button><!-- 追加ボタン -->
      Add
    </button>
  </form>
</div>

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

追加ボタンのイベントハンドリング

Addボタンが押されたらイベントハンドラのメソッドを呼ぶ記述を加えます。v-on:clickを<button>タグに追加します。このボタンをクリックするとaddItemというイベントハンドラを呼ぶようになっています。

<div id="app">
  <h2>Todo List</h2>
  <form>
    <input type="text">
    <button v-on:click="addItem">
      Add
    </button>
  </form>
</div>

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

次のVueインスタンス側を設定します。

var app = new Vue({
  el: '#app',
  methods: {
    addItem: function(event) {
      alert();
    }
  }
})

これも以前やった内容ですね。function(event)のevent引数にはevnetオブジェクトが入っています。デバッグ用にalert();が記述してあるので、実際にクリックしてみるとアラートが出てくると思います。出てきたら呼び出し成功です。

このままだと、Addボタンを押して、アラートが出てきてOKボタンを押して消すと、実行結果欄が404エラーとなってしまいます。これは、サブミットイベントによってページがリロードされてしまっているからです。ですので、サブミットイベントを無効にするために、formにこのように記述を追加しましょう。

<div id="app">
  <h2>Todo List</h2>
  <form v-on:submit.prevent>
    <input type="text">
    <button v-on:click="addItem">
      Add
    </button>
  </form>
</div>

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

formタグにv-on:submit.preventを追加しました。公式サイトのリファレンスにはこのように記述してあります。

https://jp.vuejs.org/v2/guide/events.html#%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E4%BF%AE%E9%A3%BE%E5%AD%90

<!-- 値を指定せず、修飾子だけ利用することもできます -->
<form v-on:submit.prevent></form>

Vue.js以外にも基本的なWebスキルを動画で受講することができます。年に何回かセールがあるので、その時にまとめて購入するのがおすすめです。

まとめ

まずは下準備と言ったところですかね。ここら辺は、以前までの基本的な部分で何度も記述しているので、まだなんとなく覚えています。引き続き頑張っていきましょう！