vue2.0(新手)第一个坑--do not mount Vue to <body>!!!

这是vue2.0的最新写法,我们看到的是vue项目的主入口main.js,template是将会替换el的挂载元素的模板区别一定是:el对应的一定是一个css选择器,如果还是html 或者body元素,如下图:浏览器将会报错:,google translate:官方文档是这么解释的:提供的元素只能作为挂载点。不同于 Vue 1.x，所有

也不是什么极客

18909人浏览 · 2016-12-12 22:07:42

也不是什么极客 · 2016-12-12 22:07:42 发布

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> 上。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^