ふりぶろぐ
Web Engineer's Blog
JavaScript

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

Vue.jsの基礎を知りたい!
とりあえず動かしてみたい!
基本的なことは解説してほしいな。

このようなご希望にお応えします。

この記事の内容
  • Vue.jsを読み込んでみよう!
  • Vueインスタンスを宣言しよう!
  • Hello Worldを表示させてみよう!

超初心者向けVue.js入門講座です。
一緒にVue.jsを勉強して、Vue.jsを楽しみましょう!

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

読んでほしい人
  • Vue.jsが初めての人
  • Vue.jsを復習したい人
  • Vue.jsを動かしてみたい人

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

Loading

まずはVue.jsを読み込んでみましょう。
ちなみにVue.jsは「びゅーじぇいえす」と発音します。

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

Vue.jsは日本語のドキュメントも存在します。
英語が読めなくても大丈夫なので、なにか困ったら公式ドキュメントを読んでみるのもありですね。

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

試すだけならCDNの開発バージョンがおすすめです。
今回はこちらを使用します。

CDNの開発バージョンVue.js

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

まだ読み込んだだけなので何も起きないです。
これからVue.jsの処理を書いていきます。

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

Ideas

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

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

しかしこのままでは何も起こりません。
では次に、このインスタンスにプロパティを追加していきましょう。

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

elプロパティを使ってターゲットを指定しましょう。
どの要素に対してVueインスタンスを適用するのかを指定するプロパティですね。

今回はid=appのdivタグをターゲットにしました。
要素を指定する方法はjQueryと同じですね。(idの場合は#

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

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

次に、Vueインスタンスにデータを追加しましょう。
今回は表示させたい「Hello World!」というテキストをセットしてみます。

データを追加するにはdataプロパティを使用します。
データは複数指定することもあるので、こちらのプロパティはオブジェクトを取ります。
そのオブジェクトの中に必要なプロパティを宣言しましょう。

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

これで表示するための準備ができました。
では実際に表示させてみましょう。

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

world

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

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

プロパティ値を表示するには{{ }}(二重中括弧)を使用します。
{{ }}ありのパターン、なしのパターンの表示の違いに注目です。

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

  • {{ }}ありのパターン → 指定した値が表示される
  • {{ }}なしのパターン → そのままテキストが表示される

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

まとめ

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

いかがだったでしょうか?
初歩的な部分ですが、非常に重要な部分でもあります。

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

ABOUT ME
りーふ
たまにブログを書いてるWebエンジニア。 サーバーサイドメインでインフラとフロントエンドもたまにやります。 Javaが得意。 Play Frameworkが好き。 本業は迷惑をかけない程度に手を抜くスタイル。 意識高い系は苦手。