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

The next two links in this article “Vue development specifications (1)” “Vue development specifications (2)” serialized reading experience is better.

Assign this to the Component variable

In the vue.js component context, this refers to the component instance. So when you switch to a different context, make sure this points to an available Component variable.

In other words, if you’re using ES6, stop writing var self = this; With this code, you can safely use Vue components.

Why is that?

  • With ES6, you no longer need to store this in a variable.
  • In general, when you use arrow functions, you keep the scope of this. (The arrow function does not have its own this value; the this value in the arrow function inherits from the enclosing scope.)
  • If you’re not using ES6, and of course you’re not using the arrow function, you’ll have to save “this” to a variable. This is the only exception.

How to do?

<script type="text/javascript"> 
export default { methods: { hello() { return 'hello'; }, printHello() { console.log(this.hello()); ,}}}; </script> <! - avoid -- -- ><script type="text/javascript"> 
export default { methods: { hello() { return 'hello'; }, printHello() { const self = this; // Console. log(self.hello()); ,}}};
</script>
Copy the code

Component structuring

Organize components in a way that makes them easy to understand.

Why is that?

  • Export a clear, organized component that makes your code easy to read and understand. It also facilitates standardization.
  • Sorting properties, data, computed, watches, and Methods alphabetically makes properties within these objects easy to find.
  • Organize the components so that they are easy to read. (the name; extends; The props, the data and the computed; components; Watch and the methods; Lifecycle methods, etc.
  • Use the name attribute. Use Vue DevTools to make testing easier.
  • Reasonable CSS structure, such as BEM or RSCSS – details? .
  • Use a single file.vue file format for component code.

How to do?

Component structuring

<template lang="html">
  <div class="Ranger__Wrapper">
    <! -... -->
  </div>
</template>
Copy the code
<script type="text/javascript"> 
export default { 
// Don't forget the name attribute name: 'RangeSlider',
Extends: {},
// Component properties, variables: {bar: {},
// Alphabetical order foo: {}, fooBar: {},},
// Variable data() {}, computed: {},
// Use other components: {},
// watch: {}, methods: {},
BeforeCreate () {}, mounted() {},};
</script>

<style scoped> .Ranger__Wrapper { / *... * / } </style>
Copy the code

Component event naming

Vue. Js provides handlers and expressions that are bound to the ViewModel. Each event of a component should follow a good naming convention to avoid development problems.

Why is that?

  • Developers are free to name events, even native ones, which can be confusing.
  • Overly loose event names can be incompatible with DOM templates.

How to do?

  • Event names are also hyphenated.
  • The name of an event corresponds to a set of meaning operations outside the component, such as upload-success, upload-error, and dropzone-upload-success, dropzone-upload-error (if prefixes are required).
  • Event names should end with a verb (such as client-api-load) or an adjective (such as drive-upload-success). (source)

To avoid this. $parent

Vue.js supports component nesting, and child components have access to the parent’s context. Accessing a context outside of a component violates the first rule of module-based development. So you should avoid using this.$parent whenever possible.

Why is that?

  • Components must remain independent of each other, as do Vue components. This principle is violated if a component needs to access its parent’s context.
  • If a component needs to access its parent’s context, that component cannot be reused in other contexts.

How to do?

  • throughpropsPass the value to the child component.
  • throughpropsPass the callback function to the child component to invoke the parent component’s method.
  • Notifies the parent component by triggering events in the child component.

Use this.$refs with caution

Vue.js supports access to other components and HTML elements through the ref attribute. This.$refs lets you get the context of the component or HTML element. In most cases, accessing the context of other components through this.$refs is avoided. You need to be careful not to call improper component apis when using this.$refs, so avoid using this.

Why is that?

  • Components must be kept separate if a component’sAPIIf it does not provide the desired functionality, the component is poorly designed and implemented.
  • Component properties and events must be sufficient for most components to use.

How to do?

  • Provide good componentsAPI.
  • Always focus on the purpose of the component itself.
  • Refuse custom code. If you write code for a specific requirement inside a generic component, theAPINot generic enough, or you may need a new component to address that requirement.
  • Check allpropsIs there any missing, if there is a mention of oneissueOr refine the component.
  • Check all events. Child component communication to parent component is generally implemented through events, but most developers are more concerned with thispropsNever lost sight of it.
  • Props pass down, events pass up! . Upgrade your components with this in mind, providing good apis and independence.
  • When faced withprops 和 eventsDifficult to implement functions when passingthis.$refsTo implement.
  • When neededDOMCan be used when it is not possible to do so by commandthis.$refRather thanJQuery, Document. getElement*, Document. queryElement.
  • The basic rule of thumb is, can we notParseError: KaTeX parse error: Expected 'EOF', got '就' at position 5: refs就̲Try not to use it. If you do, try not to pass itrefsOperation status$refscallmethods.
<! $this.$refs -->
<range :max="max" :min="min" @current-value="currentValue" :step="1"></range>

<! $refs = this.$refs = this.
<modal ref="basicModal">
  <h4>Basic Modal</h4>
  <button class="primary" @click="$refs.basicModal.hide()">Close</button>
</modal>
<button @click="$refs.basicModal.open()">Open modal</button>

<! -- Modal component -->
<template>
  <div v-show="active">
    <! -... -->
  </div>
</template>
Copy the code
<script> 
export default { / /... data() { return { active: false, }; }, methods: { open() { this.active = true; }, hide() { this.active = false; }}, / /... };</script> <! -- Here is what should be avoided --> <! Avoid passing if it can be done by emitedthis.$refs --><template>
  <range :max="max" :min="min" ref="range" :step="1"></range>
</template>

<script> 
export default { / /... methods: { getRangeCurrentValue() { return this.$refs.range.currentValue; }}, / /... };
</script>
Copy the code

Use the component name as the style scope space

The components of vue.js are custom elements, which are ideal for use as the root scope space for styles. You can use the component name as a namespace for your CSS class.

Why is that?

  • Adding scoped space to styles prevents component styles from influencing external styles.
  • Keep the module name, directory name, and style root domain name the same, so that they can be well correlated and easily understood by developers.

How to do?

Use component names as prefixes for style naming, which can be based on BEM or OOCSS patterns. Attach the scoped attribute to the style tag. The scoped attribute automatically prefixes the component’s class to avoid style conflicts.

<style scoped> Recommend * / / * 
.MyExample{}.MyExample li{}.MyExample__item{}/ * avoid * / 
.My-Example{}/* Does not use component name or module name to limit scope, does not conform to BEM specification */ 
</style>
Copy the code

The next two links in this article “Vue development specifications (1)” “Vue development specifications (2)” serialized reading experience is better.

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