v-clock解决页面闪烁问题和v-pre的理解

一: v-clock

使用v-if和v-show显示隐藏,频繁刷新页面，会出现元素闪烁问题使用，最外层div加v-clock

body里面加

<div id="#app" v-cloak>
    <p>{{author}}</p>
</div>
1
2
3

style里面加

[v-cloak] {
    display: none;
}
1
2
3

二: v-pre的理解

v-pre可以用来阻止预编译，有v-pre指令的标签内部的内容不会被编译，会原样输出。

如果已知页面内部有大段内容无需编译，使用v-pre指令阻止编译可以提高性能，同时可以防止页面内有可能导致Vue编译出错的代码存在。

js

let vm = new Vue({
  el: '#app', // 根元素或挂载点。
  data: {}
})
1
2
3
4

html

<div id="app">
  <!-- 若不加v-pre指令，直接编译会报错，因为data中没有a和b属性 -->
  <div v-pre>
    {{a}} + {{b}}
  </div>
</div>
1
2
3
4
5
6