vue2.0入手踩的第一个坑-vue实例
2017-11-07 本文已影响26人
麦壳儿UIandFE2
1：浏览器报错
Do not mount Vue to <html> or <body> - mount to normal elements instead
浏览器.png
2：源码
错误的：
<body id="myapp">
<div >
{{msg}}
</div>
</body>
修正后：
<body>
<div id="myapp">
{{msg}}
</div>
</body>
完整代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="./assets/js/vue.js"></script>
</head>
<body>
<div id="myapp">
{{msg}}
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: '#myapp',
data: {
msg: "haha 你好！",
}
});
</script>
</html>
3：原因：
官方文档是这么解释的:
提供的元素只能作为挂载点。不同于 Vue 1.x，所有的挂载元素会被 Vue 生成的 DOM 替换。因此不推荐挂载root实例到 <html> 或者 <body> 上。
4：小结
这里和angular就不同了，从ng直接入手过来容易入坑。
