解決使用Vue.js顯示數(shù)據(jù)的時,頁面閃現(xiàn)原始代碼的問題
更新時間：2018年02月11日 09:17:42 作者：kandee
下面小編就為大家分享一篇解決使用Vue.js顯示數(shù)據(jù)的時,頁面閃現(xiàn)原始代碼的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
今天開始學(xué)習(xí)Vue.js的使用，但是在學(xué)習(xí)過程中發(fā)現(xiàn)一個問題，那就是頁面加載數(shù)據(jù)時，原始代碼會閃現(xiàn)一下。查訪各方資料，終的解決方法。
第一步、加入一段css代碼
<style type="text/css">
[v-cloak] {
display: none;
}
</style>
第二步、在view上引用css模塊
<div id="app" v-cloak>
<h1>{{message}}</h1>
<h1>{{name}}</h1>
</div>
注意，有的文章說，在具體數(shù)據(jù)部分加入v-cloak，但是這樣太麻煩，每一個數(shù)據(jù)顯示都要加，所以直接加載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">
//模型數(shù)據(jù)Model
var exeData = {
message : "Hello World",
name:"我是Vue"
};
//View實例，也就是View-Model(VM)
new Vue({
el : "#app",
data : exeData
})
</script>
</html>
以上這篇解決使用Vue.js顯示數(shù)據(jù)的時,頁面閃現(xiàn)原始代碼的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了在?Vue?中控制表單輸入方法詳解的相關(guān)資料,需要的朋友可以參考下2023-04-04
本篇文章主要介紹了Vue.js學(xué)習(xí)筆記之常用模板語法詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了vue-cli3.0 腳手架搭建項目的過程，本文分步驟給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2018-10-10
本篇文章主要介紹了詳解Vue 全局引入bass.scss 處理方案，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了Vue中原生template標簽失效如何解決，找了整一天也沒找著這事件為什么觸發(fā)不了，第二天意識到原生代碼里的template可能有問題，在原生環(huán)境中template標簽內(nèi)部的東西是不會渲染出來的，雖然解析器在加載頁面的時候確實會處理這部分代碼片段2023-02-02
vue中使用unity3D如何實現(xiàn)webGL將要呈現(xiàn)的效果
這篇文章主要介紹了vue中使用unity3D如何實現(xiàn)webGL將要呈現(xiàn)的效果，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
uni-app 是一個使用 Vue.js 開發(fā)所有前端應(yīng)用的框架，今天通過本文給大家分享VSCode開發(fā)UNI-APP 配置教程及插件推薦與注意事項，感興趣的朋友一起看看吧2021-08-08
淺談VUE防抖與節(jié)流的最佳解決方案(函數(shù)式組件)
這篇文章主要介紹了淺談VUE防抖與節(jié)流的最佳解決方案，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
關(guān)于新建的vue3項目一直提示代碼格式警告的問題
這篇文章主要介紹了關(guān)于新建的vue3項目一直提示代碼格式警告的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
actions作為Vuex的五大核心之一，它的屬性是用來處理異步方法的，通過提交mutations實現(xiàn)。本文將具體介紹一下actions的使用教程，需要的可以參考一下2022-01-01