vue2.0(新手)第一个坑--do not mount Vue to <body>!!!
来源:互联网 发布:手机上淘宝网怎么付款 编辑:程序博客网 时间:2024/06/14 02:37
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:509vue.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>
上。
1 0
- vue2.0(新手)第一个坑--do not mount Vue to <body>!!!
- vue2.0(新手)第一个坑--do not mount Vue to <body>!!!
- vue2.0错误:Do not mount Vue to <html> or <body>
- Vue2+Webpack错误:Do not mount Vue to <html> or <body>
- Do not mount Vue to <html> or <body>
- Do not mount Vue to <html> or <body>
- vue2.0新手填坑攻略之使用vue-cli搭建vue项目开发环境到项目发布
- Vue2+Webpack报错:Failed to mount component: template or render function not defined.
- Abstract methods do not specify a body
- [Vue warn]: Failed to mount component: template or render function not defined. (found in root insta
- Vue2.0 新手安装攻略
- vue2.0路由--vue-router
- vue2.0,vue-router配置
- vue2.0使用vue-router
- Vue2.0配置vue-router
- Vue2.0+Vue-cli脚手架
- 第一个Hello Vue!
- Whonix - Things NOT to do
- 二项树及二项队列
- [Java基础]接口能否被实例化以及匿名内部类
- 运行时加载DLL
- [51nod 1223]分数等式的数量
- 【C#】52. 使用Flatten方法处理并行任务抛出的异常
- vue2.0(新手)第一个坑--do not mount Vue to <body>!!!
- matlab-基于IBM服务器”VideoReader没有注册类“解决全过程
- Python install ggplot in Rodeo
- 导入第三方框架ReactiveCocoa经常出现的问题 如出现Could not build module ‘ReactiveCocoa’
- 磁盘调度算法(FCFS&&SSTF)
- 正确加载 Javascript 和 CSS 到 WordPress
- 冒泡排序
- Vue+webpack构建单页router应用(二)
- UVa - 10870 - Recurrences ( 矩阵快速幂 )