Vue.jsの「入門」でよく取り上げられる基本的なワードを説明していきます。
まずは手っ取り早くHello Worldから。フォーム内にはあらかじめ「Hello World」の文字が表示され、その文字を編集するとリアルタイムにフォーム下の文字も変わります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <div id="app"> <p><input type="text" v-model="message"></p> <p>{{ message }}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { message: 'Hello World' } }); </script> </body> </html> |
実際の開発の多くはVue CLI等のフレームワークなどでプロジェクトを作成していきますが、本記事ではCDNを利用してVue.jsを取り込み説明していきます。
関連ページ
Vue CLI 3 ではじめるVue RouterとVuex入門
また上記Hello Worldのサンプルでは警告出力を吐き出す開発モードでVue.jsを取り込んでいますが、本番環境ではvue.min.jsであるURLで読み込みます。
|
1 |
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.min.js"></script> |
|
1 2 3 4 5 6 |
new Vue({ el: '#app', data: { message: 'Hello World' } }); |
Vueインスタンスを作成しています。コンストラクタ関数であるVue()関数の引数にはオブジェクト{}が設定されています。その内のelオプションにHTMLの要素であるidを指定しています。これでVueインスタンス（つまりVueオブジェクト）とHTML側のid=’app’内がマウントされ、Vue.jsとHTML側とのデータバインディングが可能となります。
関連ページ
dataオプションには、アプリケーション内で利用するデータを記述していきます。HTML側では{{ }}によるMustache（ムスタッシュ）タグで囲むことによってその値を表示させることができます。
|
1 |
{{ message }} |
フォーム内にdataオプションの値を表示させるにはv-modelディレクティブを利用します。このv-modelディレクティブによって双方向バインディングを実現することができます。
|
1 |
<input type="text" v-model="message"> |
試しに下記のように、単に属性として設定するためのv-bindディレクティブに変更してみると、フォーム内の文字を編集してもフォーム下の文字は変更されません。
|
1 |
<input type="text" v-bind:value="message"> |
Vue.jsを学ぶには、まずどのようなオプションがあり、そして何のディレクティブでHTML側の描画と結び付けていくのか知ることからはじまります。
例えば、ボタンをクリックした場合に関数を実行するにはv-onディレクティブを利用します。
HTML要素の属性に対してデータバインディングするには、v-bindディレクティブを利用します。
また下記関連ページでは、createdオプション（Vueオブジェクトが生成されデータの初期化が完了した時点で呼ばれる）にてJSONを読み込み、v-forディレクティブにて取得した値を繰り返し表示させています。
