今天开始学习 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 显示数据的时, 页面闪现原始代码的问题就是小编分享给大家的全部内容了, 希望能给大家一个参考, 也希望大家多多支持脚本之家
来源: http://www.jb51.net/article/134937.htm