mustache記法って何?

スポンサーリンク
この記事は約3分で読めます。

mustacheは口ひげらしい

vue.jsを調べていたら前に聞いたことがあるので、見てみると。

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

HTML内で{{ プロパティ名 }}で記述する。
だそうです。

<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>

出典 https://dice-record.com/vuejs-mustache-hello-world/#Mustache

mustacheの詳しい説明

https://mustache.github.io/mustache.5.htmlにくわしく書いてあるらしい。

一部抜粋してgoogle先生に日本語に翻訳してもらうと。

記述
Moustacheは、HTML、構成ファイル、ソースコードなど、あらゆるものに使用できます。ハッシュまたはオブジェクトで提供される値を使用して、テンプレート内のタグを展開することにより機能します。

if文、else節、またはforループがないため、これを「ロジックレス」と呼びます。代わりにタグのみがあります。一部のタグは値で置き換えられ、他のタグは値なしで置き換えられ、他のタグは一連の値で置き換えられます。このドキュメントでは、さまざまな種類のMustacheタグについて説明します。

タグの種類
タグは二重の口ひげで示されます。{{person}}はそのままのタグです{{#person}}。両方の例でperson、キーまたはタグキーと呼びます。さまざまなタイプのタグについて話しましょう。

変数
最も基本的なタグタイプは変数です。{{name}}基本テンプレート内のタグが見つけようとしますname現在のコンテキスト内のキーを。nameキーがない場合、親コンテキストは再帰的にチェックされます。トップコンテキストに到達してもnameキーが見つからない場合、何もレンダリングされません。

すべての変数はデフォルトでHTMLエスケープされています。エスケープされていないHTMLを返したい場合は、トリプルヒゲを使用します{{{name}}}。

&変数をエスケープ解除するためにも使用できます{{& name}}。これは、区切り文字を変更するときに役立ちます(以下の「区切り文字の設定」を参照)。

デフォルトでは、変数「miss」は空の文字列を返します。これは通常、Mustacheライブラリで構成できます。たとえば、RubyバージョンのMustacheは、このような状況での例外の発生をサポートしています。

Template:

* {{name}}
* {{age}}
* {{company}}
* {{{company}}}
Hash:

{
“name”: “Chris”,
“company”: “GitHub
}
Output:

* Chris
*
* <b>GitHub</b>
* GitHub

ですって。
何のことだろう。

error: Content is protected !!