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 相关文章推荐
如何在Web页面上直接打开、编辑、创建Office文档
Mar 12 Javascript
Highslide.js是一款基于js实现的网页中图片展示插件
Mar 30 Javascript
jquery实现弹出层效果实例
May 19 Javascript
判断是否存在子节点的实现代码
May 18 Javascript
javascript特殊文本输入框网页特效
Sep 13 Javascript
easyui messager alert 三秒后自动关闭提示的实例
Nov 07 Javascript
socket.io学习教程之基础介绍(一)
Apr 29 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
Oct 27 Javascript
微信小程序多音频播放进度条问题
Aug 28 Javascript
vue调试工具vue-devtools安装及使用方法
Nov 07 Javascript
elementUI select组件默认选中效果实现的方法
Mar 25 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
Feb 11 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
第三节 定义一个类 [3]
2006/10/09 PHP
别人整理的服务器变量:$_SERVER
2006/10/20 PHP
用mysql内存表来代替php session的类
2009/02/01 PHP
深入file_get_contents与curl函数的详解
2013/06/25 PHP
php自定义的格式化时间示例代码
2013/12/05 PHP
php发送http请求的常用方法分析
2016/11/08 PHP
CI框架数据库查询缓存优化的方法
2016/11/21 PHP
Windows 下安装 swoole 图文教程(php)
2017/06/05 PHP
javascript 新浪背投广告实现代码
2009/07/07 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
2014/05/04 Javascript
JS动态加载当前时间的方法
2015/02/09 Javascript
使用impress.js制作幻灯片
2015/09/09 Javascript
轻松实现js弹框显示选项
2016/09/13 Javascript
vue中component组件的props使用详解
2017/09/04 Javascript
Angular 5.x 学习笔记之Router(路由)应用
2018/04/08 Javascript
深入浅析Vue.js计算属性和侦听器
2018/05/05 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
2019/08/21 Javascript
js获取本日、本周、本月的时间代码
2020/02/01 Javascript
基于VSCode调试网页JavaScript代码过程详解
2020/07/20 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
2020/11/16 Javascript
[01:16:50]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第一场 3月7日
2021/03/11 DOTA
python使用reportlab实现图片转换成pdf的方法
2015/05/22 Python
使用py2exe在Windows下将Python程序转为exe文件
2016/03/04 Python
使用Python操作excel文件的实例代码
2017/10/15 Python
python爬虫_实现校园网自动重连脚本的教程
2018/04/22 Python
Python 实现一个手机号码获取妹子名字的功能
2019/09/25 Python
pytorch实现保证每次运行使用的随机数都相同
2020/02/20 Python
Python3监控windows,linux系统的CPU、硬盘、内存使用率和各个端口的开启情况详细代码实例
2020/03/18 Python
Python字符串函数strip()原理及用法详解
2020/07/23 Python
Html5实现单张、多张图片上传功能
2019/04/28 HTML / CSS
EJB发布WEB服务一般步骤
2012/10/31 面试题
应急管理工作总结2015
2015/05/04 职场文书
2016新年问候语大全
2015/11/11 职场文书
MySQL表的增删改查基础教程
2021/04/07 MySQL
python必学知识之文件操作(建议收藏)
2021/05/30 Python
分享CSS盒子模型隐藏的几种方式
2022/02/28 HTML / CSS