Vue.jsでは、データバインディング内部でJavaScript式を利用することができます。 使えるのは単一の式のみです。 以下のように、式でないものや、単一でないものは使えません。 {{ var x = 1 }} {{ if(ok) return message }} 例 index.html <div id="app"> <p> {{message}} </p> <p> </p></div>…

v-textディレクティブを使う場面 ・マスタッシュタグを使用せずに、ディレクティブを使用したいときにv-textディレクティブを使用します。 例(上のpタグはマスタッシュタグ、下がv-textで表示) index.html <div id="app"> <p> {{message}} </p> <p v-text="message"> </p> </div> index.js var app = new Vue({ e…

v-cloakディレクティブを使用する場面 ・ページを表示開始してから、Vueインスタンスの作成が終わるまでの間に、マスタッシュタグなどのコンパイル前のテンプレートが表示されてしまうのを防ぎたいときに使用します。 例(v-cloakを使用したチラつき防止) イ…

v-htmlディレクティブを使用する場面 ・プレーンなHTMLを挿入したいとき使用します。 →指定した要素のinnerHTMLを更新できます。 例(v-html使わない・v-html使用の比較) 上のpタグはv-htmlディレクティブを使用せず普通にマスタッシュ構文でdata属性のmessag…

v-preディレクティブを使用する場面 ・要素と全ての子要素のコンパイルをスキップしたいときに使用します。 →生のマスタッシュ構文を表示させたいとき。 →XSS対策 →ディレクティブの無い大量のノードをスキップすることで、コンパイルのスピードをあげたいと…

v-coneディレクティブを使用する場面 ・初回だけテンプレートを評価し、それ以降は静的なコンテンツとして扱いたいときに使います。 例(v-once使わない) マスタッシュ構文で表示させているHello Vue.js!! という文字を、Click!! ボタンを押したら文字が反転…