Shopping cart GitHub: GitHub - TsundereAchen/Vue-Demo
Slot
- It is the ability of Vue to encapsulate components, allowing users to define uncertain and user-specified parts as slots during development.
- Vue stipulates that slots must have a name. If omitted, the name is default.
- Scope slot: v-slot can only be placed in template or component.
- The template tag is a virtual tag that only functions as a wrapper and will not be rendered into any HTML element.
- Backup content can be declared in the slot. When the user does not specify the fill content to be displayed, the instruction overrides the default content.
Dynamic instructions
Dynamically control the hiding or display of components.
Component is a built-in component of Vue. It functions as a label placeholder. The is attribute is to display the name of the component. This name is the name registered under the component node.
<component is="Left"></component>
Custom instructions
Directives are divided into global and private directives, and the registration method is similar to filters.
The custom instruction triggers the bind function.
The bind function takes effect when it is bound for the first time. It takes effect when the update data changes. It does not take effect the first time.
If the logic of bind and update is the same, the custom instruction can be abbreviated as a function.
directives: {
color: {
bind(e, binding) {
e.style.color = binding.value;
}
}
} <p class="pp" v-color="'pink'">{
{ count }}</p>