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

最新推荐文章于 2024-05-09 23:52:47 发布
最新推荐文章于 2024-05-09 23:52:47 发布
阅读量448 收藏
点赞数
分类专栏： Vue学习目录

转载自：http://blog.csdn.net/wmwmdtt/article/details/53589662

[javascript]  view plain  copy
  1. import Vue from 'vue';  
  2. import App from './App';  
  3.   
  4. /* eslint-disable no-new */  
  5. new Vue({  
  6.   el: '#app',  
  7.   template: '<App/>',  
  8.   components: { App }  
  9. });  

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

区别一定是:el对应的 一定是一个css选择器,如果还是html 或者body元素,如下图:

[javascript]  view plain  copy
  1. import Vue from 'vue';  
  2. import App from './App';  
  3.   
  4. /* eslint-disable no-new */  
  5. new Vue({  
  6.   el: 'body',  
  7.   components: { App }  
  8. });  

浏览器将会报错:

[plain]  view plain  copy
  1. [Vue warn]: Do not mount Vue to <html> or <body> - mount to normal elements instead.   
  2. warn @ vue.common.js?e881:509  
  3. vue.common.js?e881:5929 Download the Vue Devtools for a better development experience:  
  4. https://github.com/vuejs/vue-devtools  

,google translate:

不要将Vue挂载到<html>或<body> - mount到普通元素。


官方文档是这么解释的:


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

