>>分享孙卫琴的Java技术专稿和著作 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 8535 个阅读者 刷新本主题
 * 贴子主题:  【Vue.js技术专题】Vue组件的命名规则 回复文章 点赞(0)  收藏  
作者:sunweiqin    发表时间:2022-08-29 17:53:23     消息  查看  搜索  好友  邮件  复制  引用

本文参考孙卫琴,杜聚宾所创作的 <<精通Vue.js: Web前端开发技术详解>>一书

每个Vue组件都有一个名字。组件的名字可以采用lower-kebab-case(小写并且短横隔开)或者upper-camel-case(大写并且驼峰式)命名规则。lower-kebab-case命名规则的约束条件为:
(1)名字中的所有字符采用小写。
(2)名字中的单词以符号“-”隔开,例如“my-component-name”。

upper-camel-case命名规则也称为pascal-case命名规则,约束条件为:名字中的每个单词的首字母采用大写,例如“MyComponentName”。

组件的模板按照定义的位置区分,可分为两种,一种是外置模板,另一种是在组件的template选项中定义的模板。在这两种模板中引用其他组件的命名规则有一些区别,参见表1。

点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小

从表1可以看出,无论组件的名字采用lower-kebab-case或者upper-camel-case命名规则,在外置模板中总是使用lower-kebab-case命名规则。这是因为HTML语言不区分大小写,在外置模板中采用lower-kebab-case命名规则,可以避免组件名字与现在以及将来的HTML元素的名字发生冲突。

以下代码按照upper-camel-case命名规则定义了一个名为“MyComponentName”的组件:
app.component('MyComponentName', {
  /* ... */
})

在父组件的template选项指定的模板中,可以按照lower-kebab-case或upper-camel-case命名规则来使用以上名为“MyComponentName”的组件,例如:

     const app=Vue.createApp({
       ……  
       //upper-camel-case命名规则
       template:'<MyComponentName></MyComponentName>'  
     })

或者:
     const app=Vue.createApp({
       ……  
       //lower-kebab-case命名规则
       template:'<my-component-name></my-component-name>'  
     })

如果是在外置模板中使用以上名为“MyComponentName”的组件,那么只能采用lower-kebab-case命名规则,例如:

<div id="app">
  <my-component-name></my-component-name >
</div>

假如在外置模板中插入<MyComponentName >组件,Vue反而不能识别:

<div id="app">
  <!-- Vue认为是未定义的组件 -->
  <MyComponentName></MyComponentName>
</div>

对于组件的属性和事件,它们的名字可以遵守lower-kebab-case或者lower-camel-case命名规则。lower-camel-case命名规则的约束条件为:名字中第一个单词的首字母小写,其余单词的首字母大写。例如“nameOfStudent”就是符合lower-camel-case命名规则的属性名,“name-of-student”是符合lower-kebab-case命名规则的属性名。

表2列出了在模板中引用组件的属性的命名规则,这一规则也适用于组件的事件。

点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小




程序猿的技术大观园:www.javathinker.net
  Java面向对象编程-->Swing组件(下)
  JavaWeb开发-->在Web应用中访问Web服务
  JSP与Hibernate开发-->Java应用分层架构及软件模型
  Java网络编程-->通过JavaMail API收发邮件
  精通Spring-->创建综合购物网站应用
  Vue3开发-->创建综合购物网站应用
  【Vue.js技术专题】命名路由
  【Spring Cloud Alibaba专题】@SentinelResource注解的用法
  【Spring Cloud Alibaba专题】OpenFeign开启对请求和响应数据...
  【Java基础编程专题】使用和创建JavaDoc文档
  【Java基础编程专题】浮点数的格式化以及运算精度
  【Spring专题】@ControllerAdvice注解的用法
  【Spring专题】RestTemplate类与RESTFul风格的请求
  【Spring专题】Spring框架的数据验证机制
  视频:我的Java课堂总动员,带领小白们走马观花看Java江湖
  【持久化专题】映射对象标识符的基本原理
  【持久化专题】@Access注解设定Hibernate访问类的属性的方式
  【持久化专题】Hibernate的配置文件
  【持久化专题】JPA API的基本用法
  【Java网络编程专题】盘点用Java抓取HTTP服务器和FTP服务器的...
  【Java网络编程专题】创建基于SSL的安全服务器和安全客户的范...
  更多...
 IPIP: 已设置保密
楼主      
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


中文版权所有: JavaThinker技术网站 Copyright 2016-2026 沪ICP备16029593号-2
荟萃Java程序员智慧的结晶,分享交流Java前沿技术。  联系我们
如有技术文章涉及侵权,请与本站管理员联系。