今天学习了一下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. markdown插入表情

    找到了一个网站https://www.webfx.com/tools/emoji-cheat-sheet/,直接把表情对应的符号复制粘贴就行了. 比如:joy:显示为 部分截图:

  2. Scala集合中的函数(扩展)

    1.拉链(zip) 将两个集合进行 对偶元组合并,可以使用拉链 object Demo_031 { def main(args: Array[String]): Unit = { val list1 ...

  3. 个人项目(C语言)

    GitHub地址:https://github.com/dachai9/personal-project.git 1. WC 项目要求 wc.exe 是一个常见的工具,它能统计文本文件的字符数.单词数 ...

  4. HYSBZ - 2243 树链剖分 + 线段树 处理树上颜色段数

    用线段树处理颜色段数 记录区间内的颜色段数,区间右端点的颜色,区间右端点的颜色. int tr[maxn<<2], lc[maxn<<2], rc[maxn<<2] ...

  5. Javascript循环和代码规范

    1 - 循环 1.1 for循环 语法结构 for(初始化变量; 条件表达式; 操作表达式 ){ //循环体 } 名称 作用 初始化变量 通常被用于初始化一个计数器,该表达式可以使用 var 关键字声 ...

  6. 无法创建新虚拟机: 无法打开配置文件“F:\BigData\vm12\centos01\centos01.vmx”: 拒绝访问。

    退出,右键vmware选择以管理员身份运行即可.

  7. 虚拟机安装:VirtualBox上安装Ubuntu

    在Win10 中使用VirtualBox安装Ubuntu 本教程将指引读者在Windows10操作系统下使用开源虚拟机软件VirtualBox安装Ubuntu,读者也可以使用其他虚拟机VMware W ...

  8. Macbook Pro HDMI 无信号解决办法

    因为CS:GO无法启动的问题,使用过了下面的命令 sudo pmset -a GPUSwitch 0 导致HDMI显示器无信号 输入下面的代码 sudo pmset -a GPUSwitch 1 可以 ...

  9. Idiomatic Phrases Game(最短路+注意坑点)

    Tom is playing a game called Idiomatic Phrases Game. An idiom consists of several Chinese characters ...

  10. 模拟CMOS集成电路 课后习题总结(2.1)

    前几天开始自学拉扎维的模设教材,看之前浏览了EETOP论坛里面好多大神们对这本书的看法,当然也有人在抱怨,比如冒出“太科幻”.“一年才看完”之类恐怖的修饰语句,因此在开始看的时候就对此书充满了“敬畏” ...