この記事では、Vue.jsのちょっとしたコーディングをすぐに始めることができるように、HTMLファイルに記述するテンプレートのコードを掲載します。
目次
HTMLファイルを作成して保存する
まずコードを記述するためのファイルを作成します。
テキストエディターを使用してHTMLファイルを作成してください。
拡張子を「.html」ファイルで保存します。
保存するときのエンコーディングは「UTF-8」にしてください。
HTMLファイルに記述するテンプレートのテキスト
HTMLに記述するテンプレートのテキスト（コード）を以下に示します。
|
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 30 31 32 33 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>Vue.js Example</title> <!------------ ↓ スタイル ↓ ------------> <style> /* ここにスタイルを記述する */ </style> <!------------ ↑ スタイル ↑ ------------> </head> <body> <!---------- ↓ テンプレート ↓ ----------> <div id="app"> <!-- ここにページのコンテンツを記述する --> </div> <!---------- ↑ テンプレート ↑ ----------> <script src="https://unpkg.com/vue@next"></script> <!--------- ↓ Vue.jsのコード ↓ ---------> <script> Vue.createApp({ // ここに処理を記述する }).mount('#app') </script> <!--------- ↑ Vue.jsのコード ↑ ---------> </body> </html> |
上記のコードを作成したHTMLファイルに貼り付けてください。
テンプレートのテキストの説明
テンプレートテキストの簡単な説明をしておきます。
- 1行目でHTMLファイルのDOCTYPEを指定しています。
- 2行目から13行目までがヘッダーになります。
- 3行目で文字コードに「UTF-8」を指定しています。
- 8行目から10行目までがスタイル（CSS）の記述です。必要に応じてここにスタイルを記述してください。
- 14行目から32行目までがHTMLの中身（ボディ）になります。
- 17行目から19行目までが、Vue.jsのインスタンスにマウントするルートのHTML要素を定義しています。ここではid属性が「app」のdiv要素を作成しています。
- 22行目はVue.jsを使えるようにするためにCDNを利用してVue.jsを参照しています。
- 25行目から29行目までがスクリプト（JavaScript）の記述です。ここでVueのインスタンスを生成して処理を記述します。
- 26行目でcreateAppメソッドを使用して、Vueのインスタンスを作成しています。
- 28行目でmountメソッドを使用してHTMLに作成した要素をVueのインスタンス（オブジェクト）にマウント（紐づけ）しています。
テンプレートを利用した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 30 31 32 33 34 35 36 37 38 39 40 41 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>Vue.js Example</title> <!------------ ↓ スタイル ↓ ------------> <style> #message { font-weight: bold; color: #004a7f; font-size: 20pt; } </style> <!------------ ↑ スタイル ↑ ------------> </head> <body> <!---------- ↓ テンプレート ↓ ----------> <div id="app"> <span id="message">{{message}}</span> </div> <!---------- ↑ テンプレート ↑ ----------> <script src="https://unpkg.com/vue@next"></script> <!--------- ↓ Vue.jsのコード ↓ ---------> <script> Vue.createApp({ data: function() { return { message: 'Hello world!' } } }).mount('#app') </script> <!--------- ↑ Vue.jsのコード ↑ ---------> </body> </html> |
実行結果
コメントを除去したテキスト
先に示したHTMLに転記するテンプレートのテキストから、コメントを除去したコードを以下に記載しておきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>Vue.js Example</title> <style> </style> </head> <body> <div id="app"> </div> <script src="https://unpkg.com/vue@next"></script> <script> Vue.createApp({ }).mount('#app') </script> </body> </html> |
コメントが不要な方は、こちらをご利用ください。
補足（jsFiddleの利用）
HTMLファイルを作成するのが面倒な方は、jsFiddleというオンラインのコーディングサービスを利用することもできます。
jsFiddleを利用してVue.jsのコーディングをする方法については、以下の記事にまとめていますので、興味のある方はご覧ください。
jsFiddleでVue.jsのサンプルプログラムを作成する
ここでは、jsFiddleを利用してVue.jsのコーディングを行います。
Vue.jsをこれから始めようという方はローカルに環境...
johobase.com
リンク
