This article will teach you how to create vue projects and use vue

I. Project Background

In some of the administrator’s background pages, the data list will add, delete, change and check the operation of these data, such as the administrator to add goods, modify the price of goods, delete goods, query goods, we should pay attention to the operation and processing of these data.

【 II. Project Objectives 】

There are five main objectives:

1. How to create a VUE project.

2. Data adding method: Get id and name on data, organize an object, add the object to a customized array of the current data through the relevant method of array, and use Model data operation in VM.

3. Data deletion method: Find the index value of the item to be deleted according to the ID, and call the splice method of the array after finding it.

4. Data modification method: Find the index value of the item to modify according to the Id, and the data will be changed after finding the index value.

5. Data query methods: In ES6, there is a new method for strings:

String. The prototype. Includes (' to contain the String ')Copy the code

Returns true if contained, false otherwise.

【 III. Effect Display 】

After the results display, I will show you how to write this project.

Iv. Create VUE Project

Here’s how to create a project for vUE.

1) Open CMD command step: Click start menu, find “Run”, click in, or directly open “win+R” to run.

2) After the second step, enter “CMD” in the run input box.

3) Step 3 click OK to enter the command prompt.

4) Install NPM (the full name of NPM is Node Package Manager, which is a Node.js-based Package Manager and the most popular and supported third-party module Package Manager in the entire Node.js community).

npm -v
Copy the code

5) NPM installation is as shown below:

6) Install CNPM due to network reasons

 npm install -g cnpm --registry=https://registry.npm.taobao.org
Copy the code

7) Install VUE-CLI

cnpm install -g @vue/cli
Copy the code

8) Install webPack

CNPM install -g webpack<br>Copy the code

9) Start creating projects after installation. Enter vue UI as shown below:

10) After input, a webpage will pop up as shown in the picture below

11) Click vUE Project Manager;

12) Click here to create a new project;

13) Enter the project name (my project name is Test) and click Next;

14) Project creation completed.

15) It takes some time to create a project and load it. After loading, run the command to proceed to the project, enter NPM install, and then run the project. Enter the command CNPM run serve as shown below:

16) Finally enter the url according to Local or Network;

That’s it for creating a VUE project, so let’s start writing the code for adding, deleting, modifying, and querying data items.

[5. Interface Layout]

For this project, we are using the boostrap. CSS file. How to import the Boostrap package?

1) Open CMD and enter NPM install bootsrtap;

2) Write this line inside the style:

@import "~bootstrap/dist/css/bootstrap.min.css"
Copy the code

3) Layout of components needed for page writing:

4) The data in v-for is directly rendered from the list on data. We define a search method, and pass all the keywords to the search method in the form of parameters. Inside the search method, through the for loop, Save all the data matching the search keyword into a new array and return.

5) Next, define ID, name, keywords and list in data.

[VI. Data addition Method]

1. Obtain id and name from data.

2. Organize an object that calls the array method and add it to the list on the current data.

3. Two-way data binding has been implemented in vue. js. Whenever we modify the data in data, the latest data will be automatically displayed on the page when the data is changed.

4, in the VM Model data operation, at the same time, in the operation of Model data, the specified business logic operation.

5. The code is as follows:

[VII. Data Deletion Method]

1, how to find the index value to delete the item according to the Id.

2. Call the array splice method when the index is found.

3. The code is as follows:

[VIII. Data Modification Method]

Edit :[]; edit:[];

2, define the object in the method, according to the Id, find the index value to modify this item, find the index value will change the data.

3. The code is as follows:

[IX. Data Query Method]

ForEach, some, filter, and findIndex are all new array methods that perform operations on each item in the array.

2, in the ES6, provides a new method for String, the String. The prototype. Includes (‘ to contain the String ‘), if included, it returns true, otherwise it returns false.

3. The code is as follows:

X. Summary

1. Create vUE project. Use CMD to install NPM, CNPM, VUE-cli, webpack, enter vue UI to create vUE project.

2, delete method, can use index, set an ID attribute value for each row, then delete the total data ID attribute value of the item.

3, the specified business logic operation when operating on Model data.

Have you learned anything after reading this article? Please share it with more people

Home of IT Sharing

Please reply in wechat background [Join group]