Vue注册组件命名时不能用大写的原因浅析


Posted in Javascript onApril 25, 2019

这段时间一直在弄vue,当然也遇到很多问题,这里就来跟大家分享一些注册自定义模板组件的心得。

首先“VUE注册组件命名时不能用大写“其实这句话是不对的,但我们很多人开始都觉得是对的,因为大家都踩过大写命名的坑

下面我们来看个例子:

<div id="app">
  <myTemplate></myTemplate>
</div>
<script>
  Vue.component('myTemplate',{
    template: '<h1>这里是自定义组件的内容</h1>'
  })
  new Vue({
    el: '#app'
  })
</script>

当我看完官网的文档后,信心满满的第一次准备自定义组件时,就写的跟上面差不多类型的代码

但是当我运行代码时,组件并没有被渲染出来,反而报错了说我用的组件没有注册,我当时真是挤破脑袋想了半天也没发现问题出在哪里

这时候我在想难道我的命名和源码里的冲突了?于是我把代码改成这样了↓

<div id="app">
  <mytemplate></mytemplate>
</div>
<script>
  Vue.component('mytemplate',{
    template: '<h1>这里是自定义组件的内容</h1>'
  })
  new Vue({
    el: '#app'
  })
</script>

然后运行代码,ok完全正常,这时候大家都会认为vue注册组件不能用大写命名,我当时也这么认为的,直到这两天在用饿了么elementUI框架,当我看了他们的源码,发现原来并不是这样

他们注册组件的命名就和我第一次一样myTemplate,标准的驼峰命名方法,那么我一开始为什么会报错呢?这是为什么呢?难道VUE嫌弃我?

原来是我调用组件时的方法错了,VUE是允许用大写字母来注册组件的,但当你使用时得在驼峰命名的大写字母间加上”-“并都改为小写,看下面代码

<div id="app">
  <my-template></my-template>
</div>
<script>
  Vue.component('myTemplate',{
    template: '<h1>这里是自定义组件的内容</h1>'
  })
  new Vue({
    el: '#app'
  })
</script>

代码运行正常,这个时候大家是不是看出来,vue其实是可以用大写字母命名注册的

后面我也试了很多种命名方式,比如”my-template“这样也是可以的

”My-template“这样的会报错

----------------------------------------------------------------

后来在官网看到这句话camelCase vs. kebab-case    HTML 特性是不区分大小写的。所以,当使用的不是字符串模版,camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名: 如果你使用字符串模版,则没有这些限制。

总结

以上所述是小编给大家介绍的Vue注册组件命名时不能用大写的原因浅析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
一页面多XMLHttpRequest对象
Jan 22 Javascript
腾讯UED 漂亮的提示信息效果代码
Sep 12 Javascript
js自动闭合html标签(自动补全html标记)
Oct 04 Javascript
js计算字符串长度包含的中文是utf8格式
Oct 15 Javascript
理解jQuery stop()方法
Nov 21 Javascript
javascript获取文档坐标和视口坐标
May 26 Javascript
JS Array.slice 截取数组的实现方法
Jan 02 Javascript
jQuery验证插件validate使用详解
May 11 Javascript
JavaScript使用Range调色及透明度实例
Sep 25 Javascript
JavaScript函数节流和函数去抖知识点学习
Jul 31 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
Aug 31 Javascript
JS使用队列对数组排列,基数排序算法示例
Mar 02 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
Apr 25 #Javascript
详解vue项目中调用百度地图API使用方法
Apr 25 #Javascript
Vue开发之watch监听数组、对象、变量操作分析
Apr 25 #Javascript
详解JS实现简单的时分秒倒计时代码
Apr 25 #Javascript
node.js ws模块搭建websocket服务端的方法示例
Apr 25 #Javascript
JS实现指定区域的全屏显示功能示例
Apr 25 #Javascript
使用React手写一个对话框或模态框的方法示例
Apr 25 #Javascript
You might like
PHP5+UTF8多文件上传类
2008/10/17 PHP
PHP5.5和之前的版本empty函数的不同之处
2014/06/13 PHP
php rmdir使用递归函数删除非空目录实例详解
2016/10/20 PHP
javascript之更有效率的字符串替换
2008/08/02 Javascript
jQuery 行级解析读取XML文件(附源码)
2009/10/12 Javascript
学习并汇集javascript匿名函数
2010/11/25 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
2013/12/27 Javascript
display和visibility的区别示例介绍
2014/02/26 Javascript
在Node.js中实现文件复制的方法和实例
2014/06/05 Javascript
js实现点击切换TAB标签实例
2015/08/21 Javascript
jquery判断密码强度的验证代码
2020/04/22 Javascript
JS实现DIV容器赋值的方法
2015/12/14 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
2016/02/16 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
2016/02/18 Javascript
javascript函数中的3个高级技巧
2016/09/22 Javascript
微信小程序 闭包写法详细介绍
2016/12/14 Javascript
vue Render中slots的使用的实例代码
2017/07/19 Javascript
javascript闭包的使用之按钮切换功能
2018/08/30 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
2018/09/03 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
2018/11/28 Javascript
Python中dictionary items()系列函数的用法实例
2014/08/21 Python
Python的Django框架中消息通知的计数器实现教程
2016/06/13 Python
利用Django-environ如何区分不同环境
2018/08/26 Python
浅析Python函数式编程
2018/10/06 Python
python-tkinter之按钮的使用,开关方法
2019/06/11 Python
浅析Windows 嵌入python解释器的过程
2019/07/26 Python
Pandas操作CSV文件的读写实现方法
2019/11/13 Python
Python进程池Pool应用实例分析
2019/11/27 Python
Opodo英国旅游网站:预订廉价航班、酒店和汽车租赁
2018/07/14 全球购物
英国在线药房和在线医生:LloydsPharmacy
2019/10/21 全球购物
汽车运用工程毕业生自荐信
2013/10/29 职场文书
2014年健康教育实施方案
2014/02/17 职场文书
喷漆工的岗位职责
2014/03/17 职场文书
食品安全标语
2014/06/07 职场文书
CSS3新特性详解(五):多列columns column-count和flex布局
2021/04/30 HTML / CSS
微信小程序实现拍照和相册选取图片
2021/05/09 Javascript