VueJs programming specification

Good programming practices can reduce the probability of error, good coding habits good people write code readability, maintainability, standard coding style habits, reduce communication costs between the teams. This article describes the coding standards VueJS

Component called multiple words

Component name should always be more than one word, the root component Appand <transition>, <component>except like the built-in components. Doing so avoids with existing and future HTML elements of conflict, because it is the name of the HTML element is a single word.

// 错误
 Vue.component('html', {
      template: `
      <h2>{{ name }}</h2>
    `,
      data() {
        return {
          name: 'jack'
        }
      }
    })
// 正确
 Vue.component('k-html', {
      template: `
      <h2>{{ name }}</h2>
    `,
      data() {
        return {
          name: 'jack'
        }
      }
    })

When using the program name as a component of HTML elements will complain

Component data

Component datamust be a function, when used in the assembly datatime of the attribute (anywhere except the new Vue), it must return a value of the object function.
When the datavalue is a target, it will be shared among all instances of this component.

// 错误
 Vue.component('k-html', {
      template: `
      <h2>{{ name }}</h2>
    `,
      data: {
        name: 'jack'
      }
    })
// 正确
Vue.component('k-html', {
      template: `
      <h2>{{ name }}</h2>
    `,
      data() {
        return {
          name: 'jack'
       }
     }
  })

Prop definitions

PropDefinition should be as detailed as possible, in the code you submitted, propthe definition should be as detailed as possible, at least need to specify its type. Benefits include:

• They stated the API components, all easily understand the use of components;
• In the development environment, if provided to a malformed component prop, Vueit will be a warning to help you catch potential sources of error.

// 错误做法
Vue.component('k-html', {
      template: `
      <h2>{{ name }}</h2>
    `,
      props: ['age'],
      data() {
        return {
          name: 'jack'
        }
      }
    })
// 正确做法
 Vue.component('k-html', {
      template: `
      <h2>{{ name }}</h2>
    `,
      props: {
        age:{
          type:Number,
          require:true
        }
      },
      data() {
        return {
          name: 'jack'
       }
     }
  })

Set the key to v-for

Always keycooperate v-forso as to maintain the internal components and its sub-tree status. Even maintaining predictable behavior on the element.

// 错误
 <div id="app">
      <k-html :age="21"></k-html>
      <ul>
        <li v-for="(item) in list">{{ item.name }}</li>
      </ul>
  </div>
// 正确
 <div id="app">
      <k-html :age="21"></k-html>
      <ul>
        <li v-for="(item) in list" :key="item.id">{{ item.name }}</li>
      </ul>
 </div>

Avoid v-forand v-ifused together

Never put v-ifand v-forsimultaneously used on an element, because the v-forratio v-ifof higher priority, because there may exist, I will render the list, but the list does not meet the conditions for this show, so do not show.

// 错误
      <ul>
        <li v-if="isShow" v-for="(item) in list" :key="item.id">{{ item.name }}</li>
      </ul>
// 正确
      <ul>
        <template v-if="isShow">
          <li v-for="(item) in list" :key="item.id">{{ item.name }}</li>
        </template>
      </ul>

Set up the scope for a component style

For applications, the top-level Appassembly and component layout styles can be global, but all other components should be scoped

<style scoped>
.cls {
  border: none;
  border-radius: 2px;
}
.btn-cls {
  background-color: red;
}
</style>

Private property name

Use module scope remain private function does not allow external access. If this is not possible, it is always plug-ins, mixing, etc. are not considered as external public API custom private property use $_the prefix. And comes with a namespace to avoid conflict with other authors.

Vue use _the prefix to define their own private property, so use the same prefix risk of overwriting instance attributes.

    const app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!',
        isShow: true,
        list: [
          {
            id: 1,
            name: 'jack'
          },
          {
            id: 2,
            name: 'tom'
          },
          {
            id: 3,
            name: 'mary'
          }
        ]
      },
      methods: {
        $_k_update() {
          
        }
      },
    })