FrontEnd

Vue.jsでWebアプリケーションを作る〜Vue.jsの基礎〜

投稿日:

はじめに

この記事は、初めてVue.jsをさわる方を対象にVue.jsの特徴や基礎知識について紹介します。

Vue.jsとは

Vue.jsはWebアプリケーションのUIを構築するためのJavaScriptフレームワークです。Vue.jsを使うことでWebページ内に動的なUIを追加したり、SPAを簡単に作ることができます。

Vue (発音は / v j u ː / 、 view と同様)はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てています。そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。また、モダンなツールサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。

出典:Vue.js Vue.jsとは?

インストール

Vue.jsのインストール方法はいくつかありますが、一番簡単なCDNを使う方法を紹介します。HTMLファイル内に以下の記述を追加します。

Vueアプリケーションを作る

Vueで文字を表示する簡単なサンプルコードは以下のとおりです。

el オプションで指定した要素と繋がります。下の例では {{text}} の部分に data オプションで指定した Sample Text が表示されます。

データを表示する

文字列を表示する

文字列を表示するには {{}} (マスタッシュ)で囲う方法と v-text で指定する方法があります。使い方は以下のとおりです。

HTMLで表示する

data をHTMLとして表示するには v-html を使います。使い方は以下のとおりです。

属性を指定する

要素の属性を data で指定するには v-bind を使います。使い方は以下のとおりです。

v-bind は以下のように省略が可能です。

インラインスタイルを指定する

インラインスタイルを data で指定するには以下のようにします。属性名はキャメルケースで記述する点に注意が必要です。

クラスを指定する

クラスを data で指定するには以下のようにします。

複数のクラスを指定したり、条件に応じて指定することもできます。

入力に応じて表示を変える

ユーザの入力に応じて表示を変更するには v-model を使います。使い方は以下のとおりです。

イベントに応じて表示を変える

ユーザのイベントに応じて表示を変えるには v-on を使います。使い方は以下のとおりです。

v-on は以下のように省略が可能です。

条件分岐

条件に応じて表示を切り替えるには v-if と v-else を使います。使い方は以下のとおりです。

繰り返し

繰り返して表示する場合は v-for を使います。使い方は以下のとおりです。

さいごに

Vue.jsでWebアプリケーションを作るにあたり、基本的な使い方を紹介しました。

おすすめ書籍

確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ)  スラスラ読める JavaScript ふりがなプログラミング (ふりがなプログラミングシリーズ)  動かして学ぶ!Vue.js開発入門 (NEXT ONE)  基礎から学ぶ Vue.js

blog-page_footer_336




blog-page_footer_336




-FrontEnd
-

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

Vue.js入門その8〜vue-draggableを使ってドラッグ機能の実装〜

1 はじめに2 準備3 一列の並び替え3.1 移動する前、移動した後3.1.1 move3.1.2 end4 2列間の移動4.1 片方を空配列にすると。。。5 さいごに6 おすすめ書籍 はじめに 久し ...

Vuexの機能と使い方

1 はじめに2 Vuexとは2.1 Single Source of Truth2.2 状態の取得、更新のカプセル化2.3 単方向データフロー3 Vuexのストア3.1 ステート3.2 ゲッター3.3 ...

react-icon

React Big Calendarの複数タイムゾーン対応

1 はじめに2 端末のタイムゾーンのみに対応する場合3 複数のタイムゾーンに対応する。3.1 日時を指定のタイムゾーンに変換する3.2 イベントの開始日時・終了日時を動的に設定する3.3 ラップクラス ...

js

JavaScriptのみでPOSTした場合のCSRFトークンの認証に関するTIPS

1 はじめに2 実装2.1 なぜエラーが発生したか2.2 修正後のコード3 さいごに はじめに RailsアプリケーションでPOSTリクエストを送る場合、多くの場合はform_withなどのヘルパーを ...

Vue.jsとRailsでTODOアプリのチュートリアルみたいなものを作ってみた【2018.03.24】

1 はじめに1.1 作るもの1.2 前提条件、及び環境1.3 Webpack について2 準備2.1 Rails + Vue.jsのプロジェクトを作成する2.2 Vue.jsの表示確認2.3 devサ ...

フォロー

follow us in feedly

blog-page_side_responsive

2019年4月
« 3月 5月 »
 123456
78910111213
14151617181920
21222324252627
282930 

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。