I. Project development process

1. Create projects

One is to create a project through the CLI command line, and the other is to create a project through a graphical interface. I personally feel that creating a project through a graphical interface is relatively simple and convenient.

2. Download dependencies

  • Vue-router: A router must be installed manually
  • Element UI: I particularly recommend this component library, which has enough components to handle normal project development
  • Axios: Used to initiate Ajax requests, set up interception requests and responses, and so on
  • · · · · · ·

3. Development projects

This development is an e-commerce background management system, the main page has a login page and management page (content page), these two are brothers, the other are management page sub-components, sub-components are all placed in the Components folder; The assets folder contains the assets you want to use. You can put pictures or fonts in it. The Router folder is used to configure routes. The next step is to develop projects according to user needs, add components and improve functions.

4. Test functionality

After the completion of the project, it is necessary to conduct a complete test on its functions, find out the unrealized functions and unreasonable phenomena, and modify and optimize them

Second, problems encountered in the development process

1. Navigation reuse

In nearly every page navigation path information, you can reference element UI breadcrumb navigation components inside, but if every page to write again, also be quite a waste of time, so in order to simplify the code, on the reuse, navigation path in routing configuration to add information, only need the component in the bread crumbs navigation component reference directly to come over, Then mount it and register it

2. Implement communication between parent and child components

Components are one of the most powerful features of vue.js, and component instances are scoped independently of each other, so data between different components cannot refer to each other. Data between parent and child components can only be transferred from top to bottom, not upstream. This is the one-way data flow that Vue is designed for.

props

A child component receives a value from the parent component in its props property. This is unidirectional binding, that is, only the parent component can be transmitted to the child component, not the other way around.

$ref

Communication is achieved through $ref, which registers reference information for child components. The reference information will be registered with the parent component’s $refs object, at which point the parent component can call the child component’s methods through $refs. If ref is used on a child component, it refers to the instance of the component and can be understood as an index to the child component. $ref can be used to retrieve properties and methods defined in the child component.

$emit

$emit communicates via $emit. $emit binds to a custom event demo. When the statement is executed, the arG parameter is passed to the parent component, which listens and receives the parameter via @demo.

Use 3.v-forThe code always displays a warning as it iterates through the array

:key is used to indicate that the data is unique. If the key is not added, vUE will reuse the previous node after deleting one of the data. If the deleted node has left options, data will be confused. Simply put, without the :key attribute, the state is bound to the position by default; With the :key attribute, the state is bound to the corresponding array element based on the :key attribute value.

Third, summary

Three ways to communicate between parent and child componentsprop,$refand$emitThe difference between

Prop focuses on data passing and does not invoke properties and methods in child components. $ref focuses on indexes and is used to invoke attributes and methods in child components, rather than data passing. The first two methods of $EMIT allow the parent component to communicate with the child component, while $emit allows the child component to communicate with the parent component.

v-forIn the:key

Instead of using index as the :key value, data obtained from a database generally has a unique id. If you use the index as the key, the index changes from 1, 2, 3 to 1, 2 when you delete the second item (because the index is always contiguous, so it can’t be 1, 3), then Vue still thinks you deleted the third item.

A router is a route

Route is the current router jump object, which can obtain name, path, query, params and other router instances of VueRouter. To navigate to different urls, router.push is used

Elastic layout

———— Flex layout (flexible layout) Flex layout is one of the new features of CSS3, it is quite convenient to use, the following attached I found on the web commonly used layout links: blog.csdn.net/qq_34648000… This is the explanation links: www.jianshu.com/p/15519b7a9…