Front-end Basics Notes - VUE (2) - Moment For Technology

【 VUE Basics Video – Part 2 】

First, vue animation

1. Use the transition class name to animate

Modify the page element name attribute value to distinguish animation effects

2. Half-court animation, hook function

Done () here is equivalent to calling afterEnter()

3, list transition-group effect

If you want to animate the elements created by the V-for loop, you must set the :key property for each element

Animate the position of list elements as they change

Add “Appear” attribute to transition-group to make it appear when the page is first displayed

【 4.22 】

Two, VUE components

1. Create a component

Method 2 for creating components

Three ways to create a component

2. Create private components

Use the Components property of the Vue instance

You can use the template element

Data in the component

4, animation component switch

The parent component passes data in the props component to the child component. The data in props is read-only and cannot be reassigned. Data is readable and writable.

$emit; $emit; $emit; $emit;

The child component passes the value to the parent, passing in the parameter when $emit calls the method.

The parent component:

Child components:

Get DOM element and component references using ref

You can use $refs directly in the parent component to refer to the methods and values of the child component

Child components:

The parent component:

3. Vue routing

1. Hash mode, with # after URL, is the main mode to realize page jump of single-page program.

Generally speaking, front-end routing is only used to jump between multiple components and does not request the URL again, because the URL address has not changed, that is, back-end routing (one URL per page) has not changed.

2. Install routes