import Vue from 'vue'; import App from './App'; /* eslint-disable no-new */ new Vue({ el: '#app', template: '<App/>', components: { App } });
这是vue2.0的最新写法,我们看到的是vue项目的主入口main.js,template是将会替换el的挂载元素的模板
区别一定是:el对应的 一定是一个css选择器,如果还是html 或者body元素,如下图:
import Vue from 'vue'; import App from './App'; /* eslint-disable no-new */ new Vue({ el: 'body', components: { App } });
浏览器将会报错:
[Vue warn]: Do not mount Vue to <html> or <body> - mount to normal elements instead. warn @ vue.common.js?e881:509 vue.common.js?e881:5929 Download the Vue Devtools for a better development experience: https://github.com/vuejs/vue-devtools
,google translate:
不要将Vue挂载到<html>或<body> - mount到普通元素。
官方文档是这么解释的:
提供的元素只能作为挂载点。不同于 Vue 1.x,所有的挂载元素会被 Vue 生成的 DOM 替换。因此不推荐挂载root实例到 <html>
或者 <body>
上。