一,、Vie編碼基礎(chǔ)程序員寫好看的代碼，不亞于寫一行好看的字
好看的代碼總是讓人心曠神怡,，
不好,，不規(guī)范的代碼，讓人看了想說(shuō)mmp,，
那我們就來(lái)學(xué)習(xí)一下規(guī)范的代碼怎么寫的吧 以下來(lái)自B站的學(xué)習(xí)視頻：前端必備-阿里大廠前端開發(fā)規(guī)范,！ vue項(xiàng)目規(guī)范以 Vue 官方規(guī)范（https://cn./v2/style-guide/）中的A規(guī)范為基礎(chǔ) (一) 組件規(guī)范1、組件名為多個(gè)單詞組件名應(yīng)該始終是多個(gè)單詞的,，且命名規(guī)范為 KebabCase格式 這樣做可以避免跟現(xiàn)有的以及未來(lái)的 HTML 元素相沖突,，因?yàn)樗械?HTML 元素名稱都是單個(gè)單詞的。 正例： export default {
name: 'TodoItem',
...}
反例： export default {
name: 'Todo',
// ...}Vue.component('todo', {
// ...})
2,、組件名稱為 pascal-case 格式正例： my-component.vue
反例： myComponent.vue
3,、為基礎(chǔ)文件名為 base開頭，使用完整單詞正例： base-button.vue
反例： MyButton.vue
4,、和父組件緊密契合的子組件以父組件名為前綴名父組件：todo-list.vue 正例： todo-list-item.vue
todo-list-button.vue
反例： todoItem.vue
5,、在 template 模板中使用組件，應(yīng)使用 PascalCase 模式，并且使用自閉合組件正例： <!-- 在單文件組件和字符串模板中 --><MyComponent/>
<!-- 在 DOM 模板中 或者 在所有地方 --><my-component></my-component>
反例： <!-- 在單文件組件和字符串模板中 --><myComponent/>
6,、組件的 data 必須是一個(gè)函數(shù),。正例： // In a .vue fileexport default {
data () {
return {
foo: 'bar'
}
}}
反例： export default {
data: {
foo: 'bar'
}}
7、Props定義應(yīng)該盡量詳細(xì)正例： props: {
// 組件狀態(tài),，用于控制組件的顏色
status: {
type: String,
required: true,
validator: function (value) {
return {
'succ',
'info',
'error'
}.indexOf(value) !== -1
}
}
}
8,、為組件樣式設(shè)置作用域寫CSS樣式時(shí)，加上 作用域 scope 正例： <stype scoped>
.btn-close {
font-size: 16px;
}
</style>
9,、如果特性元素過多,，應(yīng)主動(dòng)換行正例： <MyConponent foo="a" bar="b"
baz="z" />
(二) 模板中使用簡(jiǎn)單的表達(dá)式組件模板中應(yīng)該只包含簡(jiǎn)單的表達(dá)式，如果有復(fù)雜的表達(dá)式,，應(yīng)該使用計(jì)算屬性或法 正例： <!-- 在模板中 -->
{{ normalizedFullName }}
// 復(fù)雜表達(dá)式已經(jīng)移入一個(gè)計(jì)算屬性
computed: {
normalizedFullName: function () {
return this.fullName.split(' ').map(function (word) {
return word[0].toUpperCase() + word.slice(1)
}).join(' ')
}
}
(三) 指令使用縮寫形式指令縮寫 (用 : 表示 v-bind: ,、用 @ 表示 v-on: 和用 # 表示 v-slot:) 應(yīng)該要么都用要么都不用。 (四) 標(biāo)簽順序保持一致<template>...</template>
<script> ... </script>
<style> ... </style>
(五) script標(biāo)簽內(nèi)部解構(gòu)順序components --> props --> data --> computed --> watch --> filter --> 鉤子函數(shù) --> methods
|
