解决Vue闪烁问题[vue语法直接在页面上展示]

Posted 2020-12-14 langkyesir

一、基本概念

1. 插值表达式

??Vue将数据渲染到DOM的表达式，也叫模板语法或“Mustache”语法 (双大括号) ，又叫小胡子语法，实现通过简单的方式给页面插入数据。即：

<span>Message: {{ msg }}</span>

二、现象

Vue的表达式原样显示在浏览器页面上，等待很短的时间后，页面才会展示我们所预想的页面效果。

三、原因

Vue加载太慢，没人处理插值表达式，直接原样显示在页面上，等Vue加载完了，才会处理，这时数据才会展示出来，会有闪烁的效果出现

四、解决方法

4.1原理

在Vue编译完成之前，v-cloak会一直做为元素的属性。当Vue编译加载完后，Vue会将v-cloak属性删除，从而达到当编译加载完之前隐藏、编译加载完后显示的效果，解决闪烁问题

4.2方法

1. 给元素添加v-cloak指令

2. 在style标签中添加一个 v-cloak的属性选择器样式 display:none

<style>
  [v-cloak]{
    display: none;
  }
</style>

<div v-cloak>{{name}}</div>