Vue.js
- Beauty and the Beast
- 9-up
- goodgood
- Petty and Low Group
- Team Wang
- Overview
- what is Vue.js
- Advantage of vue.js
- 3 reasons to use Vue.js
- Helloworld in vue.js
- Who is using Vue.js
- Vue.js Frontend with a Spring Boot Backend
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.
-
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.
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)
- 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.
- 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.
- Lightweight and efficient
Vue.js provides efficient data binding and flexible component system through a concise API
- Virtual DOM
Now the network speed is faster and faster. Many people have dozens or even hundreds of megabytes of optical fiber in their homes. The mobile phone also started 4G. A web page is only a few hundred kilobytes, and the browser itself will cache many resource files. Why is it that tens of megabytes of optical fiber open a page that has been opened before and has been cached still feels slow? This is because there is also a performance bottleneck in the browser's processing of DOM. Especially in the traditional development, when the DOM is frequently operated by jQuery or native JavaScript DOM operation functions, the browser constantly renders a new DOM tree, which makes the page look very stuck.
Virtual DOM, in short, is a kind of computing that can be done through JavaScript in advance to calculate and optimize the final DOM operation. Because this DOM operation is a preprocessing operation, there is no real DOM operation, so it is called virtual dom. Finally, the DOM operation is actually submitted after the calculation, and the DOM operation changes are reflected on the DOM tree.
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
<div id="vueFirst">
<p>{{message}}</p>
</div>
new Vue({
el: '#vueFirst',
data: {
message: 'Hello World Vue.js'
}
})
More than 700 companies are using Vue.js. Some of the most important are: Xiaomi, Alibaba, and Gitlab.
- Spring Boot exports REST Apis using Spring Web MVC & interacts with Database using Spring JPA
- Vue Client sends HTTP Requests and retrieve HTTP Responses using axios, shows data on the components. We also use Vue Router for navigating to pages.
- Database could be MySQL or PostgreSQL.
- The App component is a container with router-view. It has navbar that links to routes paths.
- TutorialsList component gets and displays Tutorials.
- Tutorial component has form for editing Tutorial’s details based on :id.
- AddTutorial component has form for submission new Tutorial.
- These Components call TutorialDataService methods which use axios to make HTTP requests and receive responses.
- The easiest way to create a new Spring Boot app is – start dot spring dot io!
- Just initialize a Spring Boot app with the Web dependency and place the generated zip´s contents into the backend folder.
- We make CRUD operations & finder methods with Spring Data JPA’s JpaRepository.
- The database could be PostgreSQL or MySQL depending on the way we configure project dependency & datasource.