今天学习了一下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. Ubuntu LNMP环境的搭建

    一.安装nginx Step1:安装: sudo apt-get install nginx Step2:查看ngnix 运行状态 : service nginx status 查看80端口是否开启: ...

  2. 什么是RPC,RPC好处,常用的RPC框架

    RPC简介 RPC(Remote Procedure Call Protocol)远程过程调用协议.一个通俗的描述是:客户端在不知道调用细节的情况下,调用存在于远程计算机上的某个对象,就像调用本地应用 ...

  3. Privacy-Preserving Deep Learning via Additively Homomorphic Encryption

    郑重声明:原文参见标题,如有侵权,请联系作者,将会撤销发布! Full version of a paper at the 8-th International Conference on Appli ...

  4. 力扣Leetcode 21. 合并两个有序链表

    合并两个有序链表 将两个升序链表合并为一个新的升序链表并返回.新链表是通过拼接给定的两个链表的所有节点组成的. 示例: 输入:1->2->4, 1->3->4 输出:1-> ...

  5. Python3 高级编程技巧(部分)

    目录: 在列表.字典.集合中筛选数据 为元组元素命名 通过列表.元组创建字典 字典排序 寻找字典的公共键 让字典保持有序 生成器函数 yield协程 同时遍历值与下标 在列表.字典.集合中筛选数据 很 ...

  6. Ingress-nginx 与 Nginx-ingress

    一.概述 Ingress-nginx:它是由Kubernetes社区基于Nginx Web服务器开发的,并补充了一组用于实现额外功能的Lua插件,作为“官方”默认控制器支持当然最优. Github:h ...

  7. Fitness - 05.11

    倒计时234天 从本周开始改变运动模式 跑步换到每周二.四.六进行. 每周一.三.五增加瑜伽的练习,周日山地车骑行~~~~ 久违的瑜伽课,瑜伽老师居然是男的,第一次看到这么柔软的男生~! 平时感觉不到 ...

  8. Mac OSX上安装Nginx

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

  9. 使用Javax.mail 发送邮件

    使用Javax.mail 发送邮件 详细说明都在代码中: 引入依赖  <!--sun定义的一套接收.发送电子邮件的API-->    <dependency>      < ...

  10. vue mixin混入

    基本结构 export default { data() { return {} }, computed: { }, methods: { }, filters: { }, created() { } ...