vue指令：v-cloak渲染指令(v-cloak 指令是解决屏幕闪动的好方法)
生活随笔
收集整理的這篇文章主要介紹了
vue指令：v-cloak渲染指令(v-cloak 指令是解决屏幕闪动的好方法)
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
可以使用 v-cloak 指令設(shè)置樣式，這些樣式會在 Vue 實例編譯結(jié)束時，從綁定的 HTML 元素上被移除。
當(dāng)網(wǎng)絡(luò)較慢，網(wǎng)頁還在加載 Vue.js ，而導(dǎo)致 Vue 來不及渲染，這時頁面就會顯示出 Vue 源代碼。我們可以使用 v-cloak指令來解決這一問題。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>[v-clock]{display: none;}</style> </head> <body><div id="app" v-clock>{{a}}</div><script src = "js/vue.js"></script><script>var vue = new Vue({el: "#app",data: {a:'我是渲染的指令-v-cloak'}})</script> </body> </html>在簡單項目中，使用 v-cloak 指令是解決屏幕閃動的好方法。但在大型、工程化的項目中（webpack、vue-router）只有一個空的div 元素，元素中的內(nèi)容是通過路由掛載來實現(xiàn)的，這時我們就不需要用到 v-cloak 指令咯。
總結(jié)
以上是生活随笔為你收集整理的vue指令：v-cloak渲染指令(v-cloak 指令是解决屏幕闪动的好方法)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： vue指令：v-once 元素和组件只渲
- 下一篇： vue.directive自定义指令 v