Vue.js のはじめ方 HelloWorld表示

近年では、ReactやangularJsなど、JavaScriptのフレームワークが盛り上がりを見せています。

そんな中でも手軽に導入できるJSのフレームワークである、

Vue.jsでHellowWorldを表示させてみようと思います。

ただ、HelloWorldを表示させると言っても、

Jsだと色々とあると思いますので、

今回は、公式ページで説明されています宣言的レンダリングで、

divタグに、HelloWorldを表示してみたいと思います。

 

宣言的レンダリングとは

以下、公式ページVue.js はじめに 宣言的レンダリングの引用となります。

こちらでは、宣言的レンダリングのサンプルが紹介されており、
divタグ内に{{ message }}という記述があり、

その内容が、Jsのmessage部分で指定されているHello Vue!に置き換えて表示が行われています。

こういった形で、Dom(Divタグ)と、
JavaScript側で作成されたデータ(var app)の関連付けを行っておくと、

Vue.jsが関連付けされた形で描画を行ってくれます。

 


手順

以下は、ローカルで確認するための簡単な手順となります。

  1. Vue.jsファイルダウンロード
  2. Htmlファイル作成・HelloWorld表示の記述

 

まず、Vue.jsを公式サイトからダウンロードします。

Vue.js

インストールの説明ページより、Vue.jsの本体をダウンロードすることが出来ます。

尚、Vue.jsには、実行ログなどが出力される開発バージョンと、本番バージョンが存在します。

今回は、開発用のバージョンを取得します。

取得したvue.jsを、htmlファイルに読み込ませたい場所に配置します。

今回は、簡単な演習なので、htmlファイルと同じ場所に配置しました。

早速、htmlファイルを修正していきたいと思います。

ほぼ、公式サイトの説明ページのソースと同様の内容です。

こちらの形で、htmlファイルを保存し、

そのhtmlファイルをブラウザで表示すると、

下記の様に、HelloWorldと表示されます。

 

修正したhtmlファイルの内容について、簡単に補足させて頂きます。

まず、Vue.jsを利用するために、コアとなるvue.jsを読み込みます。

 

そして、HelloWorldを表示させるDivタグを記述します。

ここで、idappと指定することで、タグ内の{{ msg }}にデータバインディングが行われます。

 

更に、データバインディングを行うための、vueオブジェクトの作成をjavascriptで行います。

変数objに、divタグのmustache タグ({{msg}})に対応する形で代入を行います。

ここで設定されている文字が、divタグに表示されます。

そして、Object.freeze()関数で、オブジェクト内容の変更を停止しています。

※停止を行わなくても、変数の内容を変更しなければ、正しく動作します。

最後に、vueオブジェクトを生成しています。

elで指定しているのが、表示するタグのidで、

dataが表示内容となる、事前に用意した変数objとなります。

 

尚、ブラウザの開発者ツール(F12)で、表示されているhtmlを確認すると、

divタグは、レンダリングされた後の状態で読み込まれています。

 


 

以上が、Vue.jsを利用したHello Worldの表示となります。

Vue.jsは、非常に簡単に導入できます。

簡単な処理であれば、学習コストもそこまでかからずに実装することが出来ます。

また、Vue.js公式サイトでは、分かりやすいドキュメントが存在しますので、

参考に頂ければと思います。

都内でエンジニアをやっています。 2017年に脱サラ(法人設立)しました。 仕事で調べたことや、気になったことをメモしています。
投稿を作成しました 82

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連する投稿

検索語を上に入力し、 Enter キーを押して検索します。キャンセルするには ESC を押してください。

トップに戻る