标签:good views 规范 vue 单词 bad Vue 命名
参考链接:
1: https://www.cnblogs.com/amylis_chen/p/11331455.html
2: https://www.cnblogs.com/zhanglw456/p/12761008.html
1. 组件名
官方推荐的组件名是 每个单词首字母大写(PascalCase) 或者 全小写用 - 连接(kebab-case) 。 在DOM中使用的时候, 改为全小写, 单词之间用 - 连接。
Vue.component('MyComponent', {}); 或者 Vue.component('my-component', {});
import MyComponent from 'MyComponent.vue';
export default {
name: 'MyComponent'
}
// 在DOM中使用的时候, <my-component></my-component>
2,props
声明 prop的时候, 使用驼峰命名(myProps), 模板中使用的时候, 用 - 连接(my-props)
props: {
myProps: {}
}
// DOM: <my-component :my-props="abc"></my-component>
3,自定义事件名
因为html对大小写不敏感,所以大写的都会被转为小写的。 所以推荐 都用 -连接来命名。
this.$emit('my-event');
// DOM: <my-component @my-event="abc"></my-component>
4. views 命名
views 文件夹下面是由 以页面为单位的vue文件 或者 模块文件夹 组成的,放在 src 目录之下,与 components、assets 同级。
views 下的文件夹命名
- views 下面的文件夹代表着模块的名字
- 由名词组成(car、order、cart)
- 单词只能有一个(good: car order cart)(bad: carInfo carpage)
- 尽量是名词(good: car)(bad: greet good)
- 以小写开头(good: car)(bad: Car)
views 下的 vue 文件命名
- views 下面的 vue 文件代表着页面的名字
- 放在模块文件夹之下
- 只有一个文件的情况下不会出现文件夹,而是直接放在 views 目录下面,如 Login Home
- 尽量是名词
- 大写开头,开头的单词就是所属模块名字(CarDetail、CarEdit、CarList)
- 名字至少两个单词(good: CarDetail)(bad: Car)
- 常用结尾单词有(Detail、Edit、List、Info、Report)
- 以 Item 结尾的代表着组件(CarListItem、CarInfoItem)
vue 方法命名
vue 方法放置顺序
- components
- props
- data
- created
- mounted
- activited
- update
- beforeRouteUpdate
- metods
- filter
- computed
- watch
method 自定义方法命名
- 动宾短语(good:jumpPage、openCarInfoDialog)(bad:go、nextPage、show、open、login)
- ajax 方法以 get、post 开头,以 data 结尾(good:getListData、postFormData)(bad:takeData、confirmData、getList、postForm)
- 事件方法以 on 开头(onTypeChange、onUsernameInput)
- init、refresh 单词除外
- 尽量使用常用单词开头(set、get、open、close、jump)
- 驼峰命名(good: getListData)(bad: get_list_data、getlistData)
data props 方法注意点
- 使用 data 里的变量时请先在 data 里面初始化
- props 指定类型,也就是 type
- props 改变父组件数据 基础类型用 $emit ,复杂类型直接改
- ajax 请求数据用上 isLoading、isError 变量
- 不命名多余数据,现在是详情页、你的数据是 ajax 请求的,那就直接声明一个对象叫 d,而不是每个字段都声明
- 表单数据请包裹一层 form
生命周期方法注意点
- 不在 mounted、created 之类的方法写逻辑,取 ajax 数据,
- 在 created 里面监听 Bus 事件
标签:good,views,规范,vue,单词,bad,Vue,命名 来源: https://blog.csdn.net/ChyoD1811/article/details/119407918
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。