浅谈Vue初学之props的驼峰命名


Posted in Javascript onJuly 19, 2018

在vue的中文官网有这样的说明:HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名。

重申一次,如果你使用字符串模板,那么这个限制就不存在了。

以以下代码为例:

1、当组件中template及props等使用驼峰式命名,在html中对应的改成短横线命名方式。

浅谈Vue初学之props的驼峰命名

2、当组件中template及props等使用字符串模板,在html中改成对应的小写。

浅谈Vue初学之props的驼峰命名

源码说明:

在Vue的源码中创建Vue组件的时候createComponent(),解析组件的相关属性

// extract props
var propsData = extractPropsFromVNodeData(data, Ctor, tag);

而,在extractPropsFromVNodeData()中,Vue通过调用内部方法hyphenate,把驼峰形式的属性转换为横断线形式。

浅谈Vue初学之props的驼峰命名

除此之外,Vue在initProps(),validateProp()时,都将驼峰形式的属性转换为横断线形式。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript For Beginners(转载)
Jan 05 Javascript
IE和Firefox的Javascript兼容性总结[推荐收藏]
Oct 19 Javascript
JavaScript新窗口与子窗口传值详解
Feb 11 Javascript
jQuery设置和获取HTML、文本和值示例
Jul 08 Javascript
JavaScript中获取样式的原生方法小结
Oct 08 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
May 09 Javascript
详解js前端代码异常监控
Jan 11 Javascript
vue的状态管理模式vuex
Nov 30 Javascript
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
vue-i18n实现中英文切换的方法
Jul 06 Javascript
vue 全局封装loading加载教程(全局监听)
Nov 05 Javascript
JavaScript 防盗链的原理以及破解方法
Dec 29 Javascript
解决vue-cli3 使用子目录部署问题
Jul 19 #Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
Jul 19 #Javascript
微信小程序实现分享到朋友圈功能
Jul 19 #Javascript
微信小程序实现自定义加载图标功能
Jul 19 #Javascript
Angular5集成eventbus的示例代码
Jul 19 #Javascript
微信小程序实现弹出菜单
Jul 19 #Javascript
微信小程序实现之手势锁功能实例代码
Jul 19 #Javascript
You might like
PHP中的日期处理方法集锦
2007/01/02 PHP
thinkphp autoload 命名空间自定义 namespace
2015/07/17 PHP
PHP程序员的技术成长规划
2016/03/25 PHP
PHP实现的抓取小说网站内容功能示例
2019/06/27 PHP
实现web打印的各种方法介绍及实现代码
2013/01/09 Javascript
JS获取DropDownList的value值与text值的示例代码
2014/01/07 Javascript
一款由jquery实现的整屏切换特效
2014/09/15 Javascript
为何JS操作的href都是javascript:void(0);呢
2015/11/12 Javascript
jQuery 3.0十大新特性
2016/07/06 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
2016/08/06 Javascript
AngularJs concepts详解及示例代码
2016/09/01 Javascript
JavaScript 控制字体大小设置的方法
2016/11/23 Javascript
微信小程序渲染性能调优小结
2019/07/30 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
2019/11/19 Javascript
vue输入框使用模糊搜索功能的实现代码
2020/05/26 Javascript
javascript实现评分功能
2020/06/24 Javascript
js制作提示框插件
2020/12/24 Javascript
[03:21]【TI9纪实】Old Boys
2019/08/23 DOTA
[54:15]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第二场2月1日
2021/03/11 DOTA
python版本坑:md5例子(python2与python3中md5区别)
2017/06/20 Python
python 实现上传图片并预览的3种方法(推荐)
2017/07/14 Python
Django中Model的使用方法教程
2018/03/07 Python
tensorflow 打印内存中的变量方法
2018/07/30 Python
python中的socket实现ftp客户端和服务器收发文件及md5加密文件
2020/04/01 Python
Python模拟登录requests.Session应用详解
2020/11/17 Python
英国领先的游戏零售商:GAME
2019/09/24 全球购物
物理教育专业毕业生推荐信
2013/11/03 职场文书
小学教师岗位职责
2013/11/25 职场文书
终端业务员岗位职责
2013/11/27 职场文书
七年级政治教学反思
2014/02/03 职场文书
经贸专业毕业生求职信
2014/03/23 职场文书
2015年高中班主任工作总结
2015/04/30 职场文书
学习经验交流会演讲稿
2015/11/02 职场文书
《7的乘法口诀》教学反思
2016/02/18 职场文书
Python Numpy库的超详细教程
2022/04/06 Python
小喇叭开始广播了! 四十多年前珍贵老照片
2022/05/09 无线电