今天学习了一下vue的组件,但是报了一个错误

Do not use built-in or reserved HTML elements as component id:mask ,

经过查询得知是因为 组件名mask ,不能和html标签重复,mask组件名可能与h5新标签重复,如果写aside,header肯定也会报错的,只要修改组件名就可以了,把mask改为了maskdemo

由于在模板需要插入到 DOM 中,所以模板中的标签名必须能够被 DOM 正确地解析。主要有三种情况:

    一是完全不合法的标签名,例如 </>;

    二是与 HTML 元素重名会产生不确定的行为,例如使用 input 做组件名不会解析到自定义组件,使用 button 在 Chrome 上正常但在 IE 上不正常;

    三是与 Vue 保留的 slot、partial、component 重名,因为会优先以本身的意义解析,从而产生非预期的结果。

具体的命名规则可以查看 :

聊聊 Vue 组件命名那些事:https://cnodejs.org/topic/5816aabdcf18d0333412d323   写的很详细

Do not use built-in or reserved HTML elements as component id:mask vue报错的更多相关文章

  1. vue报错 Do not use built-in or reserved HTML elements as component id:header

    组件,不能和html标签重复 header组件,h5新标签重复 Do not use built-in or reserved HTML elements as component id:header ...

  2. vue Do not use built-in or reserved HTML elements as component id: nav

    刚入坑vue 在新建组件的时候出现这个问题,原因是我新建的这个组件name: 'nav' 在vue中好像nav 这样的 有点类似于 “关键字” 不能作为组件的name,按照服务端来说 就是不可以命名关 ...

  3. Vue中出现Do not use built-in or reserved HTML elements as component id:footer等等vue warn问题

    错误示图: 原因:是因为在本地项目对应文件的<script>中,属性name出现了错误的命名方式,导致浏览器控制台报错! 诸如: name: header .  . name: menu  ...

  4. [Vue warn]: Do not use built-in or reserved HTML elements as component id: header

    因为header在HTML5里面是个原生的标签,所以在开发的时候会提示错误,解决方法:修改components里面左边的header

  5. Do not use built-in or reserved HTML elements as component id: header

    刚刚在搭建项目时发现控制台报错 查找发现是因为组件名称所致,也就是当我们起名一个header.vue的组件时,我们安装的vue插件会自动把name设置为default 这就造成了错误 把header修 ...

  6. vue报错:[Vue warn]: Do not use built-in or reserved HTML elements as component id: header

    报错的信息大致是不要将内置或保留的HTML元素用作组件ID 解决的办法是修改name符合规范或者直接删除组件内的name属性.

  7. [Vue warn]: Do not use built-in or reserved HTML elements as component id: content

    错误如下: 报错原因: 不能使用内建标签,组件不能和html标签重复. 解决办法: 把name改成mContent解决.

  8. vue 渲染是出现 Do not use built-in or reserved HTML elements as component id 的警告

    情况1.是因为组件命名和引入不一致造成的. 命名组件(nav) export default { name: 'nav', data () { return { } } 引入组件(Navigation ...

  9. vue中报错Do not use built-in or reserved HTML elements as component id details

    原因是定义了一个叫做details的comonent 跟现有的html网页中的标签重合 export default { name: 'details', data () { return { equ ...

随机推荐

  1. 安装yarn 心得分享

    初次使用yarn ,坑的我,全局安装完@vue/cli,安装之后就是说vue不是内部命令,研究好久,总结一下分享大家一起学习 1,首先安装yarn: 安装yarn 去官网下载yarn 安装包 默认安装 ...

  2. 程序员必知必会Git的小知识

    单人开发 1.初始化一个仓库 git init //cd到你工作的文件夹,初始化git仓库,默认会生成.git隐藏目录 2.配置自己的信息(Git 不喜欢不愿透漏姓名的人) git config -- ...

  3. python123期末四题编程题 -无空隙回声输出-文件关键行数-字典翻转输出-《沉默的羔羊》之最多单词

    1. 无空隙回声输出 描述 获得用户输入,去掉其中全部空格,将其他字符按收入顺序打印输出. ‪‬‪‬‪‬‪‬‪‬‮‬‫‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‫‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‭‬‪‬‪‬‪‬ ...

  4. python 四位玫瑰数 + 100以内素数求和

    四位玫瑰数 描述‪‬‪‬‪‬‪‬‪‬‮‬‫‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‫‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‭‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‮‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‭‬‪‬‪‬‪‬‪‬‪‬‮‬ ...

  5. 洛谷P3817 小A的糖果 贪心思想

    一直觉得洛谷的背景故事很....直接题解吧 #include <bits/stdc++.h> //万能头文件 using namespace std; int a[100002]; // ...

  6. android studio生成aar包

    android studio生成aar包并在其他工程引用aar包 http://blog.csdn.net/getchance/article/details/47257389 用Android st ...

  7. Unity可视化数据:创建图表

    本文由Aoi翻译,转载请注明出处.文章来自于catlikecoding,原文作者介绍了Unity制作图表.可视化数据的方法.更多的名词解释内容,请点击末尾的“原文链接”查看.   介绍 这个教程里,我 ...

  8. Mac OSX上安装Nginx

    1. 通过brew instal nginx安装 ==> Downloading https://homebrew.bintray.com/bottles/nginx-1.10.1.el_cap ...

  9. windows-服务器-配置一个及多个-Apache-Tomcat

    问题:如何在一台服务器上发布了几个Tomcat的系统???怎么配置环境变量?怎么设置Tomcat? 2020/8月更新,由于之前的java的环境变量有点绕,此次新加一个流程设计图 一.需求: 一台wi ...

  10. uniapp 获取元素高度 距离顶部高度等

    let _this=this let height="" const query = uni.createSelectorQuery() query.select('#u-drop ...