vue.js的v-cloak不起作用
本文介绍了vue.js的v-cloak不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
1.问题
初学vue.js，按照这篇博客中的例子做，它使用cdn加载vue.js，我用webpack。
页面加载时需要v-cloak来避免显示未编译好的内容，因此我添加了v-cloak到标签中，也添加了对应的css到style.css文件中，也把css文require到webpack配置的入口文件中了。但是页面打开的瞬间，还是会有未编译的{{msg}}这种内容出现。
是我的代码有问题吗？还是我的环境有问题？我开了chrome的开发者模式
2.代码
//app.js
Vue = require('vue')
new Vue({
el: '#app',
data:{
book: {
id: 0,
author: '',
name: '',
price: ''
},
books: [{
id:1,
author: '曹雪芹',
name: '红楼梦',
price: 32.0
},{
id:2,
author: '施耐庵',
name: '水浒传',
price: 30.0
},{
id: 3,
author: '罗贯中',
name: '三国演义',
price: 24.0
},{
id: 4,
author: '吴承恩',
name: '西游记',
price: 20.0
}]
}
})
//entry.js
require('./app.js');
require('./style.css');index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<table>
<tr v-for="book in books" v-cloak>
<td>{{book.id}}</td>
<td>{{book.name}}</td>
<td>{{book.author}}</td>
<td>{{book.price}}</td>
</tr>
</table>
</div>
<script src="bundle.js"></script>
</body>
</html>
//package.json
{
"name": "ace.me",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"css-loader": "^0.23.1",
"style-loader": "^0.13.1",
"vue": "^1.0.26"
},
"devDependencies": {
"css-loader": "^0.23.1",
"style-loader": "^0.13.1",
"vue": "^1.0.26"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}style.css
[v-cloak]{
display: none;
}
//webpack.config.js
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" }
]
}
};3.补充
我是开了webpack的watch的（本地另外开了xampp所以没有用webpack-dev-server），因此我打包后的js文件bundle.js应该是没有问题的：
而且我还尝试了在style.css中把body背景颜色换成黄色，页面上是可以起作用的，所以css文件应该是有被加载的。
解决方案
style.css要放在坠前面
http://www.cnblogs.com/whitew...
https://github.com/webpack/st...
这篇关于vue.js的v-cloak不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
