v-onceディレクティブ

Vue.js JavaScript
v-coneディレクティブを使用する場面

・初回だけテンプレートを評価し、それ以降は静的なコンテンツとして扱いたいときに使います。

 

 

例(v-once使わない)

マスタッシュ構文で表示させているHello Vue.js!! という文字を、Click!! ボタンを押したら文字が反転するようにしています。

index.html

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

    <button v-on:click="clickHandler">
        Click!!
    </button>
</div>

 

 index.js

var app = new Vue({
    el: '#app',
    data: {
        message: "Hello Vue.js!!",
    },
    methods: {
        clickHandler: function(event) {
            this.message = this.message.split('').reverse().join('')
        }
    }
})

 

ブラウザ

Image from Gyazo

 

 

例(v-once使う) 

マスタッシュ構文で表示させている部分のpタグに、v-onceディレクティブを配置すると、描画されるときに評価され、それ以降は静的なコンテンツとして扱われます。

描画、更新のパフォーマンスをあげたいときなどに使われます。

index.html

 

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

    <button v-on:click="clickHandler">
        Click!!
    </button>
</div>

 

index.js

var app = new Vue({
    el: '#app',
    data: {
        message: "Hello Vue.js!!",
    },
    methods: {
        clickHandler: function(event) {
            this.message = this.message.split('').reverse().join('')
        }
    }
})

 

ブラウザ

Image from Gyazo