拓展

vue style

分类

  • camelCased (驼峰式)
  • PascalCase (帕斯卡命名法)
  • kebab-case(短横线命名)
  • Hungarian (匈牙利命名法)

    骆驼命名法【camelCase】:

    骆驼式命令法,正如它的名称所表示的那样,是指混合使用大小写字母来构成变量和函数的名字。例如,下面是分别用骆驼式命名法和下划线法命名的同一个函数:

    printEmployeePaychecks();

    print_employee_paychecks();

    第一个函数名使用了骆驼式命名法——函数名中的每一个逻辑断点都有一个大写字母来标记;第二个函数名使用了下划线法——函数名中的每一个逻辑断点都有一个下划线来标记。

    骆驼式命名法近年来越来越流行了,在许多新的函数库和Microsoft
    Windows这样的环境中,它使用得当相多。另一方面,下划线法是c出现后开始流行起来的,在许多旧的程序和UNIX这样的环境中,它的使用非常普遍。

    帕斯卡命名法【PascalCase】:

    1. 与骆驼命名法类似。只不过骆驼命名法是首字母小写,而帕斯卡命名法是首字母大写
    2. 如:public void<br /> DisplayInfo();<br /> string UserName;<br /> 二者都是采用了帕斯卡命名法.

【在C#中,以帕斯卡命名法和骆驼命名法居多。
在C#中,简单的变量一般用camelCase规则,而比较高级的命名使用PascalCase。
如.net Framework的公共字段及公共属性。】

匈牙利命名法【Hungarian】:

广泛应用于象Microsoft Windows这样的环境中。

  1. Windows 编程中用到的变量(还包括宏)的命名规则匈牙利命名法,这种命名技术是由一位能干的 Microsoft 程序员查尔斯·西蒙尼(Charles Simonyi) 提出的。

匈牙利命名法通过在变量名前面加上相应的小写字母的符号标识作为前缀,标识出变量的作用域,类型等。这些符号可以多个同时使用,顺序是先m_(成员变量),再指针,再简单数据类型,再其他。例如:m_lpszStr, 表示指向一个以0字符结尾的字符串的长指针成员变量。

  1. 匈牙利命名法关键是:标识符的名字以一个或者多个小写字母开头作为前缀;前缀之后的是首字母大写的一个单词或多个单词组合,该单词要指明变量的用途。

匈牙利命名法中常用的小写字母的前缀:

前缀类型

  1. a 数组 (Array)
  2. b 布尔值 (Boolean)
  3. by 字节 (Byte)
  4. c 有符号字符 (Char)
  5. cb 无符号字符 (Char Byte,没有多少人用)
  6. cr 颜色参考值 (ColorRef)
  7. cx,cy 坐标差(长度 ShortInt)
  8. dw Double Word
  9. fn 函数
  10. h Handle(句柄)
  11. i 整型
  12. l 长整型 (Long Int)
  13. lp Long Pointer
  14. m_ 类的成员
  15. n 短整型 (Short Int)
  16. np Near Pointer
  17. p Pointer
  18. s 字符串型
  19. sz 以null做结尾的字符串型 (String with Zero End)
  20. w Word


简单说

MyData是一個帕斯卡命名的示例。
myData是一個骆驼命名法。
iMyData是一個匈牙利命名法,小些说明了变量的类型或者用途。

短横线命名(kebab-case)

在vue官网上有这样的一句话:
“camelCase vs. kebab-case
HTML 属性是不区分大小写的。所以,当使用的不是字符串模版,camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名: 如果你使用字符串模版,则没有这些限制。”
小森表示对这句话好懵啊!
经过自己的各种倒弄终于得到了下边的东西。
##重点在这里:
1、html特性不区分大小写:
————————————————

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>prop动态=绑定</title>
  6. <script src="vue.js"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10. <input type="text" v-model="message">
  11. <!--<child v-bind:myMEssage="message"></child>-->
  12. <child v-bind:mymessage="message"></child>
  13. <!--由于HTML的特性不识别大小写,所以“myMEssage”与“mymessage”是一样的,都解析为小写。故而下边的组件也应该是小写。-->
  14. </div>
  15. <script>
  16. Vue.component('child',{
  17. //此处都为小写。
  18. props:['mymessage'],
  19. template:'<p>{{mymessage}}</p>'
  20. });
  21. new Vue({
  22. el:'#app',
  23. data:{
  24. message:''
  25. }
  26. })
  27. </script>
  28. </body>
  29. </html>

2、组件中使用camelCased(驼峰式)命名,在html中应改为kebab-case(短横线)命名方式。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>prop动态=绑定</title>
  6. <script src="vue.js"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10. <input type="text" v-model="message">
  11. <child v-bind:my-message="message"></child>
  12. <!--此处的my-message只能是短横线命名(若为驼峰式则全部转换为小写。)-->
  13. </div>
  14. <script>
  15. Vue.component('child',{
  16. // props:['my-message'],
  17. props:['myMessage'],//props中传递的数据可以为驼峰式也可以为短横线式,他们在此处是相互转换的
  18. template:'<p>{{myMessage}}</p>'
  19. // 此处有限制,是字符串模板,{{ }}语法中不能是短横线连接方式。此处只能是驼峰命名方式。若为短横线的命名方式,则会报错。如下图:
  20. });
  21. new Vue({
  22. el:'#app',
  23. data:{
  24. message:''
  25. }
  26. })
  27. </script>
  28. </body>
  29. </html>

参考