サンプルコードから基礎を学ぶ！Vue.js入門講座！【Hello World編】

今回はこのようなご要望をいただきました。

Vue.jsの基礎を知りたい！
とりあえず動かしてみたい！

ということで今回はプログラミングの第一歩でもあるHello Worldを表示させてみたいと思います。

超初心者向けVue.jsの入門講座です。

一緒にVue.jsを勉強して、Vue.jsを楽しみましょう！

Vue.jsを読み込んでみよう！

まずはVue.jsを読み込んでみましょう！

公式HPのガイドを確認してみよう！

Vue.jsの読み込み（インストール）手順は公式ガイドに書いてあります。

>> はじめに — Vue.js

Vue.jsは日本語のドキュメントも存在します。

英語が読めなくても大丈夫なので、なにか困ったら公式ドキュメントを読んでみるのもアリですね！

試すだけならCDNの開発バージョンがおすすめ！

試すだけならCDNの開発バージョンがおすすめです。

今回はこちらを使用します。

これを読み込むだけでVue.jsが使えるようになります。

では実際に読み込んでみましょう！

まだ読み込んだだけなので何も起きないです。

これからVue.jsの処理を書いていきます。

Vueインスタンスを宣言しよう！

Vue.jsを読み込むことができたので、今度はVueインスタンスを宣言してみましょう！

Vueインスタンスを宣言する場合は次のように書きます。

しかしこのままでは何も起こりません。

では次にこのインスタンスにプロパティを追加していきましょう！

elプロパティでターゲットを指定する

elプロパティを使ってターゲットを指定しましょう。

どの要素に対してVueインスタンスを適用するのかを指定するプロパティですね。

今回はid=appのdivタグをターゲットにしました。

要素を指定する方法はjQueryと同じですね。（idの場合は#）

これでターゲットを指定することができました。

dataプロパティでデータを持つことができる

次に、Vueインスタンスにデータを追加しましょう！

今回は表示させたい「Hello World!」というテキストをセットしてみます。

データを追加するにはdataプロパティを使用します。

データは複数指定することもあるので、こちらのプロパティはオブジェクトを取ります。

そのオブジェクトの中に必要なプロパティを宣言しましょう。

messageプロパティに’Hello World!’をセットしてみました。

これで表示するための準備ができました。

では実際に表示させてみましょう。

Hello Worldを表示させてみよう！

では実際に、Vueインスタンスに定義されたmessageプロパティをHTML上に表示させてみましょう。

プロパティ値を表示するには{{ }}を使用する

プロパティ値を表示するには{{ }}（二重中括弧）を使用します。

{{ }}ありのパターン、なしのパターンの表示の違いに注目です。

{{ }}を使うことで指定した値を表示できましたね。

これでVue.jsを使ってHello Worldを表示することができました！

まとめ

無事、Hello Worldを表示することができました。

いかがだったでしょうか？

初歩的な部分ですが、非常に重要な部分でもあります。

これからも必ず必要になるので、しっかりと覚えておきましょう。