对照着jquery来学vue.js系列之解决闪烁的问题

闪烁是开发中会遇到一个很严重;
但是如果不翻个几遍文档;
甚至翻几遍文档都不一定会找到解决之法的问题;
闪烁是个什么鬼?
因为vue显示数据是这种样式的{{ page }}
如果页面还没加载完;那么会把这样的源代码展示出来;
体验非常之不友好;先来个链接感受下;
可以多点点刷新会比较明显:示例链接
解决的方法直接上代码了;
示例项目:http://git.oschina.net/shuaibai123/demo/tree/master/vue/flicker
php返回的数据:

<?php

$str='第一个会闪烁;第二、第三、第四个不会闪烁';
echo $str;

html页面:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>vue 解决闪烁的问题</title>
    <style type="text/css">
        [v-cloak]{display: none}
    </style>
</head>
<body>
<!-- vue ajax获取数据 -->
<div>
    <p>{{ posts }}</p>
    <p v-text="posts"></p>
    <p v-html="posts"></p>
    <p v-cloak>{{ posts }}</p>
</div>

<!-- ↓↓↓↓↓↓↓↓请无视引入的这堆js 主要是模拟正常项目中引入插件会延长加载时间↓↓↓↓↓↓↓↓↓↓↓ -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<!-- ↑↑↑↑↑↑↑↑↑请无视引入的这堆js 主要是模拟正常项目中引入插件会延长加载时间↑↑↑↑↑↑↑↑↑↑ -->

<!-- 引入veujs -->
<script src="./js/vue.js"></script>
<!-- 引入用于配合vuejs执行ajax操作的插件 -->
<script src="./js/vue-resource.min.js"></script>
<script>
// ajax 获取数据
var vm2=new Vue({
    el: '.vue-box',
    data: {
        posts:''
    },
    // 页面加载的时候会自动执行ready
    ready: function(){
        // 等同于jquery的$.get()
        this.$http.get('data.php').then(function(response){
                this.posts=response.data;
            })
    }
});
</script>
</body>
</html>

官方文档到:
v-text:http://vuejs.org.cn/api/#v-text
v-html:http://vuejs.org.cn/api/#v-html
v-cloak:http://vuejs.org.cn/api/#v-cloak
白俊遥博客

白俊遥博客
请先登录后发表评论
  • latest comments
  • 总共16条评论
白俊遥博客

白俊遥博客

2018-10-07 12:04:09 回复

白俊遥博客

流年 白俊遥博客

2018-03-14 13:02:31 回复

白俊遥博客

从小就很酷 :白老大 你说我们这种小项目用vue的话使用vue组件来还是直接引入呢

2017-11-21 09:30:40 回复

白俊遥博客 白俊遥博客

云淡风晴 :能理解使用组件那果断组件;暂时理解有点困难;那先直接引用;边写边学;

2017-11-27 21:58:31 回复

白俊遥博客

漫漫霜林

2017-04-01 17:03:27 回复

白俊遥博客

a'ゞ时间 白俊遥博客

2017-03-15 15:47:58 回复

白俊遥博客

a'ゞ时间 :666

2017-03-15 15:47:48 回复

白俊遥博客

步入中年的一条汪 白俊遥博客这个vue.js 用的原生js 我感觉好崩溃啊... 有没有什么好的办法..

2016-12-29 15:34:48 回复

白俊遥博客 白俊遥博客

云淡风晴 :学好原生js;走遍天下都不怕;

2017-01-02 14:06:34 回复

白俊遥博客

步入中年的一条汪 :白大 遇到个棘手的问题 白俊遥博客 v-bind绑定style 改变背景图 background:url() 怎么写才能解析成功

2016-12-27 18:00:17 回复

白俊遥博客

逍遥冰冷 :666

2016-12-27 12:40:03 回复

白俊遥博客

D :刚刚

2016-12-21 17:49:48 回复

白俊遥博客

学会 :   jQuery(window).load(function() {  alert(88888888); });

2016-10-29 10:35:25 回复

白俊遥博客

学会 白俊遥博客好像没效果.....

2016-10-29 10:36:07 回复

白俊遥博客

Pmd :解决了 - -,自己忘记写v-text  谢了

2016-10-17 11:00:25 回复

白俊遥博客

Pmd :白大大,vue.js的if else 页面在加载的时候会先出现else的那个文本,然后消失在显示前面true的结果,也有闪烁。请问你有处理过吗

2016-10-17 10:33:27 回复