はじめに 軽量JSフレームワークとして有名なVue.js。 最近、Laravelに触れる機会が増えたことと、以前からRails + Vueという構築を耳にするので、今更ではありますが勉強を始めようと思います。 今回は基本文法に関してメモしていきます。 なお、Vue.jsの公式ドキュメントはこちらになります。 https://jp.vuejs.org/ 使用ツール 今回はJSFiddleを使用して開発します。 公式でも進められており、今回のような簡単な文法を試すくらいであればちょうど良いのかな、と思います。 なお、使用する場合はJavaScriptのFWをVue.jsの2系にします。 今回扱う内容は、公式ドキュメントに依ります。

ちなみに、 vm はViewModelの意味であり、MVVMパターンの影響を受けているとのことです。 私は前回、Vueインスタンスを app という変数に保存しておりましたが、慣例的には誤りだったということになります。 （申し訳ありません！） プロパティとメソッド Vueインスタンスは、自身の data の値を持ちます。 data が変更されると、Vueインスタンスのプロパティも変化し、その逆も然りです。 試しに、下記のコードを書き、インスタンスを生成します。

はじめに 7/12 修正 記事下部にて、 filter メソッドを使用している箇所がありましたが、 forEach の方が適しているとご指摘がありましたので、修正しました。 以前Qiitaの方に投稿した記事ですが、こちらにも投稿します。 少しご指摘もいただいたので、FIX版になります！ Vue.jsの勉強で超簡単なタスク管理アプリを作ってみる 今まで、Vue.jsの記事として下記を投稿してきました。 Vue.js入門その１〜基本文法〜 Vue.js入門その２〜Vueインスタンスってなんぞ？〜 ただ、今ひとつピンとこなかったため、よくあるTODOアプリを作成してみました。 サンプルはこちらです。 https://jsfiddle.net/naoki85/fo26rmr0/12/ 準備 Bootstrapを読み込み CSSは面倒なので、Bootstrapを使用したいと思います。 JS Fidd