【Vue.js】Vue.js でとりあえず Hello World を表示してみる

2020年2月14日Javascript,開発

おはようございます。

今日は、本当にサクッと、Vue.js を始めるにあたってお決まりのやつをやっておきたいと思います。

スポンサーリンク

Vue.js とは

公式サイトより転載

Vue.js は、ユーザーインターフェイスを構築するためのプログレッシブフレームワークです。

他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。

中核となるライブラリは view 層だけに焦点を当てています。

そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。

また、モダンなツールやサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。

あなたが Vue についてもっと深く学ぶ前に概要を知りたいのなら、中核となる原則とサンプルプロジェクトを元に説明するビデオを作成しているので、それを見るとよいでしょう。

あなたが経験豊富なフロントエンド開発者で、 Vue.js と他のライブラリ/フレームワークを比較したい場合、他のフレームワークとの比較を確認してください。

色々と書いてありますが、主な特長としては、JQuery のように開発者が画面上の動作を自分でプログラミングする必要がない、という感じでしょうか。

ということで早速。

プログラム

css

css/style.css

html

index.html

ポイントとなる箇所は、vue.js の読み込み（CDN）と、div内に記述した{{}}で囲まれた箇所ですかね。

Javascript

js/script.js

Vue関数にパラメータ（オブジェクト）を渡してやることで色々とやってくれます。

起動してみる

無事にメッセージが表示されました。

まとめ

何事も始めなければ始まらないということで、サクッとお決まりの Hello World を出力してみました。

これから色々弄っていきたいと思います。

ではでは。