Vue3 v-pre Directive
Vue3 Built-in Directivesv-preThe directive is used to skip compilation, and does not perform Vue template parsing on the element or its child elements.
Basic Explanation
v-preThe directive is used to tell Vue to skip compilation of this element and all its child elements. Elements with v-pre are rendered as raw HTML without Vue template syntax processing.
- Expected Type: None (accepts no expression)
- Purpose: Skip compilation, do not perform Vue template parsing on the element or its child elements.
Usage Scenarios
1. Display raw Mustache tags
v-pre is most commonly used to display raw {{ }} syntax:
Example
<template>
<div>
<p>Normal rendering: {{ message }}</p>
<p v-pre>Not compiled display: {{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return { message: 'Hello Vue' }
}
}
</script>
<div>
<p>Normal rendering: {{ message }}</p>
<p v-pre>Not compiled display: {{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return { message: 'Hello Vue' }
}
}
</script>
Output result:
正常渲染: Hello Vue
不编译显示: {{ message }}
Other Extensions