v-cloak
Description: v-cloak does not require expression, html element at the end of compilation Vue instance from bound removed, usually of css display: none; with use. When Suman, occur when it is not loaded Vue word "{{xxx}}" until you've created vue instance, DOM will be replaced, so the screen will flicker, also you need to add in the css code: [v-cloak]: {! display: none important;} can be used in combination, but use in webpack vue-router and engineering projects, only a structure of the project VUE empty div, the remaining contents are route to the mount is completed, it is not required to use, v-cloak applies only to simple projects
<!DOCTYPE html> <html> <head> <title>Vue --- 内置指令</title> <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.min.js"></script> <style type="text/css"> [v-cloak]:{ display: none!important; } </style> </head> <body> <div id="app" v-cloak> {{message}} </div> <script type="text/javascript"> var app = new Vue({ el:'#app', data:{ message:'这是一段话' } }) </script> </body> </html>
v-once
Description: instruction does not require expression, define its role is only rendered once elements or components, including all child nodes of the element or component. After the first rendering, with no re-rendering the data changes, it will be treated as static content, change the message will not change because of changes in the page data occurs.
<!DOCTYPE html> <html> <head> <title>Vue --- 内置指令</title> <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.min.js"></script> </head> <body> <div id="app" > <span v-once>{{message}}</span> <div v-once> <span>{{message}}</span> </div> </div> <script type="text/javascript"> var app = new Vue({ el:'#app', data:{ message:'这是一段话' } }) </script> </body> </html>