Vue.jsでHello World [入門]

2019年3月8日

Vue.jsの「入門」でよく取り上げられる基本的なワードを説明していきます。

 

 

まずは手っ取り早くHello Worldから。フォーム内にはあらかじめ「Hello World」の文字が表示され、その文字を編集するとリアルタイムにフォーム下の文字も変わります。

 

実際の開発の多くはVue CLI等のフレームワークなどでプロジェクトを作成していきますが、本記事ではCDNを利用してVue.jsを取り込み説明していきます。

 

関連ページ

Vue CLI 3 ではじめるVue RouterとVuex入門

 

また上記Hello Worldのサンプルでは警告出力を吐き出す開発モードでVue.jsを取り込んでいますが、本番環境ではvue.min.jsであるURLで読み込みます。

 

Vueインスタンスを作成しています。コンストラクタ関数であるVue()関数の引数にはオブジェクト{}が設定されています。その内のelオプションにHTMLの要素であるidを指定しています。これでVueインスタンス(つまりVueオブジェクト)とHTML側のid=’app’内がマウントされ、Vue.jsとHTML側とのデータバインディングが可能となります。

 

関連ページ

オブジェクトについて[コンストラクタ関数][new演算子]

 

dataオプションには、アプリケーション内で利用するデータを記述していきます。HTML側では{{  }}によるMustache(ムスタッシュ)タグで囲むことによってその値を表示させることができます。

 

フォーム内にdataオプションの値を表示させるにはv-modelディレクティブを利用します。このv-modelディレクティブによって双方向バインディングを実現することができます。

試しに下記のように、単に属性として設定するためのv-bindディレクティブに変更してみると、フォーム内の文字を編集してもフォーム下の文字は変更されません。

 

 

Vue.jsを学ぶには、まずどのようなオプションがあり、そして何のディレクティブでHTML側の描画と結び付けていくのか知ることからはじまります。

 

 

例えば、ボタンをクリックした場合に関数を実行するにはv-onディレクティブを利用します。

 

ボタンをクリックして関数を実行する[v-on]

 

HTML要素の属性に対してデータバインディングするには、v-bindディレクティブを利用します。

 

v-bindでstyle、classの属性値を変える

 

また下記関連ページでは、createdオプション(Vueオブジェクトが生成されデータの初期化が完了した時点で呼ばれる)にてJSONを読み込み、v-forディレクティブにて取得した値を繰り返し表示させています。

 

axiosでJSONを取得する

 

 

 

LINEで送る
Pocket

Copyright © 2019 思考の葉 All Rights Reserved.  プライバシーポリシー