Article Directory
Introduction
This article introduces the most basic development specifications in the project. These are the most basic requirements. Of course, during development, development should be carried out according to the specifications required by the project. Subsequent specifications will continue to be updated.
Code style
indentation
- [Mandatory] use
4spaces as indent level, it does not allow the use of2spaces ortabcharacters - The longest one-way restrictions, each line should not exceed
120characters - Module writing order [recommended]
template->script->style
template
Root node:
template The root node is only allowed to contain one direct child node. The following situations are not allowed:
- The root node is empty;
- The root node is text;
- The root node has multiple elements;
- Use loops at the root node;
- Use template and slot at the root node;
- Use v-if at the root node, but no v-else;
// bad
<template></template>
<template>hello</template>
<template><div>one</div><div>two</div></template>
<template><div v-for="x in list"></div></template>
<template><template>hello</template></template>
<template><div v-if="title"></div></template>
// good
<template><div>one</div></template>
label:
1. The label name of the custom component must not use the label defined by default in HTML, and it must be composed of at least two words and conform to kebab-case
<template>
<other-component/>
</template>
<script>
import OtherComponent from './OtherComponent.vue';
export default {
components: {
OtherComponent
}
}
</script>
- HTML Void Element does not need to be closed, other types of tags need to be closed
<input>
<br>
Non-root node templatetag must have more than one child node
// good
<ul>
<template>
<li></li>
<li></li>
</template>
</ul>
templateNot with the labelkeyattribute
// bad
<template>
<div>
<template key="x"></template>
<template v-bind:key="y"></template>
<template :key="z"></template>
</div>
</template>
4. If there is no content in the custom label, it needs to appear in the form of a self-closing label
// good
<c-title :url="url" :label-type="type"/>
The right parenthesis tag >location:
- When the element has only one line, the closing parenthesis remains on the same line as the element.
- Multi-line elements (elements with the last property left parenthesis
<is not in the same line), right parenthesis>need to start a new line, indented with a left parenthesis<maintain alignment.
// good
<div id="foo" class="bar"></div>
// good
<div
id="foo"
class="bar"
>
some message
</div>
// good
<c-title
:text="text"
:url="url"
:label-type="type"
/>
- Self-closing tags
/>before without adding spaces
// bad
<c-title :url="url" :label-type="type" />（这有一个空格，不推荐加）
Attributes:
1. The attribute value must be in double quotes
<div class="c-color"></div>
2. The template attribute named kebab-case
slotname using kebab-case
refnaming uses PascalCase(hump)
模板
<my-component greeting-text="hi"/>
solt
<slot name="header-left"></slot>
<div slot="header-left"></div>
ref
<div ref="userInfo"></div>
3. class/ styleAttribute value cannot be set with an empty string
// bad
<div class=""></div>
<div style=""></div>
// good
<div></div>
4. boolean attribute value true, the attribute value is recommended not added
// bad
<c-title text="带箭头标题" :arrow="true"/>
// good
<input type="text" disabled>
<c-title text="带箭头标题" arrow/>
<c-title text="带箭头标题" :arrow="false"/>
5. When more than properties of a component 2when one must be divided into a plurality of rows, each row writing a property; equal to or less than the number of attributes only 2one time, can be written on one line
// bad
<c-title :text="text" :url="url" :label-type="type"/>
// good
<c-title :text="text" :url="url"/>
<c-title
:text="text"
:url="url"
:label-type="type"
/>
6. properties can not be duplicated, classand styleexcept
7. When the element has multiple attributes, it should be written in a uniform order
- Definition (provides options for components)
- is
- List rendering (creating multiple variations of the same element)
- v-for
- Conditional rendering (whether the element is rendered/displayed)
- v-if
- v-else-if
- v-else
- v-show
- v-cloak
- Rendering method (change the rendering method of the element)
- v-pre / v-once
- Global awareness (requires knowledge beyond components)
- id
- Unique characteristics (characteristics that require unique values)
- ref
- key
- slot
- Two-way binding (combining binding and event)
- v-model
- Unbound property
- Other bindings (all normal bindings)
- v-bind
- Event (component event listener)
- v-on
- Content (overwrite the content of the element)
- v-html
- v-text
instruction:
1.v-for
use v-foron the element added keyto maintain the state of the internal components and their sub-tree.
<ul>
<li class="techer-li"
v-for="(item,index) in teacherList"
:key="index"
@click="viewInformation(item.id)">
<img class="teacher-img"
:src="item.teacherImage"
alt="">
<span class="teacher-name">{
{item.teacherName}}</span>
</li>
</ul>
Suggestions
for use: 1. When v-for binds array objects, if you add objects to the array.
a. Each time you add to the end of the array, the key can use index
b. If you are not sure where to add to, make a number for each one and use the number of the object as the key
2. v-for and v-if are not recommended Also use
a. When Vue processes instructions, v-for has a higher priority than v-if.
b. So if you want to use v-if to determine whether the v-for element list is displayed, the method of applying two instructions to the same element at the same time is wrong.
Solution:
// bad
<ul>
<li
v-for="user in users"
v-if="user.isActive"
:key="user.id"
>
{
{ user.name }}
</li>
</ul>
// good
<template>
<ul>
<li
v-for="user in activeUsers"
:key="user.id"
>
{
{ user.name }}
</li>
</ul>
</template>
<script>
export default {
computed: {
activeUsers: function () {
return this.users.filter(function (user) {
return user.isActive;
});
}
}
}
</script>
Command abbreviation It is
recommended to use the abbreviation
v-bind——>:
v-on——> @
Interpolation:
Suggestion: insert a space on the left and right
// bad
<div>{
{ text }}</div>
<div>{
{text}}</div>
// good
<div>{
{ text }}</div>
Space:
Cannot contain extra spaces
// bad
<div class="foo"
:style="bar" > </div>
// good
<div class="foo" :style="bar"></div>
variable:
1. Cannot use redundant variables
2. Prohibit the use of this in interpolation
// bad
<a :href="this.url">
{
{ this.text }}
</a>
// good
<a :href="url">
{
{ text }}
</a>
js
props
1. Specify the propstype
// bad
<script>
export default {
props: ['status']
};
</script>
// good
<script>
export default {
props: {
status: String
}
};
- If
propsthere is no designatedrequiredorrequiredisfalse, you need to specify a default value
// bad
<script>
export default {
props: {
a: Number,
b: [Number, String],
c: {
type: Number
},
d: {
type: Number,
required: false
}
}
};
</script>
// good
<script>
export default {
props: {
a: {
type: Number,
required: true
},
b: {
type: [Number, String],
default: 0
},
c: {
type: Number,
default: 0,
required: false
}
}
};
</script>
3. propsThe default value provided must meet the verification conditions
// bad
<script>
export default {
props: {
propA: {
type: String,
default: {}
},
propB: {
type: String,
default: []
},
propC: {
type: Object,
default: []
},
propD: {
type: Array,
default: []
},
propE: {
type: Object,
default: {
message: 'hello'
}
}
}
};
</script>
// good
<script>
export default {
props: {
propA: Number,
propB: [String, Number],
propD: {
type: Number,
default: 100
},
propE: {
type: Object,
default() {
return {
message: 'hello'
};
}
}
}
};
4. In the propsproperty declaration, the attribute name should always comply with camelCase(camelCase)
// bad
<script>
export default {
props: {
'greeting-text': String
}
};
</script>
// good
<script>
export default {
props: {
greetingText: String
}
};
</script>
data
1.data must be a function
<script>
export default {
data() {
return {
b: 1
};
}
}
</script>
2. dataprohibit the use computedof Variable
// bad
<script>
export default {
props: {
a: {
type: String,
default: 0
}
},
data() {
return {
d: this.f
};
},
computed: {
f() {
return this.a * 10;
}
}
};
</script>
3. props, data, computed, methodscan not duplicatekey
// bad
<script>
export default {
props: {
foo: String
},
data() {
return {
foo: null
};
},
computed: {
foo() {
return 'foo';
}
}
}
</script>
// good
<script>
export default {
props: {
foo: String
},
data() {
return {
bar: null
};
},
computed: {
baz() {
return foo + bar;
}
}
}
</script>
variable
1. Cannot use reserved fields in Vue to name variables
- Vue uses _ to define its own private attributes,
- For
$a prefix, its purpose Vue ecosystem is a special instance attribute exposed to the user, so it is not suitable for private attributes.
Recommendation:
Use the combination of _ and $ as a convention for user-defined private attributes
$emit
Components used $emitto carry event parameters, the number should not exceed 2one. It recommended that the data parameters to Objectpass in a parameter to the event eventon the last
// bad
onClick(event) {
this.$emit('click', this.value1, this.value2, event);
}
// good
onClick(event) {
this.$emit(
'click',
{
value1: this.value1,
value2: this.value2
},
event
);
}
// good
onClick(event) {
this.$emit('click', event);
}
style
1. Set the scope for the component style
<style scoped>
.button {
border: none;
border-radius: 2px;
}
</style>
2. The depth selector /deep/ is recommended to add a div in front to solve the problem of the editor's popularity.