Vue.js

Groups:

1. Beauty and the Beast
2. 9-up
3. goodgood
4. Petty and Low Group
5. Team Wang

what is Vue.js

• Vue.js is a lightweight, high-performance, componentizable MVVM library, and has a very easy-to-use API;

• Vue.js is a library for building data-driven web interfaces.

• Vue.js is a progressive framework for building user interfaces. Unlike other heavyweight frameworks, Vue uses a bottom-up incremental development design. Vue's core library only focuses on the view layer, and is very easy to learn and integrate with other libraries or existing projects. On the other hand, Vue is fully capable of driving complex single-page applications developed with single-file components and libraries supported by the Vue ecosystem. Data-driven + componentized front-end development

In short: Vue.js is a progressive framework for building data-driven web interfaces. The goal of Vue.js is to implement responsive data binding and combined view components through the simplest possible API. The core is a responsive data binding system.

References to MVVM

MVVM: MVVM is to change the Controller in MVC and Presenter in MVP to ViewModel. Model + View + ViewModel. View changes will be automatically updated to ViewModel, ViewModel changes will be automatically synchronized to the View to display. View is a js template for HTML text ViewModel is the business logic layer (all js visual business logic, such as form button submission, custom event registration and processing logic are responsible for monitoring the data on both sides in the viewmodel) Model data layer Processing of data (such as addition, deletion, and modification)

Advantage of vue.js

1. Two-way data binding

This is the so-called responsive data binding. Responsive here is not a responsive layout in @media Query, but it means that vue.js will automatically respond to changes in certain data on the page. This is the biggest advantage of vue.js. The two-way binding of data is realized through the idea of MVVM, so that developers no longer need to manipulate dom objects and have more time to think about business logic. 2. Component development

In front-end applications, can we also encapsulate modules like programming? This introduces the idea of component development.

Vue.js uses components to split the various modules in a single-page application into a single component. We only need to write the various component labels in the parent application (accounting for pits), and in Write the parameters of the component in the component label (just like passing parameters to the function, this parameter is called the property of the component), and then write the implementation of each component separately, and then the entire application is finished.

3. Lightweight and efficient

Vue.js provides efficient data binding and flexible component system through a concise API

Helloworld in vue.js

`

<title>Title</title> <script src="../vue.js"></script>

 <p>{{message}}</p>    

<script> new Vue({ el: '#vueFirst', data: { message: 'Hello World Vue.js' } }) </script> `