Vue official Code Style Guide Learning Record (1)

One, necessary

Official quote: These rules will help you avoid mistakes, so learn and accept the full cost of them. There may be exceptions, but they should be few and far between, and only if you are proficient in both JavaScript and Vue. Master hey hey hey! So here’s the question. What is mastery?

1. Component names should always be multi-word, root componentsAppAs well as<transition>,<component>Such asVueBuilt-in components are excluded.

For example,

/ /
app.component('todo', {
  // ...
})

export default {
  name: 'Todo'.// ...
}
Copy the code

/ / right
app.component('todo-item', {
  // ...
})

export default {
    name: 'TodoItem'. }Copy the code

2. propsThe definition of

For example,

/ /
// Simply write the attributes passed in
props: ['status']

Copy the code

/ / right
props: {
  status: String
}
or

// A better example
props: {
  status: {
    type: String.// Add type judgment
    required: true.// Add the required field
    
    // Add validation rules
    validator: value= > {
      return [
        'syncing'.'synced'.'version-conflict'.'error'
      ].includes(value)
    }
  }
}

Copy the code

3. Tov-forSet up thekey 值

Always add a key to v-for

For example,

/ / error
<ul>
  <li v-for="todo in todos">
    {{ todo.text }}
  </li>
</ul>

Copy the code

/ / right
<ul>
  <li
    v-for="todo in todos"
    :key="todo.id"
  >
    {{ todo.text }}
  </li>
</ul>

Copy the code

4. Avoidv-if 和 v-forAppears on the same element

For example,

/ /
<ul>
  <li
    v-for="user in users"
    v-if="user.isActive"
    :key="user.id"
  >
    {{ user.name }}
  </li>< / ul > or < ul ><li
    v-for="user in users"
    v-if="shouldShowUsers"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

Copy the code

/ / right
<ul v-if="shouldShowUsers">
  <li
    v-for="user in users"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>
Copy the code

5. Set the scope for the component style

For example,

/ / error
<template>
  <button class="btn btn-close">x</button>
</template>

<style>
.btn-close {
  background-color: red;
}
</style>

Copy the code

/ / right
<template>
  <button class="button button-close">x</button></template> <! - the use of`scoped` attribute -->
<style scoped>
.button {
  border: none;
  border-radius: 2px;
}

.button-close {
  background-color: red;
}
</style>Or < template ><button :class="[$style.button, $style.buttonClose]">x</button></template> <! -- Use CSS modules --><style module>
.button {
  border: none;
  border-radius: 2px;
}

.buttonClose {
  background-color: red;
}
</style>Or < template ><button class="c-Button c-Button--close">x</button></template> <! -- Use BEM convention --><style>
.c-Button {
  border: none;
  border-radius: 2px;
}

.c-Button--close {
  background-color: red;
}
</style>

Copy the code

6. The privatepropertyThe name of the

Avoid overwriting properties and methods on Vue instances

For example,

