[Vue warn]: Do not mount Vue to <html> or <body> - mount to normal elements instead.

最新推荐文章于 2023-01-04 15:55:46 发布
最新推荐文章于 2023-01-04 15:55:46 发布
阅读量310 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/xiangxinhouse/p/8447488.html
版权

官方文档是这么解释的:

提供的元素只能作为挂载点。不同于 Vue 1.x，所有的挂载元素会被 Vue 生成的 DOM 替换。因此不推荐挂载root实例到 <html> 或者 <body> 上。

这是vue2.0的最新写法,我们看到的是vue项目的主入口main.js,template是将会替换el的挂载元素的模板

区别一定是:el对应的 一定是一个css选择器,如果还是html 或者body元素,浏览器将会报错:

[Vue warn]: Do not mount Vue to <html> or <body> - mount to normal elements instead.

转载于:https://www.cnblogs.com/xiangxinhouse/p/8447488.html

weixin_33824363
关注
Vue-使用中报错处理ERROR
JackieDYH的博客
06-29 1737
Vue常见错误解析 vue.js:634 [Vue warn]: Do not mount Vue to <html> or <body> - mount to normal elements instead. vue实例只能挂在到普通的元素标签上，不能是html、body标签，而且推荐使用id选择器来获取标签 [Vue warn]: Property or method "XXX" is not defined on the instance but referenced
Vue源码分析——第三章
Lee的博客
09-10 615
Vue源码分析——第一章 Vue源码分析——第二章 // only used in dev mode //检测 val必需是数字 function checkDuration(val, name, vnode) { if (typeof val !== 'number') { warn( "<transition> explicit " + name + " duration is not a valid number - " + "got " + ...
Vue2+Webpack错误：Do not mount Vue to <html> or <body> - mount tonormal elements instead.
jCuckoo的专栏
02-22 4307
vue1.x 允许开发者以 或 作为根实体的挂载点，但到了VueJS2.0 后，只能通过 独立的节点挂载 ，如:div 等。 否则会产生错误，警告讯息如下："Do not mount Vue to or - mount tonormal elements instead." 换成用独立的 DOM 节点，如 ，就可以正常运作了。
[Vue warn]: Do not mount Vue to 「html」 or 「body」 - mount to normal elements instead.
朝花夕拾的博客
07-01 1394
不要将Vue挂载到<html>或<body> - mount到普通元素 如下图就会报这个错误 改成这样即可
Do not mount Vue to <html> or <body> - mount to normal elements instead.
热爱思考、活力满满、开朗爱笑的年轻人
11-02 1806
在使用 vue-cli 构建项目时（使用的模版是webpack） 初始化的 main.js 中是这样的。/* eslint-disable no-new */ new Vue({ el: '#app', router, template: '<App/>', components: { App } });然后将挂载点改为： el: 'body' ，然后浏览器就会报这个警告：[Vue
控制台报 Do not mount Vue to html or body mount to normal elements instead
blueberry_liang的博客
07-18 456
提供的元素只能作为挂载点。不同于 Vue 1.x，所有的挂载元素会被 Vue 生成的 DOM 替换。因此不推荐挂载 root 实例到 或者 上。=&amp;amp;amp;amp;amp;gt; 用普通元素作为挂载点，例如div...
Do not mount Vue to <html> or <body> - mount tonormal elements instead.
u013746071的专栏
09-20 1446
1.vue1.x 允许开发者以 <body> 或 <html> 作为根实体的挂载点，但到了VueJS2.0 后，只能通过 独立的节点挂载 ，如:div 等。否则会产生错误，警告讯息如下："Do not mount Vue to <html> or <body> - mount tonormal elements instead." 换成用独立的 DOM 节点，如 `<divid="app"></di
Vue 各个资源包之间的区别（vue.common.dev.js、vue.runtime.esm.js 等等）
vv_bug
11-09 6770
问题描述 今天有童鞋在用 vue 项目写代码的时候，问我为啥会出现以下报错？ [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build. (found in <Root>
Vue源码解析-$mount
踩坑之路
02-16 829
前言 Vue实例是通过mount方法进行挂载的，上一篇说了new Vue这篇分析一下mount挂载方法。mount的定义在Vue源码中有多处，这是因为Vue需要适配不同的平台以及构建方式，本文这里主要分析一下带compiler的mount实现方式。 找入口 因为是需要适配不同平台，mount方法定义在src/platform/web/entry-runtime-with-compiler.js下，代码如下： const mount = Vue.prototype.$mount Vue.prototype.$
Vue源码：vue实例挂载篇
老司机的后备箱
06-28 2317
在new一个Vue对象的时候，内部究竟发生了什么？Vue的构造类只做了一件事情，就是调用_init函数进行初始化。 2._init，初始化 _init主要做了这两件事： initData 首先判断data是不是函数，如果是函数的话执行getData。getData做的事情很简单：，因为vue推荐我们把data定义为一个函数然后返回具体的data对象，因此getData只需执行一次data拿到返回值即可。 判断是否与props属性名冲突，然后将data挂载到vue实例中。这里是通过proxy对vue实例的g
vue2.0(新手)第一个坑--do not mount Vue to <body>!!!
aaa333qwe的博客
08-27 470
转载自：http://blog.csdn.net/wmwmdtt/article/details/53589662 [javascript] view plain copy import Vue from 'vue';   import App from './App';      /* eslint-disable no-new 
怎么把组件挂载到body上_vue挂载到body上报错了， 解决办法在这里哦
weixin_39882394的博客
12-20 2154
控制台报的错误是这样的：[Vue warn]: Do not mount Vue to or - mount to normal elements instead.我用的 v2.5.17 的版本， 不支持new Vue({el:'body',data:{msg:'welcome vue'}});{{msg}}报错如下：版本不支持了哦.png但是， v1.0.21版本还是支持的。其他的版本， 就...
腾讯前端一面常考vue面试题汇总
bb_xiaxia1998的博客
01-04 3372
1. 分析首先找到的构造函数源码位置：src\core\instance\index.js 是用户传递过来的配置项，如等常用的方法构建函数调用方法，但我们发现本文件中并没有此方法，但仔细可以看到文件下方定定义了很多初始化方法 首先可以看方法，发现该方法在原型上定义了方法源码位置：src\core\instance\init.js 仔细阅读上面的代码，我们得到以下结论：方法是完成的初始化源码位置：src\core\instance\state.js 我们和这里主要看初始化的方法为，它与在同一文件上 仔细阅读上
深入浅出学Vue开发：第四章、Vue的生命周期及源码实现
LGD_Sunday的专栏
08-03 2800
通过上面两章的学习，我们已经学会了Vue的所有基础语法，包括： 1、{{Mustache}} 语法 2、v-if、v-else、v-else-if、v-show 3、v-for 4、v-bind 5、v-model 6、v-on 如果大家已经对这些语法牢记于心了，那么请继续往下看，如果大家对这些语法掌握的并不是很熟练的话，那么希望大家再去回顾一下前面的...
Vue2+Webpack报错：Failed to mount component: template or render function not defined.
热门推荐
jCuckoo的专栏
02-22 2万+
需要在webpack.config.js文件中添加以下配置： resolve: { /** * Vue v2.x之后NPM Package默认设置只会生成runtime-only 版本，若要使用standalone功能則需如下设置 * 否则会报错：Failed to mount component: template or render fun
Vue源码解析(一)，Vue中DOM的挂载过程
qq_36297981的博客
05-05 3341
1.从入口开始 new Vue()做了什么 从入口文件开始，我们来分析一下new Vue()做了哪些工作，Vue实际上是一个类，我们通过new Vue() 来创建一个Vue实例。现在来看一下源码，在src/core/instance/index.js function Vue (options) { // 判断是否通过new 创建Vue实例 if (process.env.NODE_ENV...
Vue2.x踩坑与总结
weixin_34245749的博客
02-07 188
年前就打算学习并总结一下vue2.x，但是因为年前工作比较多，所以进展十分缓慢，现在终于学了一大部分，而且自己在学习开发中也踩了不少坑也总结了不少，所以将自己踩过的坑总结一下分享出来。因为在项目中使用了webpack2.x，所以对于webpack2.x也有一个踩坑总结，点击链接。 原文链接：http://mrzhang123.github...
vue.esm.js:5107 [Vue warn]: Failed to mount component: template or render function not defined.
最新发布
12-01
<template> <div> <!-- 组件内容 --> </div> </template> <script> export default { // 组件逻辑 } </script> <style> /* 组件样式 */ </style> ``` 请检查您的组件是否具有正确的基本结构。如果问题仍然...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值