What is the difference between directives and components in vuejs

Difference: A component generally refers to an independent entity, and the relationship between components is usually tree-like; while an instruction is a Decorator mode, used to rewrite the default behavior of a component, or enhance it to obtain For additional functions, generally speaking, several instructions can be superimposed on the same component to obtain multiple functions.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

The difference between instructions and components in vuejs

A component generally refers to an independent entity, and the relationship between components is usually tree-shaped.

The instruction is a Decorator mode, used to override the default behavior of a component, or enhance it to obtain additional functions. Generally speaking, several instructions can be superimposed on the same component to obtain a variety of Function. Some instructions will rely on the component they are applied to implement certain interfaces. For example, the transition instruction in Vue will rely on a bunch of hooks such as enter and leave of the component.

Of course, there are also some powerful instructions in vue, such as v-if and v-for, which can even create or delete components.

For example, the following design:

Gallery is a photo album component.

Transition is an animation command.

ClickLogger is an instruction to open a click log.

Overlay Animation and ClickLogger on Gallery to have animated transition effects when switching, and automatically record logs when clicked.

Related recommendations: "vue.js Tutorial"

The above is the detailed content of What is the difference between directives and components in vuejs. For more information, please follow other related articles on the PHP Chinese website!