Vue.js

【Vue.js】マスタッシュ構文【Hello world!】

JavaScriptフレームワークである「Vue.js」のマスタッシュ構文について説明します。

マスタッシュ構文(Mustache構文)とは?

テキスト展開の基本的な形

マスタッシュ構文(Mustache構文)とは、Vue.jsにおける基本的なテキスト展開の方法のこと。

書式

HTMLファイル内で {{ プロパティ名 }}

マスタッシュ構文とは口髭のこと。確かに { が口髭に見える。

マスタッシュ構文を使ってHello world!

実装例 – 画面に Hello world! を表示する

HTML

JavaScript

動作お試し

https://jsfiddle.net/do309huq/

JSFiddle上で、JavaScript内の dataプロパティのmessageの値をしたり、message以外のkeyとvalueを増やしてHTML上でマスタッシュ構文を書いて実行してみるのも理解が深まるのでお勧めする。message: ‘Hello world!’ の後に追加する際は、’Hello world!’の直後に , (カンマ)を入れる必要有り

実装例 – dataプロパティに複数の値を定義

HTML

JavaScript

動作お試し

https://jsfiddle.net/rL6o3y5e/

ファイル名はデフォルトで「helloWorld.js」にしている。ファイルで動作を確認する際、これ以外のファイル名にする場合、HTMLファイル側10行目の読み込み先JSファイル名を変更すること。

参照

『Vue.js入門』

Vue.js公式

テンプレート構文 — Vue.js

以上です。

ABOUT ME
ダイス
アラサーSE(20代)。 主な経験は、PGとしてJava(SpringBoot)、C、PHP(Laravel)、VBAがある。SS、UTの経験有り。最近はUI工程を経験中。 IT業界だけでなく、教育業界(予備校での運営スタッフ)での経験有り。 サイトでは、特定の分野に限定せずに幅広く発信していきます。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です