Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities.

This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money

Module based development

Always build your app as a module, with each sub-module doing one thing.

Vue. Js is designed to help developers develop interface modules better. A module is an independent part of an application.

How to do?

Each Vue component (equivalent to a module) must first focus on solving a single problem, independent, reusable, small, and testable.

If your component does too much or becomes bloated, break it up into smaller components and keep to a single principle. As a general rule, try not to have more than 100 lines of code per file. Also ensure that the components can run independently. It is a good idea to add a separate demo example.

Vue component name

The naming of components must comply with the following principles:

  • Meaningful: not too concrete, not too abstract
  • Short: 2 to 3 words
  • Readable: easy to communicate

Also note:

  • Must conform to custom element specifications: use hyphens to separate words, never reserved words.

  • App-prefix as namespace: Use a single word if it is very general, so it can be reused in other projects.

Why is that?

Components are invoked by component names. So component names must be short, meaningful, and readable.

How to do?

<! Recommend -- -- -- >
<app-header></app-header>
<user-list></user-list>
<range-slider></range-slider>

<! - avoid -- -- >
<btn-group></btn-group> <! Short but not very readable. Use 'button-group' instead -->
<ui-slider></ui-slider> <! -- UI prefix is too broad, meaning is not clear here -->
<slider></slider> <! -- incompatible with custom element specifications -->
Copy the code

Component expression simplification

Vue. Js expressions are 100% Javascript expressions. This makes it powerful, but potentially complex. Therefore, you should keep your expressions as simple as possible.

Why is that?

  • Complex inline expressions are difficult to read.

  • Inline expressions are not universal, which can lead to repetitive coding problems.

  • IDE basically doesn’t recognize inline expression syntax, so using inline expressions IDE doesn’t provide auto-completion and syntax validation.

How to do?

If you find that you are writing too many complex inline expressions that are hard to read, you can use method or computed properties instead.

<! Recommend -- -- -- >
<template>
  <h1>
    {{ `${year}-${month}` }}
  </h1>
</template>
<script type="text/javascript"> export default { computed: { month() { return this.twoDigits((new Date()).getUTCMonth() + 1); }, year() { return (new Date()).getUTCFullYear(); }},methods: { twoDigits(num) { return ('0' + num).slice(-2); }}};</script>

<! - avoid -- -- >
<template>
  <h1>
    {{ `${(new Date()).getUTCFullYear()}-${('0' + ((new Date()).getUTCMonth()+1)).slice(-2)}` }}
  </h1>
</template>
Copy the code

Atomic component props

Although vue.js supports passing complex JavaScript objects through the props property, you should use raw type data whenever possible. Try to use only JavaScript primitive types (strings, numbers, booleans) and functions. Try to avoid complex objects.

Why is that?

  • Make component apis clear and intuitive.
  • Using only raw types and functions as props makes the component’s API more similar to HTML(5) native elements.
  • Other developers have a better understanding of what each prop means and does.
  • Passing overly complex objects makes it unclear which properties or methods are used by custom components, making code difficult to refactor and maintain.

How to do?

Each property of the component uses a props alone and uses a function or primitive type value.

Verify the props of the component

In vue.js, component props are apis, a stable and predictable API that makes your component easier to use by other developers.

The component props is passed through attributes of a custom tag. The value of the attribute can be a vue.js string (:attr=”value” or V-bind :attr=”value”) or not passed. You need to make sure that the props of the component can handle different situations.

Why is that?

Verifying component props ensures that your component is always available (defensive programming). You can’t go wrong if other developers don’t use it the way you expected.

How to do?

  • Provide default values.
  • Verify the type using the type attribute.
  • Check that the prop exists before using props.
<template>
  <input type="range" v-model="value" :max="max" :min="min">
</template>
<script type="text/javascript"> 
export default { 
    props: { 
        max: { type: Number.Default () {return 10; }},
        min: { type: Number.default() { return 0; }},value: { type: Number.default() { return 4; }},}};</script>
Copy the code

Praise support, hand left lingering fragrance, with rongyan, move your rich little hands yo, thank you big guy can leave your footprints.

Past wonderful recommendation

Front-end common encryption methods

Canvas Pit Climbing Road

Don’t know SEO optimization? An article helps you understand how to do SEO optimization

Canvas Pit Road

Wechat small program development guide and optimization practice

Talk about mobile adaptation

Front-end performance optimization for actual combat

Talk about annoying regular expressions

Obtain file BLOB stream address to achieve the download function

Vue virtual DOM confused? This article will get you through the virtual DOM once and for all

Git Git

Easy to understand Git introduction

Git implements automatic push

Interview Recommendations

Front ten thousand literal classics – the foundation

Front swastika area – advanced section

More exciting details: personal homepage