【解説】Vue.jsのv-preの使い方【マスタッシュ構文を無効化】

2024年5月18日

記事内に広告を含みます

パソ君

・Vue.jsのv-preとは？どう使う？

こんな疑問にお答えします。

「v-pre」とはディレクティブの1つ。

コンパイル処理をスキップしつつ、表示することができます。

今回は自分用のメモとして「v-pre」をまとめてみました。

ジト

参考にどうぞ

ということで、この記事では「Vue.jsのv-preの使い方」について解説していきます！

この記事でわかること

Vue.jsのv-preの使い方

「v-pre」を使うことで、コンパイル処理をスキップすることができます。

簡単な例としてはマスタッシュ構文を無効化して「{{}}」のまま表示する感じです。

そんなサンプルがこちら↓

See the Pen vue　v-pre① by jito-coder (@jito-coder) on CodePen.

<div id="app">
  <p v-pre>{{ message }}</p>
</div>

const app = Vue.createApp({
  data: () => ({
    message: 'おはようございます'
  })
}).mount('#app')

messageに格納されている「おはようございます」という文字列ではなく、{{}}がそのまま反映されていますよね。

このようにマスタッシュ構文を無効化して反映してくれます。

要はコンパイルをスキップして反映されるということですね。

この「v-pre」ディレクティブは、どんな使用用途なんだ？と思いますよね。

自分なりに調べた結果、主に下記でした。

【解説】Vue.jsのv-preの使い方【マスタッシュ構文を無効化】：まとめ

ジト

v-preを使う時はためしてみてね！