Only Once - At the first Time

By default, if you use other directive, the data is always updated instantly if you change the value of Vue property. This is the Vue's nature. But what if you want to take the value from the Vue property and render it but you do not want it to be updated over time if the value of Vue property is changed? And to solve this issue Vue provides us a nice directive which allows us to do exactly that. Althogh you will come accross a very rare situation where it might be useful to use v-once directive, but sometimes it's very useful.

			<span v-once>This will never change: {{ name }}</span>
			data:{
				name : "John Doe"
			}
		

This will output as This will never change: John Doe. But if you change the value of the name to "Santanu Bera", It's won't be updated.

Notice how it is used, It doesn't accept any value, like a boolean attribute in HTML Tag, you use it without any value. Also notice where it is used. It is used with HTML tags, so any Vue property, no matter how many, that resides that HTML tag will be treated as static and Vue will skip it if you change the value of Vue property.

			<div v-once>
				{{ myName }}
				<span>{{ yourName }}</span>
			</div>