控制台报的错误是这样的：
[Vue warn]: Do not mount Vue to <html> or <body> - mount to normal elements instead.
我用的 v2.5.17 的版本， 不支持
new Vue({
el:'body',
data:{
msg:'welcome vue'
}
});
<body>
<input type="text" v-model="msg">
<br>
{{msg}}
</body>
报错如下：
版本不支持了哦.png
但是， v1.0.21版本还是支持的。其他的版本， 就不太清楚了呀！
我试过在body 上面加id属性， 但还是报同样的错。
<body id = "app">
<input type="text" v-model="msg">
<br>
{{msg}}
</body>
官方文档是这么解释的:
提供的元素只能作为挂载点。不同于 Vue 1.x，所有的挂载元素会被 Vue 生成的 DOM 替换。因此不推荐挂载root实例到 <html> 或者 <body> 上。
也就是，vue 的挂载容器不能是html 和 body。
解决办法， 用div 将代码包起来
<script>
window.onload=function(){
new Vue({
el:'#app',
data:{
msg:'welcome vue'
}
});
};
</script>
<body>
<div id = "app">
<input type="text" v-model="msg">
<input type="text" v-model="msg">
<br>
{{msg}}
</div>
</body>
OK，完美解决。
2018年5月25日
网友评论