【こいつ…動くぞ!】おじさんと一緒にToDoアプリチュートリアル(1)【Vue.js】


ご覧いただきありがとうございます!UGと申します!

前回の「 おじさんと一緒に 」からかなり話がそれてしまいますが・・・

かのアムロ大佐が感動した時と同じような感動をVueで味わいました!ので!

いきなりですがVueで簡単なToDoアプリのチュートリアルを作成してみたので、皆さんと感動を共有したいと思います・・・

※ html・css・JavaScriptが何となく書ける方向けです
※今回、vue-cliは使用しません。基本的なVueの機能を体感したい、という人向けです。

1.最終的なゴールと本記事でのゴール!

最終的なゴール


最終的なゴールは上記gif画像の通りです。

1.Vueを使って文字を表示する
2.inputタグに入力した文字をブラウザ上に反映させる
3.todoリストを表示させる
4.todoリストに表示させる部品を作成する
5.inputタグに入力した文字をtodoリストへ反映させる
6.削除ボタンを押す事でtodoリストからアイテムを削除させる

これらの動作を実装していきたいと思います!

本記事でのゴール!

本記事でのゴールは上記1

「 Vueを使って文字を表示する 」

を目標にしていきたいと思います!

2.今回のファイル構成


単純なファイル構成です。

testディレクトリの中に
・index.html

・jsディレクトリを配置し、
 index.htmlに対するindex.js

を配置しております。

3.htmlファイルを準備!Vueを適用する!

html自体はh1タグで「 hello!!! 」
と表示させ、

id=appで囲ったpタグに「message」と表示させているだけの単純な構成です

ポイントは以下の通りです。

Vueをscriptタグで適用!


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

上記リンクはVue公式ガイドです。

このガイドに従い、


scriptタグでVueファイルを呼び出し、適用。

その次の行でindex.jsを適用させていきます。

これから先は、JavaScript構文及び、Vueのコードはindex.jsに記載していきます!

id=appとして、Vueを適用させる範囲を決める

index.jsにVueのコードを記載していきますが、

「html構成の中のどの部分にVueを適用させるか」

を決める為、messageの部分をid=appで囲んでいます。

index.jsでは、「id=appの部分をVueとして適応させる」、と、明示的に宣言させ、コードを組み立てていきます。

4.Vueクラスをインスタンス化し、id=appの部分に割り当てる

appへVueを適応させる
データオブジェクトにmessageを追加

index.jsに上コードを入力してください。

Vueクラスをインスタンス化し、その中で、

el: ‘#app’・・・・・・・idがappの部分に、Vueを適用させる
message: “sample”・・テンプレート(html)から参照出来るオブジェクトを利用し、messageと指定したhtmlを”sample”というデータを割り当てる

ということをやっています。

ややこしいので、ここでとまらず、次の章へ進んでください。

次の章を経由すると、上記説明で伝えたかったことがわかるかと思います!

ゴール! v-text(Vueの構文)を使って、messageをsampleに置き換える

この部分を

このようにコードを修正してください。

ブラウザをリロードさせると、messageと表示されていた部分が

「sample」と表示されます!!!

前章にてdataオブジェクトで指定したmessage: “sample”が適応される

前章で長々と説明した事はこの部分のことです。

v-text=”message”と指定したhtml部分へ、dataオブジェクトで「message」とした部分に”sample”を割り当てています。

v-textの部分をもっとシンプルに書く

v-text構文を記載したpタグを上のように書き換えてみて下さい。

同じように、sampleが表示されます。

こちらの方がシンプルでわかりやすくなったかと思います!

以上の工程で、基本的なVueアプリ(Vueで文字を表示させる)の完成です!

本記事の最終的なコードとまとめ

本記事での最終的なコード

まとめ

いかがだったでしょうか

本記事にて

・Vueの呼び出し・インスタンス化
・v-text 記載方法 と、よりシンプルにした記載方法

を紹介いたしました!

今回の記事では「動くぞ…!」は体験できませんでしたが、次回の記事で体験できる方と思います!

それでは、今回はここで失礼いたします!