Vue.js

Groups:

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

Catalog

• Overview
• what is Vue.js
• Advantage of vue.js
• 3 reasons to use Vue.js
• Helloworld in vue.js

Overview

Vue is a javascript framework for building user interfaces. It is capable of powering sophisticated Single -Page Applications (SPAs). It is one of the three most popular modern JavaScript frameworks, with the other two frameworks being Angular and React.

Vue has a reputation of being fairly easy to grasp and as straightforward as it gets when it comes to writing code. It can also be used to target Native when used with a combination of other libraries and tools.

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

3 reasons to use Vue.js

It's hard to choose a JavaScript framework – because there's too many of them, and because the differences are not immediately obvious. If you agree that productivity ("how fast can I get things done") and performance ("how fast will my website be") are the most important criteria, let me show why Vue.js is a very solid framework for building websites and single-page applications.

• A component library based on HTML, CSS & JS makes it simple to get started
• The essential features like routing and data management are covered by official libraries

Vue.js includes the core module that allows you to build components as we discovered, but it also includes a set of opinionated libraries built by the Vue.js team itself such as vue-router for the routing part, Vuex to manage your data, vue-cli to bootstrap a new project.

• Fast rendering ensured by virtual DOM and minimal load time

Vue.js is only ~30 KB gzipped with the core module, the router and Vuex. A minimal footprint offers short load time, meaning higher speed for users and better ranking on the speed criterium for Google crawler

Helloworld in vue.js

   <div id="vueFirst">        

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

   </div>

   new Vue({        

     el: '#vueFirst',        

     data: {            

       message: 'Hello World Vue.js'        

     }    

   })