camelCased (驼峰式) 命名与 kebab-case（短横线命名）

最新推荐文章于 2025-10-11 19:30:14 发布

原创最新推荐文章于 2025-10-11 19:30:14 发布 · 5.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #驼峰式命名 #短横线命名

vue 专栏收录该内容

34 篇文章

订阅专栏

本文探讨了在Vue开发中，由于HTML特性不区分大小写，camelCase（驼峰式）命名的prop在HTML模板中需要转换为kebab-case（短横线命名）。Vue 2.0支持驼峰式命名，但在HTML模板中仍推荐使用短横线命名。Vue.js提供了基于HTML的模板语法，所有模板都是合法HTML，因此需要遵循HTML的大小写规则。

部署运行你感兴趣的模型镜像

HTML 特性是不区分大小写的。所以，当使用的不是字符串模板时，camelCase (驼峰式命名) 的 prop 需要转换为相对应的 kebab-case (短横线分隔式命名)：

Vue.component('child', {
  // 在 JavaScript 中使用 camelCase
  props: ['myMessage'],
  template: '<span>{{ myMessage }}</span>'
})

<!-- 在 HTML 中使用 kebab-case -->
<child my-message="hello!"></child>

如果你使用字符串模板，则没有这些限制。

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。

vue 2.0 支持驼峰式命名

html不区分大小写，所以组件里面的驼峰式命名，短横线命名，已经单词首字母大写，在html中都会转换成短横线

vue里面有转换方法：

var hyphenateRE = /([^-])([A-Z])/g;
var hyphenate = cached(function (str){
    return str
    .replace(hyphenateRE, '$1-$2')
    .replace(hyphenateRE, '$1-$2')
    .toLowerCase()
})

cached是生成函数的一个带缓存的版本

function cached(fn) {
    var cache = Object.create(null);
    return (function cachedFn(str){
        var hit = cache[str];
        return hit || (cache[str] = fn(str))
    })
}