Vue.js基本の雑記あれこれ

用語

{{ 変数名 }}

マシュタッシュ構文の中は、javascript の式を書いても良い。文は駄目。変数 = 式 のように = の右辺に書くことができるのが式。

書ける式の例：

書けないものの例：

HTML側に $data を書いておく。

<div id="app">
  ...
  <pre>{{ $data }}</pre>
</div>

formのsubmitイベントによりページが自動的にリロードされてしまう問題。submit タグを書いていなくても発生する。

submit を阻止(prevent)しよう。

<form v-on:submit.prevent>

一度だけ表示を反映する。それ以降は変更しない。データバインディングが行われない。たとえ変更するメソッドがあっても二度目からは効かない。

マシュタッシュタグ {{ }} でhtmlな文字列を書いてもエスケープされてhtmlが効かない。html（やjs）をそのまま評価してもらいたい場合に v-html ディレクティブを用いる。

デバッグ時 console.log() の出力をコンソールではなくページに直接表示したい場合にも使える。

覆い隠す。ページ表示開始で一瞬だけ変数名が表示されてしまうのを防ぐ。コンパイル前の表示を防ぐ。コンパイル後にページ表示するようにする。

<div v-cloak>{{ 変数名 }}</div>

cssとの協調が必要。

[v-cloak] {
  display: none;
}

使わなくても良い。これは使わずマシュタッシュ構文 {{ 変数名 }} で文字列作成に統一するのがおすすめ。

.vue プログラム内で、変数の展開を含め文字列全体を完成させることが主眼で、だからこそマシュタッシュ構文を使いたくないなら v-text を使えばいいかな。

省略前：<a v-bind:href="変数名">タイトル</a>

省略後：<a :href="変数名">タイトル</a>

省略前：<button v-on:click="メソッド名">ボタン</button>

省略後：<button @click="メソッド名">ボタン</button>