基礎からメモ： Vue.js CH2-p56 Mustache記法の注意点

Vue.js

Mustache記法を使う際の注意点をいくつか。

記法内で計算ができる。

{{ 10 + 10 }}

ただし式は書けるが文は書けない。

{{ let foo = 10 }}

これはエラーになる。

vue.js:597 [Vue warn]: Error compiling template:

- avoid using JavaScript keyword as property name: "let"
  Raw expression:    {{ let foo = 10 }}

長めの式はテンプレートが冗長になる。算出プロパティを活用すべき。

{{ message.value.length >= 10 ? 'long!' : 'short!' }}

フィルタを使うことで簡潔に書けることもある。

{{ Math.round(3.14) }}

Mustache記法は主にテキストコンテンツのための記法。HTML属性には使えない。

<input type="text" value="{{ message.value }}">

エラーになる。

[Vue warn]: Error compiling template:

- value="{{ message.value }}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.

警告に書いてあるように、この場合はv-bindを使う。省略記法は「:」

      <p><input type="text" v-bind:value="message.value"></p>

      <!-- v-bind の省略記法-->
      <p><input type="text" :value="message.value"></p>

      <!-- v-bindの値の中でも簡単な計算式が使える。ただしやはり属性値なのでクオートで囲むのは必須 -->
      <p><input type="text" v-bind:value="2 + 5"></p>
  • Mustache記法には式は書ける。文は書けない。
  • Mustache記法はHTML属性には使えない。属性にはv-bindを使う。