5月9日——vue渲染过程的{{xxx}}显示

Posted 2020-11-05 最初的样子

异常显示的原因：

　　　　这是由于浏览器的渲染机制导致的，浏览器是从头到尾  如果你的js引用在底部，那么浏览器会先加载dom此时，你用于渲染的{{}}识别符，因为还没读到该识别符对应的js文件，所以会被解析为字符串而显示在页面中

解决方案：

　　　　可以用过自定义属性v-cloak解决，　　　　

　　　　第一步：在css中给定义属性选择器          [v-cloak]{  display:none }

　　　　第二步：在对应标签中加入 v-cloak:         例如：<div id="wrap"  v-cloak></div>

　　　　此方案的运行机制： vue实例创建完成后会把v-cloak去掉，在没创建实例对象时，该标签内的内容都会被隐藏