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

白俊遥
2016-09-23 22:51:16
前端
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
白俊遥博客