aaa333qwe
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
[Vue warn]: Do not mount Vue to 「html」 or 「body」 - mount to normal elements instead.
朝花夕拾的博客
07-01 1347
不要将Vue挂载到<html>或<body> - mount到普通元素 如下图就会报这个错误 改成这样即可
Do not mount Vue to <html> or <body> - mount tonormal elements instead.
u013746071的专栏
09-20 1421
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插件时，仍出现Download the Vue Devtools extension for a better development experience
最新发布
2401_84620303的博客
05-09 1152
函数式编程其实是一种编程思想，它追求更细的粒度，将应用拆分成一组组极小的单元函数，组合调用操作数据流；它提倡着 纯函数 / 函数复合 / 数据不可变， 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用；
控制台报 Do not mount Vue to html or body mount to normal elements instead
blueberry_liang的博客
07-18 434
提供的元素只能作为挂载点。不同于 Vue 1.x，所有的挂载元素会被 Vue 生成的 DOM 替换。因此不推荐挂载 root 实例到 或者 上。=&amp;amp;amp;amp;amp;gt; 用普通元素作为挂载点，例如div...
[Vue warn]: Do not mount Vue to <html> or <body> - mount to normal elements instead.
weixin_33824363的博客
02-13 291
官方文档是这么解释的: 提供的元素只能作为挂载点。不同于 Vue 1.x，所有的挂载元素会被 Vue 生成的 DOM 替换。因此不推荐挂载root实例到<html>或者<body>上。 这是vue2.0的最新写法,我们看到的是vue项目的主入口main.js,template是将会替换el的挂载元素的模板 区别一定是:el对应的 一定是一个css选择器,如果还...
Do not mount Vue to <html> or <body> - mount to normal elements instead.
热爱思考、活力满满、开朗爱笑的年轻人
11-02 1772
在使用 vue-cli 构建项目时（使用的模版是webpack） 初始化的 main.js 中是这样的。/* eslint-disable no-new */ new Vue({ el: '#app', router, template: '<App/>', components: { App } });然后将挂载点改为： el: 'body' ，然后浏览器就会报这个警告：[Vue
基于vue-cli脚手架整合echarts5创建的水球图案例
07-19
Vue CLI是一个强大的脚手架工具，用于快速搭建Vue.js项目，而ECharts5则是一款优秀的数据可视化库，它提供了丰富的图表类型，包括我们在此案例中使用的水球图（liquidFill）。 首先，让我们了解Vue CLI。Vue CLI是...
深入理解基于vue-cli的vuex配置
08-29
基于vue-cli的vuex配置是Vue.js生态系统中的一個重要组件，vuex是vue的状态管理工具，可以帮助开发者更好地管理应用程序中的状态。下面是基于vue-cli的vuex配置的详细介绍： 一、安装vuex 首先，我们需要安装vuex...
vue-cli3配置多页面demo
12-12
Vue CLI 3 是 Vue.js 官方提供的一个强大的脚手架工具，用于快速搭建 Vue 应用。在创建单页应用（SPA）之外，Vue CLI 3 也支持配置多页面应用程序（MPA），这对于需要多个独立入口点的项目非常有用，比如不同的路由...
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
10-17
在本文中，我们将探讨一个可能不那么常见的Vue技巧，即如何开发一个可以通过全局方法调用的组件，例如一个通知组件，可以使用`Vue.$notify(options)`的方式来触发。 首先，我们要理解Vue组件的基本概念。组件是Vue....
Vue $mount实战之实现消息弹窗组件
12-02
Vue $mount 是 Vue.js 框架中一个重要的方法，用于手动挂载一个已经创建的实例到 DOM 节点上。在这个实战中，我们将探讨如何实现类似 Element-UI 的 Message 弹窗组件，理解其背后的原理，并解决几个关键问题。 1. ...
vue-devtools(chrome vue 调试插件)
12-02
chrome（谷歌浏览器）vue代码调试插件， 已打包。解压后，通过chrome扩展程序加载即可使用。 使用方法： 1、chrome浏览器输入地址“chrome://extensions/”进入扩展程序页面 2、勾选开发者模式 3、点击“加载已解压的扩展程序...”按钮，选择解压后的chrome文件夹，即可添加成功。 4、添加完vue-devtools扩展程序之后，我们在调试vue应用的时候，chrome开发者工具中会看一个vue的一栏，点击之后就可以看见当前页面vue对象的一些信息
[vue]开发者工具 vue devtools 安装
jinwenshuo2007的博客
06-01 3725
记录一下安装过程
Vue调试神器vue-devtools配置 / 解决提示 Download the Vue Devtools extension for a better development experience
LMGD的博客
04-14 2万+
访问 Vue页面，控制台提示： Download the Vue Devtools extension for a better development experience: https://github.com/vuejs/vue-devtools 下载 Vue Devtools 扩展以获得更好的开发体验：https://github.com/vuejs/vue-devtools vue-devtools 工具下载 链接：https://pan.baidu.com/s/1eWNG.
Vue --控制台出现 Download the Vue Devtools extension for a better development experience
热门推荐
qq_52986363的博客
04-04 2万+
解决方案： 安装Vue开发者工具即可 Chrome浏览器安装方式： ①：点击右上角三个点 ②：点击更多工具 ③：点击扩展程序 ④：点击右上角的开发者模式，将他启用 ⑤：将下载的Vue.crx文件直接拖动到浏览器窗口即可
解决浏览器安装Vue.js Devtools成功后，显示Vue.js not detected
追求卓越583的博客
08-30 3643
解决浏览器安装Vue.js Devtools成功后，显示Vue.js not detected
2024年Web前端最全阿里大佬把近20年的DBA经验编写成了这份SQL高效优化笔记，阿里P7大佬手把手教你
2401_84434237的博客
05-05 258
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它需要获取的小·伙伴可以直接添加小助手微信：Mxy98811即可免费获取引入篇SQL案例部分原理篇SQL篇实践篇总结函数式编程其实是一种编程思想，它追求更细的粒度，将应用拆分成一组组极小的单元函数，组合调用操作数据流；它提倡着 纯函数 / 函数复合 / 数据不可变， 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用；
Download the Vue Devtools extension for a better development experience 安装vue插件后仍然报错解决方法
laosao_66的博客
01-19 1230
在浏览器里安装了拓展程序后，在运行前端文件时浏览器仍然有这个提示，解决方法是是在管理拓展程序界面，找到相应的拓展程序，点击详情，勾选允许访问文件网址。
Vue - 去掉控制台 Download the Vue Devtools extension for a better development experience: https://xxx 打印
王佳斌
07-06 1万+
前言 这不是报错也不是警告，仅仅是告诉开发者下载它可以获得更好的开发体验。 使用 vue-cli 创建项目启动后，发现控制台默认打印了如下信息： 但就是不想让它控制台打印？一步步关掉它！ ## 下载Vue Devtools扩展以获得更好的开发体验 Download the Vue Devtools extension for a better development experience: https://github.com/vuejs/vue-devtools 关闭打印 打开项目 node_mo
<html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> <script src="https://unpkg.com/vue@next"></script> <!-- import CSS --> <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css"> <!-- import JavaScript --> <script src="https://unpkg.com/element-plus"></script> <title>Element Plus demo</title> <!-- <script src="vue.global.js"></script> --> </head> <body> <div id="app"> <el-button>{{ message }}</el-button> </div> <script> const App = { data() { return { message: "Hello", }; }, }; const app = Vue.createApp(App); app.use(ElementPlus); app.mount("#app"); </script> </body> </html>
07-13
在body部分，有一个id为"app"的div元素，用于挂载Vue应用程序。在script标签中，定义了一个名为App的对象，包含一个data属性，其中有一个名为"message"的数据属性，它的初始值是"Hello"。 然后，使用Vue.createApp...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值