【vue】命名规范

最新推荐文章于 2024-10-15 15:33:24 发布
最新推荐文章于 2024-10-15 15:33:24 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： vue2.0 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangank/article/details/122473077
版权

VUE前端项目命名规范

参考Vue.js官方风格指南；

一、常见命名风格

  • PascalCase (大驼峰命名法)
  • camelCase (驼峰命名法)
  • kebab-case (短横线分隔命名)

二、具体使用

特别的，项目名可以使用下划线，vue_test或vue-test

1、PascalCase
  • 组件name：name: "TestSm",
  • 组件导入：import InputGroup from "..";
  • 组件使用标签（为了区别第三方的短横线命名组件）<InputGroup></InputGroup>
  • 自定义-文件夹名：src\components\InputGroup\index.vue
2、camelCase
  • 接收时props属性名：props: ['postTitle']
  • 插槽名：<slot name="headerA"></slot>
  • 插槽prop：<template v-slot:default="slotProps">
  • 类名（为了区别第三方类名）
  • 自定义-文件名：
3、kebab-case
  • 传入时prop属性
<blog-post post-title="hello!"></blog-post>
  • 抛出事件名、监听事件名
  • 类名（区分前缀）
  • id
ANKG
关注
专栏目录
Vue命名规范及编程指南
2301_79326254的博客
10-07 195
通过遵循这些命名规范，可以使你的Vue代码更加一致、易读和易于维护。当然，这些规范只是指导性的，你也可以根据自己的团队需求进行适当的调整。重要的是在整个团队中保持一致性，以提高协作效率。在Vue开发中，良好的命名规范是非常重要的，它有助于提高代码的可读性、可维护性和协作性。本文将介绍一些常用的Vue命名规范，并通过示例代码演示如何应用这些规范。希望本文对你在Vue编程中的命名规范有所帮助。如果你有任何问题，请随时提问。
前端通用命名规范和Vue项目命名规范
web工程师——小发发
03-29 798
函数和方法命名：函数和方法的命名应该能够准确描述其功能，使用动词开头，使用驼峰命名法，例如：calculateSum()、getUserInfo()。变量和常量命名：变量和常量的命名应具有描述性，清晰明了，使用驼峰命名法或下划线命名法，例如：firstName、MAX_VALUE。类和接口命名：类和接口的命名应具有描述性，使用名词或名词短语，使用驼峰命名法，例如：Person、OrderService。注释和文档命名：注释和文档内容的命名应具有描述性，清晰明了，能够准确表达其含义和作用。
[前端|vue] vue中的class命名规范
梦醒贰零壹柒
05-16 769
【代码】[前端|vue] vue中的class命名规范。
vue规范 命名规范
weixin_45954124的博客
11-25 293
初始化vue项目 vue init webpack deaxios # 使用脚手架创建项目 deaxios（项目名，随便取得） cd deaxios # 进入项目 npm install axios@0.19.2 # 安装axios npm i element-ui -S # 安装element-ui到当前项目 前端项目结构规范 命名规范 1、组件命名 官网对组件名大小写是这么介绍的，定义组件名的方式有两种： 使用kebab-case（短横线） 短横线 使用 PascalCa
Vue 项目开发规范
最新发布
m0_65780450的博客
10-15 658
必须使用 camelCase 驼峰命名必须指定类型必须加上注释，表明其含义必须加上 required 或者 default，两者二选其一如果有业务需要，必须加上 validator 验证正例：props: {// 组件状态，用于控制组件的颜色status: {== -1• }},// 用户级别，用于显示皇冠个数规范的目的是为了编写高质量的代码，让你的团队成员每天得心情都是愉悦的，大家在一起是快乐的。
vue项目开发简单命名规范和vue页面顺序
未来以来 futureToday
08-02 1021
命名规范 1、图片命名： xx xx_xx 2、scss样式命名： .xx-xx {} .xx {} 3、js变量命名： 小驼峰命名方式(xxXxx) 4、js常量命名： 采用全大写(XXX) 5、vue组件命名：product-select 组件中的： name: xxx-xxx （采用大驼峰命名） vue开发使用的基本模板结构顺序 <template> <div class="class-1"> <h2>{{msg}}</h2>
vue添加class类名
weixin_30877227的博客
05-11 203
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> ...
vue.js基础学习（class类名与style样式的使用方式）
qq_58866450的博客
08-19 1086
基础入门：vue.js class类名的使用方式
vue开发命名规范
天上白玉京，十二楼五城，仙人抚我顶，结发授长生
07-25 260
props应该定义返回值的类型，最好更加详细。
关于vue组件内部命名规范的一些思考和意见
01-20
在Vue组件中，有几个关键的区域需要考虑命名规范： 1. **组件名**：Vue推荐使用kebab-case（短横线分隔）命名组件，例如`my-component`。这样做可以使组件名在HTML中看起来更清晰，同时遵循Web组件的标准。 2. **...
Vue前端开发规范.pdf
10-29
二、变量命名规范 在编码过程中，命名应遵循以下规则： 1. 命名首选完整的单词，如果单词过长，可适当缩写，缩写在可能产生歧义时后面应附注释说明。 2. 数据内容已知的情况下，优先从数据内容的角度进行命名，其次...
Vue最全项目命名规范
热门推荐
u011269322的博客
09-16 1万+
Vue最全项目规范一、命名规范1.1 项目文件命名1.1.1 项目名1.1.2 目录名1.1.3 图像文件名1.1.4 HTML 文件名1.1.5 CSS 文件名1.1.6 JavaScript 文件名 一、命名规范 市面上常用的命名规范： camelCase （小驼峰式命名法–首字母小写） PascalCase （大驼峰式命名法–首字母大写） kebab-case（短横线连接式） Snake（下划线连接式） 1.1 项目文件命名 1.1.1 项目名 全部采用小写方式，以短横线分隔。例：my-proje
vue 动态添加class类名
漫天随飞雪的博客
09-09 2051
<template> <div> <h2>动态添加类名</h2> <!-- 第一种方式:对象的形式 --> <!-- 第一个参数 类名， 第二个参数：boolean值 --> <!-- 对象的形式: 用花括号包裹起来，类名用引号， --> <!-- 优点: 以对象的形式可以写多个，用逗号分开 --> <p :class="{'p1' : true...
vue 动态添加类名class
josiecici的博客
04-28 1326
<template> <div> <h2>动态添加类名</h2> <!-- 第一种方式:对象的形式 --> <!-- 第一个参数 类名， 第二个参数：boolean值 --> <!-- 对象的形式: 用花括号包裹起来，类名用引号， --> <!-- 优点: ...
前端VUE命名规范
WayneP_的博客
07-05 1528
刚开始做前端 命名不规范 少不了被说 也不利于与同事们一起开发 所以问了下公司大佬 以后写代码都按规范来!!! 组件名 — 大驼峰 class类名 — 连字符 方法名 — 小驼峰 常量(const) — 全大写 变量(let) — 小驼峰 判断都使用 === ...
vue 驼峰命名转换为下划线命名
qq_42619759的博客
03-09 1345
<template> <div></div> </template> <script> export default { name: '', data() { return {} }, mounted() { let str = 'textName' const regular = /^[A-Z]+$/ let arr = str.split('') let i = [] arr
Vue.js(2)：简单理解Vue
dawn0718的专栏
09-27 648
　　1、框架是为了解决开发的复杂度，Vue框架就是为了简化模板渲染、事件绑定和用户交互等问题而产生的。 　　Vue是MVVM模型，即视图（View）-视图模型（ViewModel）-模型（Model）。 　　有了Vue的ViewModel，数据以及与数据相关的界面是联动的，中间的桥梁就是ViewModel。 　　2、当创建一个新的Vue实例时【new Vue()】时，()括号内传递的是一个包含了数据、模板、挂载元素、方法、生命周期钩子等的对象，这些都被添加到Vue的响应系统中。 　　响应式系
Vue 前端代码风格指南
Mr.小灰狼_随笔
08-17 5498
Vue 前端代码风格指南 代码规范是一个非常重要的事情 ，很多企业都有自己的代码规范体系 ，而在不同阶段体系 HTML 、CSS、JS 也有代码规范 ! 那么到了后期框架和库阶段规范你知道吗 ? 今天为大家分享一组热门框架 VUE 的代码风格规范指南 ， 希望后续在写 Vue 方面代码有所帮助 ! 目录 一、命名规范 1.1、项目文件命名 1.2、Vue 组件命名 1.3、代码参数命名 二、代码规范 2.1、Vue 2.2、HTML 2.3、CSS 2.4、JavaScript 三、注释规范 四、其它...
vue 插槽 slot 使用教程
悟世君子的博客
02-15 3625
在 vue 中使用插槽 slot，内容如下 1、直接使用 新建组件 Article <template> <div> 日期:2022-01-15 <slot></slot> </div> </template> 新建 Learn，并在 Learn 中使用 Article Learn.vue 和Article.vue 在同一文件夹下 <template> .
vue 组件命名规范
10-10
Vue 组件命名规范一般遵循以下几点： 1. 组件名称应使用帕斯卡（Pascal）命名法，即每个单词首字母大写，不使用连字符或下划线。例如：MyComponent。 2. 组件名称应该具有描述性，可以清楚地表达组件的功能或用途...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值