v-cloak -- 遮盖 · vue3.x -- 系列学习

>[success] # v-cloak 1. 这个指令使用在元素上直到关联实例结束编译 2. 因为指令生命周期的特殊性，常备用来解决大胡子语法闪烁问题 3. 这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕，和 CSS 规则如 \[v-cloak\] { display: none } 一起用时 ~~~ <html lang="en"> <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> <style> [v-cloak] { display: none; } </style> </head> <body> <div id="app"> <h2 v-cloak>{{message}}</h2> </div> <script src="https://unpkg.com/vue@next"></script> <script> setTimeout(() => { // 1.创建app const app = Vue.createApp({ // data: option api data: function () { return { message: 'Hello Vue', } }, }) // 2.挂载app app.mount('#app') }, 3000) </script> </body> </html> ~~~