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

最新推荐文章于 2024-05-03 22:32:16 发布
最新推荐文章于 2024-05-03 22:32:16 发布
阅读量1.8w 收藏 8
点赞数 5
分类专栏： 积累经验 文章标签： mount Vue to body Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wmwmdtt/article/details/53589662
版权 

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

也不是什么极客
关注
  • 5
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
基于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...
vue3之传送组件( 可以 定义的组件 插入再body等)
weixin_43845137的博客
03-09 2581
目录vue3之传送组件( 可以 定义的组件 插入再body等) vue3之传送组件( 可以 定义的组件 插入再body等) Teleport 是一种能够将我们的模板渲染至指定DOM节点，不受父级style、v-show等属性影响，但data、prop数据依旧能够共用的技术；类似于 React 的 Portal。 主要解决的问题 因为Teleport节点挂载在其他指定的DOM节点下，完全不受父级style样式影响 通过to 属性 插入指定元素位置 to=“body” 便可以将Teleport 内容
vue中将元素加入body中
shidouyu的专栏
07-07 6268
// 将弹框加入Body中 addRemoveDateWinToBody(type) { this.$nextTick(() => { const body = document.querySelector('body') if (type) { // 显示 let zDateWin = this.$refs.zDateWin let pTabName = zDateWin.paren...
正确解决Failed to mount component: template or render function not defined异常的有效解决方法
最新发布
wbajsjhhhhh的博客
05-03 6827
正确解决Failed to mount component: template or render function not defined异常的有效解决方法
Vue实现自定义组件数据双向绑定
米斯特曹
09-22 3774
前言：使用Vue进行项目开发的时候，通常会用到Vue提供的组件化机制封装开发所需要的组件以达到开发项目的需求，大到项目中的一快筛选模块、数据表格，小到分页面板、级联面板、乃至一个小小的button按钮，之所以组件化也是为提高我们实际的开发效率，那到底什么是组件化呢？参考一张尤玉溪大大的图就会很快明白； 简单来讲一个完整项目会分为很多部分，每个部分都会有各自独立的功能，每个独立的功能组件又是由...
Download the Vue Devtools extension for a better development experience 安装vue插件后仍然报错解决方法
laosao_66的博客
01-19 1221
在浏览器里安装了拓展程序后，在运行前端文件时浏览器仍然有这个提示，解决方法是是在管理拓展程序界面，找到相应的拓展程序，点击详情，勾选允许访问文件网址。
vue 自定义组件插入到body中的实现
记录点滴
05-20 9581
以notice提醒组件为例，调用组件，如下， 实现了两个方法： show方法时显示组件 remove方法销毁组件 // 加载组件 let noticeCom = vm.$create({ title: '提醒标题', content: '提醒内容', duration: 2000 // 组件的显示时长 }).show() // 销毁 noticeCom.remove() 实现思路： （1）首先创建组件 （2）使用render函数加载组件 （3）$mount挂载组件
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配置 / 解决提示 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 常用指令学习(v-model,v-on,v-for)
KLmxwx569的博客
06-06 188
前言 jQuery 一梭子代码就出来了 事件驱动 vue 一块json就完事 有点像angular 数据驱动 只有ie8以上才能兼容 使用vue 第一步 引入vue {{msg}} <script> new Vue({ el:'body', data:{ msg:'hello world', } }) //el 输出的作用域，data 输出的数据 </script> //{{}} 里面放入输出的模板，模板里面放入data里面定义的变量 //el 类似jQuery
vue3自定义组件挂载到body下
inticaler的博客
02-21 2676
vue3自定义组件挂载到body下。
vue自定义组件如何挂载到body上
dogface博客
04-03 3247
2.vue规定不能直接挂在到body html的跟节点上去。3.vm.$el 可以获取虚拟dom实例化的真实dom节点。vue自定义组件如何挂载到body上。
Vue动态创建组件实例并挂载到body
小匠的Blog
03-08 3986
方式一 import Vue from 'vue' /** * @param Component 组件实例的选项对象 * @param props 组件实例中的prop */ export function create(Component, props) { const comp = new (Vue.extend(Component))({ propsData: props }).$mount() document.body.appendChild(comp.$el) com
Vue2+Webpack错误：Do not mount Vue to <html> or <body> - mount tonormal elements instead.
jCuckoo的专栏
02-22 4288
vue1.x 允许开发者以 或 作为根实体的挂载点，但到了VueJS2.0 后，只能通过 独立的节点挂载 ，如:div 等。 否则会产生错误，警告讯息如下："Do not mount Vue to or - mount tonormal elements instead." 换成用独立的 DOM 节点，如 ，就可以正常运作了。
<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...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值