Vue.js 3の学習メモ②

投稿者:rajanoonカテゴリー:JavaScriptタグ:

v-preの使い方

要素とすべての子要素のコンパイルをスキップするときに使用する。

どんな時

ディレクティブが使われていない。マスタッシュとかをそのまま画面に表示したいとき。

メリット

スキップした分、コンパイルスピードが上がる。

実装してみた

  • index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p v-pre>{{ message }}</p>
        <p>{{ message }}</p>
    </div>
    <script src="https://unpkg.com/vue@3.1.5"></script>
    <script src="js/main.js"></script>
</body>
</html>
  • js/main.js
const app = Vue.createApp({
    data: function() {
        return {
            message: 'Hello World!'
        }
    }
})
app.mount('#app')

ブラウザで開いてみる。

最初の<p>タグには、v-preが入っているので、{{ message }}がそのまま表示された。

使いどころはかなり限られそうかなと思った。

投稿者: rajanoon

1993年生まれ。新卒からSEとして働いていましたが、今はサーバーサイドエンジニアとして働いています。一生使える技術を身に着けようと悪戦苦闘中です。

コメントを残す