/ /
const myGreatMixin = {
  // ...
  methods: {
    update() {
      // ...}}} orconst myGreatMixin = {
  // ...
  methods: {
    _update() {
      // ...}}} orconst myGreatMixin = {
  // ...
  methods: {
    $update() {
      // ...}}} orconst myGreatMixin = {
  // ...
  methods: {
    $_update() {
      // ...}}}Copy the code

/ / recommend
const myGreatMixin = {
  // ...
  methods: {
    $_myGreatMixin_update() {
      // ...}}}// A better example
const myGreatMixin = {
  // ...
  methods: {
    publicMethod() {
      // ...
      myPrivateFunction()
    }
  }
}

function myPrivateFunction() {
  // ...
}

export default myGreatMixin

Copy the code

Second, the rule of priority B: highly recommended (code readability)

7. Component files

As long as there is a build system that can concatenate files, separate each component into a file. Avoid using Component to instantiate components

For example,

/ /
app.component('TodoList', {
  // ...Ponent (}) or app.com'TodoItem', {
  // ...
})
Copy the code

/ / recommendThe components / | - TodoList. Js | - TodoItem. Js or components / | - TodoList. Vue | - TodoItem. VueCopy the code

8. Case of single-file component files

The filename of a single-file component should either always start with the word uppercase (PascalCase) or always be a horizontal hyphen.

For example,

/ /Components / | - mycomponent. Vue or components / | - myCmponent. VueCopy the code

/ / recommendComponents / | - MyComponent. Vue or components / | - my - component. VueCopy the code

9. Basic component name

Basic components that apply specific styles and conventions (that is, components that present classes without logic or stateless) should all start with a specific prefix, such as Base,App, or V

For example,

/ /
components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue
Copy the code

/ / recommendComponents / | - BaseButton. Vue | - BaseTable. Vue | - BaseIcon. Vue or components / | - AppButton. Vue | - AppTable. Vue | - AppIcon. Vue or components / | - VButton. Vue | - VTable. Vue | - VIcon. VueCopy the code

10. Single component name

Components that should only have a single active instance should be named with The prefix to indicate their uniqueness.

Features: 1. A page appears only once. 2

/ /
components/
|- Heading.vue
|- MySidebar.vue
Copy the code

/ / recommend
components/
|- TheHeading.vue
|- TheSidebar.vue
Copy the code

11. Tightly coupled component names

If a parent component extends from a child component, it should be named this way.

For example,

/ /
components/
|- TodoList.vue
|- TodoItem.vue
|- TodoButton.vue


components/
|- SearchSidebar.vue
|- NavigationForSearchSidebar.vue

Copy the code

/ / recommend
// We should indicate in the filename that they are all based on the same todo.vue extension
components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue


components/
|- SearchSidebar.vue
|- SearchSidebarNavigation.vue

Copy the code

12. Order of words in component names

Component names should start with a higher-order (usually generically described) word and end with a descriptive modifier.

/ /components/ |- ClearSearchButton.vue |- ExcludeFromSearchInput.vue |- LaunchOnStartupCheckbox.vue |- RunSearchButton.vue  |- SearchInput.vue |- TermsCheckbox.vueCopy the code

components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|- SettingsCheckboxTerms.vue
|- SettingsCheckboxLaunchOnStartup.vue

Copy the code

13. Self-closing components

Components that have no content in single-file components, string templates, and JSX should be self-closing — but never in DOM templates.

Note: Self-closing components indicate that they not only have no content, but intentionally have no content.

For example,

/ /<! -- In single-file components, string templates, and JSX<MyComponent></MyComponent><! -- In the DOM template --><my-component/>
Copy the code

/ / recommend<! -- In single-file components, string templates, and JSX<MyComponent/>

// What is a DOM template<! -- In the DOM template --><my-component></my-component>
Copy the code

14. Component names in the template are case sensitive

For most projects, component names should always be PascalCase in single-file components and string templates — but kebab-case in DOM templates.

For example,

/ /<! -- In single-file components and string templates -->
<mycomponent/>

<! -- In single-file components and string templates -->
<myComponent/>

<! -- In the DOM template -->
<MyComponent></MyComponent>
Copy the code

/ / recommend<! -- In single-file components and string templates --><MyComponent/><! -- In the DOM template --><my-component></my-component><! -- In all places --><my-component></my-component>

Copy the code

15.JS/JSXThe component name used in

For example,

/ /
app.component('myComponent', {
  // ...
})

import myComponent from './MyComponent.vue'

export default {
  name: 'myComponent'.// ...
}

export default {
  name: 'my-component'.// ...
}

Copy the code

/ / recommend
app.component('MyComponent', {
  // ...
})

app.component('my-component', {
  // ...
})

import MyComponent from './MyComponent.vue'

export default {
  name: 'MyComponent'.// ...
}
Copy the code

We’re not done yet and there’s a second section. Stay tuned for…