解决使用Vue.js显示数据的时,页面闪现原始代码的问题
更新时间：2018年02月11日 09:17:42 作者：kandee
下面小编就为大家分享一篇解决使用Vue.js显示数据的时,页面闪现原始代码的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
今天开始学习Vue.js的使用，但是在学习过程中发现一个问题，那就是页面加载数据时，原始代码会闪现一下。查访各方资料，终的解决方法。
第一步、加入一段css代码
<style type="text/css">
[v-cloak] {
display: none;
}
</style>
第二步、在view上引用css模块
<div id="app" v-cloak>
<h1>{{message}}</h1>
<h1>{{name}}</h1>
</div>
注意，有的文章说，在具体数据部分加入v-cloak，但是这样太麻烦，每一个数据显示都要加，所以直接加载view大模块上，就能解决问题了。
第三步、js部分没有变化
<script type="text/javascript">
var exeData = {
message : "Hello World",
name:"我是Vue"
};
new Vue({
el : "#app",
data : exeData
})
</script>
下面贴上完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js Demo</title>
<style type="text/css">
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<!--这是View -->
<div id="app" v-cloak>
<h1>{{message}}</h1>
<h1>{{name}}</h1>
</div>
</body>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
//模型数据Model
var exeData = {
message : "Hello World",
name:"我是Vue"
};
//View实例，也就是View-Model(VM)
new Vue({
el : "#app",
data : exeData
})
</script>
</html>
以上这篇解决使用Vue.js显示数据的时,页面闪现原始代码的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了在 Vue 中控制表单输入方法详解的相关资料,需要的朋友可以参考下2023-04-04
本篇文章主要介绍了Vue.js学习笔记之常用模板语法详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要介绍了vue-cli3.0 脚手架搭建项目的过程，本文分步骤给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-10-10
本篇文章主要介绍了详解Vue 全局引入bass.scss 处理方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了Vue中原生template标签失效如何解决，找了整一天也没找着这事件为什么触发不了，第二天意识到原生代码里的template可能有问题，在原生环境中template标签内部的东西是不会渲染出来的，虽然解析器在加载页面的时候确实会处理这部分代码片段2023-02-02
这篇文章主要介绍了vue中使用unity3D如何实现webGL将要呈现的效果，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，今天通过本文给大家分享VSCode开发UNI-APP 配置教程及插件推荐与注意事项，感兴趣的朋友一起看看吧2021-08-08
这篇文章主要介绍了浅谈VUE防抖与节流的最佳解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要介绍了关于新建的vue3项目一直提示代码格式警告的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
actions作为Vuex的五大核心之一，它的属性是用来处理异步方法的，通过提交mutations实现。本文将具体介绍一下actions的使用教程，需要的可以参考一下2022-01-01
最新评论