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

この記事はUdemyの講座「Vue JS入門決定版!jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ」の学習を進めながら書いた記事になります。Vue.jsに関する記事の一覧はこちらからご覧いただけます。

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

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

Vue.jsを読み込む

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

<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を追加しました。公式サイトのリファレンスにはこのように記述してあります。

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

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

まとめ

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

あなたのホームページのお話をしませんか?

堅苦しい形式での打ち合わせや商談は苦手です。そうではなく、気楽にカフェや喫茶店で雑談するくらいの雰囲気で、あなたのホームページのお話をしませんか?(珈琲代は割り勘で)

岐阜市内近郊であれば直接ご対面で、そうでなければSkypeなどでどうですか?

この記事を書いた人

久野 晃司

Gifu WordPress Meetup共同オーガナイザー。岐阜を中心にWeb全般のお仕事をしているフリーランスです。趣味はサッカー観戦。専門は英国プレミアリーグ、マンチェスターユナイテッドを贔屓しています。英国滞在歴2年、日常英会話は大丈夫です。20ヶ国以上列車で単独周遊してきました。WordPress大好きです。プログラミング教育に興味があります。

この記事が気に入ったら
いいね!しよう

最新の情報をお届けします