浅谈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 相关文章推荐
网页和浏览器兼容性问题汇总(draft1)
Jun 01 Javascript
写入cookie的JavaScript代码库 cookieLibrary.js
Oct 24 Javascript
javascript unicode与GBK2312(中文)编码转换方法
Nov 14 Javascript
js中取得变量绝对值的方法
Jan 03 Javascript
jQuery基于图层模仿五星星评价功能的方法
May 07 Javascript
JavaScript每天定时更换皮肤样式的方法
Jul 01 Javascript
Javascript实现快速排序(Quicksort)的算法详解
Sep 06 Javascript
浅谈JavaScript的自动垃圾收集机制
Dec 15 Javascript
JavaScript中Math对象的方法介绍
Jan 05 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
Aug 16 Javascript
基于js 本地存储(详解)
Aug 16 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
Sep 30 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
动态网站web开发 PHP、ASP还是ASP.NET
2006/10/09 PHP
web目录下不应该存在多余的程序(安全考虑)
2012/05/09 PHP
phpmyadmin显示utf8_general_ci中文乱码的问题终级篇
2013/04/08 PHP
PHP基于PDO扩展操作mysql数据库示例
2018/12/24 PHP
Javascript的构造函数和constructor属性
2010/01/09 Javascript
JavaScript Event学习第七章 事件属性
2010/02/07 Javascript
JS简单实现元素复制示例附图
2013/11/19 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
2014/09/01 Javascript
jquery任意位置浮动固定层插件用法实例
2015/05/29 Javascript
JS模拟的Map类实现方法
2016/06/17 Javascript
Vue进度条progressbar组件功能
2018/04/17 Javascript
node.js读取Excel数据(下载图片)的方法示例
2018/08/02 Javascript
对vux点击事件的优化详解
2018/08/28 Javascript
详解angular2如何手动点击特定元素上的点击事件
2018/10/16 Javascript
jQuery HTML设置内容和属性操作实例分析
2020/05/20 jQuery
JSON 入门教程基础篇 json入门学习笔记
2020/09/22 Javascript
[06:38]DOTA2怒掀电竞风暴 2013Chinajoy
2013/07/27 DOTA
python中的lambda表达式用法详解
2016/06/22 Python
10 行 Python 代码教你自动发送短信(不想回复工作邮件妙招)
2018/10/11 Python
python 将列表中的字符串连接成一个长路径的方法
2018/10/23 Python
python 实现UTC时间加减的方法
2018/12/31 Python
pandas计数 value_counts()的使用
2019/06/24 Python
django写用户登录判定并跳转制定页面的实例
2019/08/21 Python
PyQt5.6+pycharm配置以及pyinstaller生成exe(小白教程)
2020/06/02 Python
Keras中的两种模型:Sequential和Model用法
2020/06/27 Python
Python3基于plotly模块保存图片表格
2020/08/03 Python
详解python内置模块urllib
2020/09/09 Python
凯伦·米莲女装网上商店:Karen Millen
2017/11/07 全球购物
纽约海:Sea New York
2018/11/04 全球购物
写好求职应聘自荐信的三部曲
2013/09/21 职场文书
生日宴会答谢词
2014/01/09 职场文书
幼儿园消防安全制度
2014/01/26 职场文书
媒矿安全生产承诺书
2014/05/23 职场文书
记账会计岗位职责
2014/06/16 职场文书
聊一聊python常用的编程模块
2021/05/14 Python
python 判断字符串当中是否包含字符(str.contain)
2022/06/01 Python