浅谈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 相关文章推荐
用jquery来定位
Feb 20 Javascript
EXT窗口Window及对话框MessageBox
Jan 27 Javascript
jquery ajax同步异步的执行最终解决方案
Apr 26 Javascript
request请求获取参数的实现方法(post和get两种方式)
Sep 27 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
Feb 21 Javascript
js实现带简单弹性运动的导航条
Feb 22 Javascript
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
JS中图片压缩的方法小结
Nov 14 Javascript
关于jquery layui弹出层的使用方法
Apr 21 jQuery
javascript 高级语法之继承的基本使用方法示例
Nov 11 Javascript
vue中keep-alive,include的缓存问题
Nov 26 Javascript
原生js实现瀑布流效果
Mar 09 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
Netflix将与CLAMP、乙一以及冲方丁等6名知名制作人合伙展开原创动画计划!
2020/03/06 日漫
深入解析php模板技术原理【一】
2008/01/10 PHP
PHP用SAX解析XML的实现代码与问题分析
2011/08/22 PHP
学习php中的正则表达式
2014/08/17 PHP
PHP常见加密函数用法示例【crypt与md5】
2019/01/27 PHP
PHP设计模式(三)建造者模式Builder实例详解【创建型】
2020/05/02 PHP
php并发加锁问题分析与设计代码实例讲解
2021/02/26 PHP
一行命令搞定node.js 版本升级
2014/07/20 Javascript
JS模拟并美化的表单控件完整实例
2015/08/19 Javascript
javascript实现九宫格相加数值相等
2020/05/28 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
2016/05/05 Javascript
JS操作JSON方法总结(推荐)
2016/06/14 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
2016/06/16 Javascript
JS遍历页面所有对象属性及实现方法
2016/08/01 Javascript
jQuery实现的网页换肤效果示例
2016/09/20 Javascript
Node.js 使用jade模板引擎的示例
2018/05/11 Javascript
angular2路由之routerLinkActive指令【推荐】
2018/05/30 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
2020/04/11 Javascript
微信小程序实现滑动操作代码
2020/04/23 Javascript
Vue实现todo应用的示例
2021/02/20 Vue.js
Python 多线程实例详解
2017/03/25 Python
python利用正则表达式搜索单词示例代码
2017/09/24 Python
Python判断文件和字符串编码类型的实例
2017/12/21 Python
python 自定义异常和异常捕捉的方法
2018/10/18 Python
python cv2在验证码识别中应用实例解析
2019/12/25 Python
jupyter notebook中美观显示矩阵实例
2020/04/17 Python
Python用类实现扑克牌发牌的示例代码
2020/06/01 Python
中职生自荐信
2013/10/13 职场文书
客户接待方案
2014/02/26 职场文书
报关员个人职业生涯规划书
2014/03/12 职场文书
2014银行领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
领导班子专题民主生活会情况想汇报
2014/09/30 职场文书
幼儿园新学期开学寄语
2015/05/27 职场文书
浅谈Nginx 中的两种限流方式
2021/03/31 Servers
OpenCV-Python实现人脸磨皮算法
2021/06/07 Python
详解CSS3浏览器兼容
2022/12/24 HTML / CSS