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

最新推荐文章于 2024-05-05 03:24:38 发布
最新推荐文章于 2024-05-05 03:24:38 发布
阅读量491 收藏
点赞数
分类专栏： Vue学习目录
本文介绍了 Vue 2.0 中主入口文件 main.js 的正确写法，强调了 el 属性应避免指向 &lt;html&gt; 或 &lt;body&gt; 的重要性，并解释了官方文档的相关规定。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

转载自：http://blog.youkuaiyun.com/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> 上。

vue-devtools(chrome vue 调试插件)
12-02
chrome（谷歌浏览器）vue代码调试插件， 已打包。解压后，通过chrome扩展程序加载即可使用。 使用方法： 1、chrome浏览器输入地址“chrome://extensions/”进入扩展程序页面 2、勾选开发者模式 3、点击“加载已解压的扩展程序...”按钮，选择解压后的chrome文件夹，即可添加成功。 4、添加完vue-devtools扩展程序之后，我们在调试vue应用的时候，chrome开发者工具中会看一个vue的一栏，点击之后就可以看见当前页面vue对象的一些信息
[Vue warn]: Do not mount Vue to 「html」 or 「body」 - mount to normal elements instead.
朝花夕拾的博客
07-01 1451
不要将Vue挂载到<html>或<body> - mount到普通元素 如下图就会报这个错误 改成这样即可
Do not mount Vue to <html> or <body> - mount tonormal elements instead.
u013746071的专栏
09-20 1473
1.vue1.x 允许开发者以 <body> 或 <html> 作为根实体的挂载点，但到了VueJS2.0 后，只能通过 独立的节点挂载 ，如:div 等。否则会产生错误，警告讯息如下："Do not mount Vue to <html> or <body> - mount tonormal elements instead." 换成用独立的 DOM 节点，如 `<divid="app"></di
控制台报 Do not mount Vue to html or body mount to normal elements instead
blueberry_liang的博客
07-18 479
提供的元素只能作为挂载点。不同于 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 329
官方文档是这么解释的: 提供的元素只能作为挂载点。不同于 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 1846
在使用 vue-cli 构建项目时（使用的模版是webpack） 初始化的 main.js 中是这样的。/* eslint-disable no-new */ new Vue({ el: '#app', router, template: '<App/>', components: { App } });然后将挂载点改为： el: 'body' ，然后浏览器就会报这个警告：[Vue
``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hello Vue</title> </head> <body> <!-- 父组件模板 --> <div id="app"> <my-button></my-button> <my-button>我的按钮</my-button> <my-button><span style="color: red;">我的按钮2</span></my-button> </div> <script src="http://xie.cwerp.cn/js/vue.global.js"></script> <script type="text/javascript"> const app = Vue.createApp({}) // 定义一个叫my-button的组件 app.component('my-buttonGGG', { template: `<button><slot12>默认名称</slot></button>` }) app.mount('#app') </script> </body> </html>```检查错误并改正
03-15
-- 引入 Vue 库 (推荐使用官方 CDN) --> <script src="https://unpkg.com/vue@next"></script> <script type="text/javascript"> const app = Vue.createApp({}); // 正确注册 my-button 组件 app.component...
<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...
<template> <van-dialog v-model:show="showDialog" :show-confirm-button="false" :show-cancel-button="false" > <!-- 自定义标题插槽 --> <template #title> <div class="custom-header"> <van-icon name="warning" /> <span>自定义标题</span> </div> </template> <!-- 自定义内容插槽 --> <template #default> <div class="custom-content"> <van-field v-model="inputValue" placeholder="输入内容" /> <van-checkbox v-model="checked">同意协议</van-checkbox> </div> </template> <!-- 自定义底部插槽 --> <template #footer> <div class="custom-footer"> <van-button @click="onCancel">放弃</van-button> <van-button @click="onConfirm">提交</van-button> </div> </template> </van-dialog> </template> 如何将这样的一个组件封装成函数式调用
最新发布
04-30
1. 创建一个Vue组件，包含van-dialog，并定义插槽位置。 2. 将该组件封装成函数式调用，允许通过参数配置插槽内容、props和事件。 3. 使用Vue.extend创建组件构造器，手动挂载到DOM元素。 4. 处理对话框的显示和隐藏...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 引入Vue库 --> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> </head> <body> <div id="app"> <p><input type="number" placeholder="请输入第一个数" v-model="first"></p> <p><input type="number" placeholder="请输入第二个数" v-model="next"></p> <div>选择</div> <!-- 使用v-on指令绑定点击事件 --> <button @click="con">+</button> <button @click="del">-</button> <button @click="chen">x</button> <button @click="chu">/</button> <div>计算的结果为：{{ result }}</div> </div> <script> // 定义Vue应用的配置对象 const App = { data() { return { result:0, first:0, next:0 }; }, methods: { // 正确拼写methods而不是method con(){ result = this.first + this.next } } }; // 创建并挂载Vue实例到页面上的#app元素上 Vue.createApp(App).mount('#app'); </script> </body> </html>
03-20
<p><input type="number" placeholder="请输入第一个数" v-model.number="first"></p> <p><input type="number" placeholder="请输入第二个数" v-model.number="next"></p> <div>选择运算符：</div> <!-- 使用v-...
怎么把组件挂载到body上_vue挂载到body上报错了， 解决办法在这里哦
weixin_39882394的博客
12-20 2188
控制台报的错误是这样的：[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 挂载body报错
weixin_44556152的博客
01-14 429
1、 众所周知vue2.0版本一上，不能直接挂载body 2、el：body 、$mount() 肯定会抛出问题，提供的元素只能作为挂载点。不同于 Vue 1.x，所有的挂载元素会被 Vue 生成的dom替换m 3、如何挂载自己定义的实例 appendchildl 啦 ...
Vue --控制台出现 Download the Vue Devtools extension for a better development experience
qq_52986363的博客
04-04 3万+
解决方案： 安装Vue开发者工具即可 Chrome浏览器安装方式： ①：点击右上角三个点 ②：点击更多工具 ③：点击扩展程序 ④：点击右上角的开发者模式，将他启用 ⑤：将下载的Vue.crx文件直接拖动到浏览器窗口即可
2024年Web前端最全阿里大佬把近20年的DBA经验编写成了这份SQL高效优化笔记，阿里P7大佬手把手教你
2401_84434237的博客
05-05 353
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它需要获取的小·伙伴可以直接添加小助手微信：Mxy98811即可免费获取引入篇SQL案例部分原理篇SQL篇实践篇总结函数式编程其实是一种编程思想，它追求更细的粒度，将应用拆分成一组组极小的单元函数，组合调用操作数据流；它提倡着 纯函数 / 函数复合 / 数据不可变， 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用；
Download the Vue Devtools extension for a better development experience 安装vue插件后仍然报错解决方法
laosao_66的博客
01-19 1765
在浏览器里安装了拓展程序后，在运行前端文件时浏览器仍然有这个提示，解决方法是是在管理拓展程序界面，找到相应的拓展程序，点击详情，勾选允许访问文件网址。
vue 自定义组件插入到body中的实现
记录点滴
05-20 1万+
以notice提醒组件为例，调用组件，如下， 实现了两个方法： show方法时显示组件 remove方法销毁组件 // 加载组件 let noticeCom = vm.$create({ title: '提醒标题', content: '提醒内容', duration: 2000 // 组件的显示时长 }).show() // 销毁 noticeCom.remove() 实现思路： （1）首先创建组件 （2）使用render函数加载组件 （3）$mount挂载组件
Vue $mount的用法
热门推荐
Judy1623
07-19 3万+
$mount的用法 1.$mount方法是用来挂载我们的扩展的 做一个扩展，然后用$mount的方法把扩展挂载到dom上 var judy = Vue.extend({ template:'&lt;p&gt;{{message}}&lt;/p&gt;', data: function () { return{ ...
浏览器扩展程序增加 vue_dev_tools 调试工具
流放深圳
03-27 1739
在做 Vue 项目的开发时，我们经常需要在页面上调试，接下来介绍如何在浏览器扩展程序增加 vue_dev_tools 调试工具
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值