What is vue.js?

Vue is a set of progressive frameworks for building user interfaces. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up. Vue’s core library focuses only on the view layer, making it easy to get started and integrate with third-party libraries or existing projects. On the other hand, when combined with modern toolchains and various supporting libraries, Vue is perfectly capable of providing drivers for complex, single-page applications.

What is the V-Model instruction?

The V-Model directive is responsible for listening for user input events to update data and perform special processing for extreme scenarios. Using the V-Model directive, you can implement two-way data binding between form elements and the data in the Model. V-model can only be applied to form elements.

How do I use the V-model instruction?

1. Create a component and create day01.vue in the SRC/Components/folder.

2. Write the p element and input element in day01.vue, and use v-model in the input element.

3. Import the day01.vue component in app. vue and add the Day tag to the template.

The code is shown below:

Effect:

Three, the use of V-model to achieve a simple addition, subtraction, multiplication and division calculator

1. Implement page layout in Template;

2. In data, n1 and n2 represent the first and second numbers; result represents the result; opt represents addition, subtraction, multiplication and division;

3. Handle custom methods in Methods and use swith expressions to add, subtract, multiply and divide.

The code is shown below:

Effect:

Four, to achieve the effect of running lantern

1, to run the lantern scroll button, bind a click thing V-on or @;

2. In the event processing function of the button, write the relevant business logic code: get the MSG string, then call the string substring to intercept the string, intercept the first character and put it in the last position;

3, in order to achieve click the button, automatic interception function, put in a timer to go;

The code is shown below:

Effect:

Five, the summary

1. Use v-model instruction to achieve two-way data binding between form elements and data in model. V-model can only be used in form elements. Use V-Model to achieve a simple calculator, further understanding of v-Model.

2, the code is relatively simple, I hope to help you.

Learn more about Crawlers and data mining in Python at pdcfighting.com/