最速でVue.jsの学習環境を作る

はじめに

　自分はこれまでフロントエンドをほとんど触ったことがありませんでした。どのくらいフロントエンドに触れてなかったかというと、フロントエンドで処理が必要なときは、C#のRazor文ですましてしまったり、もう少し複雑な処理の時は、JQueryを使っていました。
　趣味レベルであればこれでも良かったのですが、仕事でVueを使うことになり、3日ほど前から本格的に学習を初めてみました。
　ようやっと自分の中で「この学習環境が一番始めやすいんじゃないか」というものができたので、備忘録を残していこうと思います。

jsfiddle

jsfiddleはブラウザ上で、HTML・JavaScript・CSSを実装できるサービスです。

リンク：jsfiddle

jsfiddleでアカウントを作成することで、インターネット上にソースコードを保存しておくことも可能です。
自分はこの環境でVue.jsのチュートリアルをやりました。
jsfiddleの使い方とかは説明するまでもないかと思うので、使い方とかは、書きません。というか、RunとSaveボタンしか押したことないので、説明とかできません。笑

Vueでfor文、if文

　Vueには、色々な機能があるのですが、プログラマー が一番最初に書き方を知りたいのが、この二つかと思います。

ここでは、「Reverse」ボタンを押すと、「Now you see me」という文字が表示されるというプログラムをif文を使って実装しています。

Vueでは、v-ifディレクティブと呼ばれる要素をタグの中に入れることで、if文を実装することができます。
ちなみに、for文はv-forと書きます。

上図のプログラムは、Vueインスタンスの一例です。
赤四角の部分で、Vueインスタンスがマウントする要素を指定します。
青四角部でVueインスタンスのデータを保持し、黄色部分で、メソッドを持つことができます。

公式チュートリアルにて、
算出プロパティとメソッドの比較や
算出プロパティと監視プロパティ
など、より理解を深められるような解説があります。

公式：算出プロパティとウォッチャ

今後

他にも、Vueには様々なディレクティブがあったり、イベントハンドラがあったり
効率よく開発するためのデザインパターンとしてAtomic Designであったり、コンポーネント思考などまだまだ学ばなければいけないことはたくさんあります。
この辺りの理解が深まってきたら、また記事を更新していこうと思います。

コピペ用ソースコード

html

Vueインスタンス