Vue(Vue2+Vue3)——25.组件的几个重要点

简介: Vue(Vue2+Vue3)——25.组件的几个重要点

25 组件的几个重要点


上面介绍了组件的创建,注册以及使用,这里就说下一些需要注意的点


25.1  单词命名组件名称


vue推荐的命名组件名称有以下几种:

首先看下组件有几个单词构成


单个单词


如果只有一个单词,那么建议全部小写,用的时候也是全部小写的,或者首字母大写

有人喜欢哪怕只有一个单词也首字母大写,因为这样可以和开发者工具对应上,开发者工具默认把组件的首字母进行大写


多个单词


如果组件名是多个单词构成的,那么官方有两种推荐命名方式:

1 全小写

2 多个单词用-作为连接

3 每一个单词的首字母都要大写(脚手架环境才支持)

我们分别去做演示

1 全小写

2 单词之间用-作为连接,注意,使用-需要用引号引起来,不然语法会报错

开发者工具会默认帮助我们把组件名称进行拼接,并且会变成首字母大写

3 每一个单词的首字母都要大写

前提:在脚手架环境中才能这么用!

查看页面发现元素没了,而且控制台还报错了,表示识别不了组件名称



25.2 不能定义已有的元素名称


已经有的html元素是不能作为组件名称的,大小写都不行

比如我这里把组件名称定义成了h1

报错:不能使用已有的元素名称作为组件名称


25.3 修改开发者工具的组件名称


一般在使用第三方库,或者大型项目开发,防止错乱,会这样使用

修改开发者工具的组件名称,也就是这个

想要修改页面上的组件名称,需要在定义组件的时候声明name属性

如果声明了name属性,开发者工具就会以name属性显示,没用定义的话就会以注册属性的key也就是组件标签为准


25.4  关于组件标签写法


有两种写法

1:开始标签结束标签都写

2:只写一个标签然后自闭合(必须保证在脚手架环境下)

效果都是一样的,但是想要使用第二种写法,必须在脚手架环境!




25.5 创建组件简写方式


创建组件可以简写的,可以不要Vue.extend,形式为:const x={options}

虽然没有写Vue.extend,但是底层是自动帮助我们调用Vue.extend了

在但文本组件中,是可以不写Vue.extend的

这种写法也是没问题的


25.6 总结


组件的几个重要点:

  • 1 关于组件名
  •  一个单词组成:
  •    第一种写法(首字母小写):school
  •    第二种写法(首字母大写):School
  •  多个单词组成:
  •    第一种写法(kebab-case命名):my-school
  •    第二种写法(CamelCase命名):MySchool(需要在vue脚手架环境)
  •  备注:
  •  (1)组件名尽量回避HTML中已有的元素名称,例如:h2,H2都不行
  •  (2)可以使用name配置指定组件名称在开发者工具呈现的名称
  •   2 关于组件标签:
  •  第一种写法:<school></school>
  •  第二种写法:<school/>
  •  3 创建组件的简写方式:
  •  const school=Vue.extend(options) 可简写为:const school=options
相关文章
|
1天前
|
JavaScript 前端开发 开发者
Vue学习之--------深入理解Vuex、原理详解、实战应用(2022/9/1)
这篇文章详细介绍了Vuex的基本概念、使用场景、安装配置、基本用法、实际应用案例以及注意事项,通过一个数字累加器的实战示例,帮助开发者深入理解Vuex的原理和应用。
|
1天前
|
JSON JavaScript 前端开发
Vue3在工作中使用的一些经验总结
这篇文章是关于Vue 3项目中使用TypeScript的一些经验总结,包括如何配置TSLint进行代码规范和类型检查,以及如何将现有的JavaScript代码迁移到TypeScript的步骤和注意事项。
Vue3在工作中使用的一些经验总结
|
1天前
|
JavaScript 前端开发 API
Vue3入门
Vue3入门
4 0
|
1天前
|
存储 JavaScript API
vue后台管理权限码处理
【8月更文挑战第19天】vue后台管理权限码处理
8 0
|
1天前
|
JavaScript
Vue学习之--------深入理解Vuex之getters、mapState、mapGetters(2022/9/3)
这篇文章深入探讨了Vuex中的getters概念和用法,以及如何通过mapState、mapGetters、mapActions和mapMutations四个辅助函数简化组件中的Vuex状态访问和操作,通过实际项目案例展示了这些概念的应用和效果。
|
4天前
|
JavaScript
Vue中如何设置在执行删除等危险操作时给用户提示(二次确认后执行对应的操作)
这篇文章介绍了在Vue项目中如何实现执行删除等危险操作时的二次确认机制,使用Element UI的`el-popconfirm`组件来弹出确认框,确保用户在二次确认后才会执行删除操作。
Vue中如何设置在执行删除等危险操作时给用户提示(二次确认后执行对应的操作)
|
4天前
|
JavaScript
如何创建一个Vue项目(手把手教你)
这篇文章是一篇手把手教读者如何创建Vue项目的教程,包括使用管理员身份打开命令行窗口、找到存放项目的位置、通过vue-cli初始化项目、填写项目信息、进入项目目录、启动项目等步骤,并提供了一些常见第三方库的引入方法。
如何创建一个Vue项目(手把手教你)
|
4天前
|
前端开发
StringBoot+Vue实现游客或用户未登录系统前、可以浏览商品等信息、但是不能购买商品或者加入购物车等操作。登录系统显示用户的登录名(源码+讲解)
这篇文章介绍了使用StringBoot+Vue实现用户登录状态判断的方法,包括前端加载用户信息和后端设置session的源码示例。
|
1天前
|
JavaScript
Vue学习之--------路由的query、params参数、路由命名(3)(2022/9/5)
这篇文章详细介绍了Vue路由中的query参数、命名路由、params参数以及props配置的使用方式,并通过实际项目案例展示了它们在开发中的应用和测试结果,同时解释了`<router-link>`的`replace`属性如何影响浏览器历史记录。
Vue学习之--------路由的query、params参数、路由命名(3)(2022/9/5)
|
1天前
|
JavaScript
Vue学习之--------VueX(2022/8/31)
这篇文章是关于VueX的基础知识介绍,涵盖了VueX中的state、mutations、getters和actions的定义和使用,以及Action提交mutation而非直接变更状态,以及mutations的同步执行特性。
Vue学习之--------VueX(2022/8/31)