浅谈Vue初学之props的驼峰命名
更新时间：2018年07月19日 09:44:52 作者：花花呀
这篇文章主要介绍了浅谈Vue初学之props的驼峰命名，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
在vue的中文官网有这样的说明：HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名。
重申一次，如果你使用字符串模板，那么这个限制就不存在了。
以以下代码为例：
1、当组件中template及props等使用驼峰式命名，在html中对应的改成短横线命名方式。
2、当组件中template及props等使用字符串模板，在html中改成对应的小写。
源码说明：
在Vue的源码中创建Vue组件的时候createComponent()，解析组件的相关属性
// extract props var propsData = extractPropsFromVNodeData(data, Ctor, tag);
而，在extractPropsFromVNodeData()中，Vue通过调用内部方法hyphenate，把驼峰形式的属性转换为横断线形式。
除此之外，Vue在initProps()，validateProp()时，都将驼峰形式的属性转换为横断线形式。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue3双向绑定实现原理解读,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要为大家介绍了vue2从数据变化到视图变化发布订阅模式详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
watch和watchEffect都是监听器,但在写法和使用上有所区别,下面这篇文章主要给大家介绍了关于vue3中watch和watchEffect的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-05-05
这篇文章主要介绍了vue-electron项目创建记录及注意事项,本文给大家分享了运行项目报错的问题小结及多种解决方案,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了vue 优化CDN加速的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家详细介绍了vue实现div拖拽互换位置的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
下面小编就为大家分享一篇vue2.0模拟锚点的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了vue DatePicker日期选择器时差8小时问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
Vue报错ERR_OSSL_EVP_UNSUPPORTED解决方法
Vue项目启动时报错ERR_OSSL_EVP_UNSUPPORTED,本文主要介绍了Vue报错ERR_OSSL_EVP_UNSUPPORTED解决方法,具有一定的参考价值,感兴趣的可以了解一下2024-08-08
这篇文章主要介绍了如何手写简易的 Vue Router，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2020-10-10
最新评论