精通Vue.js系列 │ Vue组件的命名规则每个Vue组件都有一个名字。组

文章图片
每个Vue组件都有一个名字。组件的名字可以采用lower-kebab-case（小写且短横隔开）或者upper-camel-case（大写且驼峰式）命名规则。
1
Vue组件的命名规则
lower-kebab-case命名规则的约束条件如下。
（1）名字中的所有字符采用小写。
（2）名字中的单词以符号“-”隔开，如my-component-name 。
upper-camel-case命名规则也称为pascal-case命名规则，约束条件为：名字中的每个单词的首字母都采用大写，如MyComponentName 。
组件的模板按照定义的位置区分，可分为两种：外置模板和在组件的template选项中定义的模板。在这两种模板中引用其他组件的命名规则时会有一些区别，参见表1 。
■表1在模板中引用组件的命名规则
从表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的组件，例如：
constapp=Vue.createApp({
【精通Vue.js系列 │ Vue组件的命名规则】…
//upper-camel-case命名规则
template:''
})
或者
constapp=Vue.createApp({
…
//lower-kebab-case命名规则
template:''
})
如果是在外置模板中使用以上名为MyComponentName的组件，那么只能采用lower-kebab-case命名规则，例如：
<my-component-name>my-component-name>
div>
<MyComponentName>MyComponentName>
div>
对于组件的属性和事件，它们的名字可以遵守lower-kebab-case或者lower-camel-case命名规则。 lower-camel-case命名规则的约束条件为：名字中第一个单词的首字母小写，其余单词的首字母大写。例如， nameOfStudent符合lower-camel-case命名规则， name-of-student符合lower-kebab-case命名规则。
表2列出了在模板中引用组件的属性的命名规则，这一规则也适用于组件的事件。
■表2在模板中引用组件的属性的命名规则
2
参考书籍

文章图片
《精通Vue.js：Web前端开发技术详解（微课视频版）》
详细阐述用Vue框架的各种技术；深刻揭示前端开发的响应式编程核心思想；介绍与其他流行技术的整合；典型范例帮助读者迅速获得实战经验。
作者：孙卫琴，杜聚宾
上一页123下一页价格：119元
扫码优惠购书

文章图片

文章图片
实例讲解
精通Vue.js：
Web前端开发技术详解

文章图片
下期预告
2.注册全局Vue组件和局部Vue组件
3.路由导航中抓取数据
4.路由管理器的基本用法
5.命名路由
6.CSS中DOM元素的过渡模式
7.插槽slot的基本用法
8.组件的递归
9.在Vue项目中使用Axios
10.自定义指令v-drag范例
11.Vuex中的异步操作