VUE课程---7、解决插值表达式闪烁问题
一、总结
一句话总结：
vue中解决插值表达式闪烁问题，可以用v-cloak指令，v-cloak在css中用属性选择器设置为display: none;
<style> /*属性选择器*/ [v-cloak]{ display: none; } </style> <div id="app"> <p v-cloak>{{msg}}</p> </div>
1、vue中v-cloak解决插值表达式闪烁问题 原理？
*、在vue没有被成功加载解析之前，视图对应的标签上带了v-cloak属性（指令），用属性选择器设置样式为display: none;，所以元素被隐藏
*、在vue被成功加载解析后，vue会移除视图对应标签上面的v-cloak，所以元素被显示出来了
二、解决插值表达式闪烁问题
博客对应课程的视频位置：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>解决插值表达式闪烁问题</title> 6 <style> 7 [v-cloak]{ 8 display: none; 9 } 10 </style> 11 </head> 12 <body> 13 <!-- 14 插值表达式闪烁 的原因 15 在vue.js没有被成功加载之前，new的vue对象肯定是new不出来的， 16 那么vue对象控制的区域肯定也是控制不了的， 17 那么视图的这块区域就会用标签默认的解析方式， 18 那么插值表达式肯定就被显示出来了 19 20 解决插值表达式闪烁问题的思路 21 1、在vue.js没有被成功加载之前，我们把视图隐藏，这样用户就看不到视图， 22 自然也看不到插值表达式，自然也不会有插值表达式闪烁的问题， 23 2、而在vue.js被加载成功之后，我们再把视图显示，这样用户就可以看到正常的内容了 24 25 --> 26 <div v-cloak id="app"> 27 {{msg}} 28 </div> 29 <script src="../js/vue.js"></script> 30 <script> 31 new Vue({ 32 el:'#app', //element 33 data:{ 34 msg:'欢迎来到vue的世界' 35 } 36 }); 37 </script> 38 </body> 39 </html>