对照着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


白俊遥博客



白俊遥博客
请先登陆后发表评论
  • 最新评论
  • 总共3条评论
白俊遥博客

学会:<script type="text/javascript">   jQuery(window).load(function() {  alert(88888888); });</script>

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 回复