JavaScriptフレームワークである「Vue.js」のマスタッシュ構文について説明します。
Contents
マスタッシュ構文(Mustache構文)とは？
テキスト展開の基本的な形
マスタッシュ構文(Mustache構文)とは、Vue.jsにおける基本的なテキスト展開の方法のこと。
書式
HTMLファイル内で {{ プロパティ名 }}
マスタッシュ構文を使ってHello world!
実装例 – 画面に Hello world! を表示する
HTML
|
1 2 3 4 5 6 7 8 |
<html> <body> <div id="application"><!-- Vueインスタンスのelプロパティと紐付け--> {{ message }} </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> </body> </html> |
JavaScript
|
1 2 3 4 5 6 |
new Vue({ el : '#application', data : { message: 'Hello world!' } }) |
動作お試し
https://jsfiddle.net/do309huq/
実装例 – dataプロパティに複数の値を定義
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<html> <head> <title>Hello dice-record!</title> </head> <body> <div id="application"> <h3> 私の名前は {{ name }} と申します！ </h3> <p> サイト「{{ siteName }}」(URL[{{ siteUrl }}])を運営しています。 </p> </div> <h5> ※因みにelと紐付けたタグで囲った範囲で無いと、マスタッシュ構文含め、Vue.js特有の機能は使えません。 <p> {{ message }} </p> </h5> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <script src="helloWorld.js"></script> </body> </html> |
JavaScript
|
1 2 3 4 5 6 7 8 9 |
new Vue({ el : '#application', data : { message : 'Hello world!', name : 'dice', siteName : 'ダイス記', siteUrl : 'https://dice-record.com/' } }) |
動作お試し
https://jsfiddle.net/rL6o3y5e/
参照
『Vue.js入門』
Vue.js公式
以上です。
