こんばんは！ヒカリです。
Webエンジニアを目指してプログラミングを勉強している初心者の方向けに情報を発信しています。
今回はこのようなご要望をいただきました。
Vue.jsの基礎を知りたい！
とりあえず動かしてみたい！
ということで今回はプログラミングの第一歩でもあるHello Worldを表示させてみたいと思います。
超初心者向けVue.jsの入門講座です。
一緒にVue.jsを勉強して、Vue.jsを楽しみましょう！
Vue.jsを読み込んでみよう！
まずはVue.jsを読み込んでみましょう！
公式HPのガイドを確認してみよう！
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を表示することができました。
いかがだったでしょうか？
初歩的な部分ですが、非常に重要な部分でもあります。
これからも必ず必要になるので、しっかりと覚えておきましょう。
