浅谈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实现文本域写入字符时限定字数
Feb 12 Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
Dec 31 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
May 04 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
Dec 07 Javascript
javascript实现秒表计时器的制作方法
Feb 16 Javascript
angularJS模态框$modal实例代码
May 27 Javascript
用Cordova打包Vue项目的方法步骤
Feb 02 Javascript
jQuery中DOM常见操作实例小结
Aug 01 jQuery
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
微信小程序新闻网站详情页实例代码
Jan 10 Javascript
JS几个常用的函数和对象定义与用法示例
Jan 15 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
Apr 27 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留言本模块主要功能的函数说明(代码可实现)
2013/06/25 PHP
php创建session的方法实例详解
2015/01/27 PHP
javascript 网页跳转的方法
2008/12/24 Javascript
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
2010/05/25 Javascript
IE的fireEvent方法概述及应用
2013/02/22 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
2015/01/23 Javascript
AngularJs学习第八篇 过滤器filter创建
2016/06/08 Javascript
JavaScript面试题大全(推荐)
2016/09/22 Javascript
JS实现鼠标移上去显示图片或微信二维码
2016/12/14 Javascript
React Native 搭建开发环境的方法步骤
2017/10/30 Javascript
原生JS封装_new函数实现new关键字的功能
2018/08/12 Javascript
微信小程序sessionid不一致问题解决
2019/08/30 Javascript
简单分析js中的this的原理
2019/08/31 Javascript
[57:36]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第三场 2月1日
2021/03/11 DOTA
Python3处理文件中每个词的方法
2015/05/22 Python
python中闭包Closure函数作为返回值的方法示例
2017/12/17 Python
对python修改xml文件的节点值方法详解
2018/12/24 Python
python3.6根据m3u8下载mp4视频
2019/06/17 Python
Python叠加矩形框图层2种方法及效果
2020/06/18 Python
手把手教你从PyCharm安装到激活(最新激活码),亲测有效可激活至2089年
2020/11/25 Python
详解python定时简单爬取网页新闻存入数据库并发送邮件
2020/11/27 Python
Python中生成ndarray实例讲解
2021/02/22 Python
50个强大璀璨的CSS3/JS技术运用实例
2010/02/27 HTML / CSS
一款基于css3的列表toggle特效实例教程
2015/01/04 HTML / CSS
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
2013/11/07 HTML / CSS
在C#中如何实现多态
2014/07/02 面试题
企业年会主持词
2014/03/27 职场文书
优秀少先队辅导员先进事迹材料
2014/05/18 职场文书
党员干部作风建设思想汇报范文
2014/10/25 职场文书
婚庆答谢词
2015/01/04 职场文书
工艺技术员岗位职责
2015/02/04 职场文书
2015年乡镇妇联工作总结
2015/05/19 职场文书
2016年学校党支部创先争优活动总结
2016/04/05 职场文书
elasticSearch-api的具体操作步骤讲解
2021/06/28 Java/Android
SpringBoot前端后端分离之Nginx服务器下载安装过程
2022/08/14 Servers
js 实现Material UI点击涟漪效果示例
2022/09/23 Javascript