What is the Vue.js framework?

In the previous article, we shared with you the simple installation and quick start of Vue.js. In this article, we mainly share with you what the Vue.js framework is and why you should choose it? This article introduces the current trends in the use of front-end technology, as well as the advantages and applicable scenarios of Vue.js. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

#Vue.js is a progressive framework for building data-driven web interfaces. The goal of Vue.js is to enable responsive data binding and composed view components with the simplest possible API. Not only is it easy to get started, it is also easy to integrate with third-party libraries or existing projects.

The "Vernacular, Programming" series is back again. In this series, we will learn the basic knowledge of Vue.js together. You read that right, basic knowledge. Therefore, even if you have been in the industry for a short time, I believe you can learn it in the vernacular style.

But I still hope that you have project experience in developing html, css, and javascript. If you don’t have any project experience, or you have already mastered the knowledge of Vue.js, then this series is not suitable for your current situation. Learning phase.

1 Learning Objectives

Through this section, you will learn:

1. Current trends in the use of front-end technology

2. What is MVVM

3. Advantages of Vue.js

4.Two cores of Vue.js

5.Applicable scenarios of Vue.js

2 Background of birth

In recent years, thanks to the popularity and performance improvement of mobile phone devices, the demand for web on mobile terminals has increased significantly, resulting in something called webapp. That is, mobile web applications.

Their functions are becoming more and more complex, the interactions are becoming more and more cool, and the functions and effects are getting closer and closer to the native APP. For example, the following:

(The effect is almost as good as the native APP)

This kind of webapp is not just like h5 marketing Web pages also have cool effects, and they also have complex interactions such as clicks, inputs, drop-down selections, and view switching. Under such business needs, we still use the PC-side development solution, which will inevitably be inappropriate. For example: view switching.

On the PC side, when switching views, we will use the 3499910bf9dac5ae3c52d5ede7383485 tag to jump to the page, but if it is on the mobile side, it is a no-brainer and you will encounter a screen like this:

(Wait until the flowers wither)

At this time the user can only wait... 3 seconds, 5 seconds, 8 seconds... It’s hard to imagine that in a webapp that needs to switch views frequently, using the 3499910bf9dac5ae3c52d5ede7383485 tag is very unfriendly to users. If it were you, you wouldn’t be willing to wait that long. Anyway, I wouldn’t be willing. ....

In addition, while receiving user input, it is likely to update the view in time. For example, if the user inputs different content, the page will be updated accordingly, and different options will be displayed when clicking on different options. Status and other interactive effects. Once there are too many interactions like this and you have to do it manually, the code will easily become complex and difficult to maintain.

In order to solve the deficiencies in experience and development of webapps, we decided to learn and use an MVVM framework-Vue.js

3 What is MVVM

MVVM can be split into three parts: View --- ViewModel --- Model, look at the view below:

So, how do we understand MVVM?

In the above picture, the View on the left is equivalent to our DOM content, the page view we see, and the Model on the right is equivalent to our data object, such as the information of an object:

{ 

name:"张三", 
age:21,

}

The middle monitor is responsible for monitoring the data on both sides and notifying the other side to make modifications accordingly. For example: if you change the value of name in the Model layer to: "李思", then the "Zhang San" displayed in the View layer will automatically change to "李思", and this process is operated by ViewModel. You don’t need to manually write code to implement it (you no longer need to manually manipulate the DOM).

If you have written complex DOM operations, you can feel the convenience it brings.

This is the MVVM framework. In addition to Vue.js, the JS frameworks belonging to MVVM also include React.js and Angular.js.

Here we will not analyze which of the three frameworks is better. Regarding technology selection, each development team’s situation is different and the factors they consider are also different, as long as it suits you. Here we only talk about the advantages of Vue.js:

1.Vue.js is lighter and faster

2. Easier to get started and learn

##4 The core of Vue

After so much preparation, I finally got to the core of Vue.

So, let’s get to know Vue.js. Here is an excerpt from the official website’s introduction to it:

Realize response data binding and combination through the simplest API possible View component

This sentence has two keywords:

Data bindingandView component.

Vue's data-driven: Data changes drive the automatic update of the view. Traditionally, you have to manually change the DOM to change the view. Vuejs only needs to change the data and it will automatically change the view. One word: cool. You no longer have to worry about DOM updates. This is the realization of the MVVM idea.

View componentization: Split the entire web page into blocks, and each block can be regarded as a component. A web page is composed of multiple components that are spliced ​​or nested. Look at the picture below:

# Specifically how to implement a component during the development process, and which blocks can be divided into components. We will introduce them one by one in the following chapters. Here you You just need to know that in Vue.js, a web page can be regarded as composed of multiple components.

5 Applicable Scenarios

If you are still using jquery to frequently operate your DOM to update the page, then you can use Vue.js to liberate your DOM Operated.

If there are multiple parts in your project that are the same and can be encapsulated into a component, then you can try using Vue.js.

In addition, the core implementation of Vue.js uses the Object.defineProperty feature of ES5, which is incompatible with browsers of IE8 and below. Therefore, your project needs to be compatible with these lower versions of browsers. , then Vue.js is not applicable.

After all, the purpose of developing a project is not to use a certain framework.

6 Summary of this section

In order to better meet the development needs of current mobile webapp projects, the MVVM framework was born, and Vue.js is such a js framework , its two cores: data-driven and componentization.

Related recommendations:

Vue.js framework implements train ticket query system

vue.js instance object and component tree Detailed example explanation

Vue.js component communication example sharing

The above is the detailed content of What is the Vue.js framework?. For more information, please follow other related articles on the PHP Chinese website!