Angular, React, Vue and Others
Students will work in groups to create a Wiki comparing major client-side JavaScript frameworks: Angular, React, Vue and Others. If you did not work before with Moodle Wikis, see this small video (3:36 min.) on the Wiki activity page.
Indietro
Vue
Visualizzazione della versione #6 della pagina
(Ripristina questa versione)
(Ripristina questa versione)
Data di modifica: 21 novembre 2022, 08:13 Utente: Raul Cotrim Ferreira → RC
Apresentação Slide: https://docs.google.com/presentation/d/1Yl2_wcS4h-oO6rY4hAQPcV9DOD64QD9N6yNICM0qkSs/edit?usp=sharing
- Framework name
Vue - Student List (with name and USP id)
João Francisco Caprioli Barbosa Camargo de Pinho Nº USP: 10748500
Felipe Tetzner Nº USP:
Raul Cotrim Ferreira Nº USP: 10748330 - Main Framework Features
- Declarative Rendering
Vue extends standard HTML with a template syntax that allows us to declaratively describe HTML output based on JavaScript state.
- Reactivity
Vue automatically tracks JavaScript state changes and efficiently updates the DOM when changes happen.
- Virtual DOM
VueJS makes the use of virtual DOM, which is also used by other frameworks such as React, Ember, etc. The changes are not made to the DOM, instead a replica of the DOM is created which is present in the form of JavaScript data structures. Whenever any changes are to be made, they are made to the JavaScript data structures and the latter is compared with the original data structure. The final changes are then updated to the real DOM, which the user will see changing. This is good in terms of optimization, it is less expensive and the changes can be made at a faster rate.
- Data Binding
The data binding feature helps manipulate or assign values to HTML attributes, change the style, assign classes with the help of binding directive called v-bind available with VueJS.
- Components
Components are one of the important features of VueJS that helps create custom elements, which can be reused in HTML.
- Event-Handling
v-on is the attribute added to the DOM elements to listen to the events in VueJS.
- Animation/Transitions
VueJS provides various ways to apply transition to HTML elements when they are added/updated or removed from the DOM.
- Computed Properties
This is one of the important features of VueJS. It helps to listen to the changes made to the UI elements and performs the necessary calculations.
- Templates
VueJS provides HTML-based templates that bind the DOM with the Vue instance data. Vue compiles the templates into virtual DOM Render functions.
- Directives
VueJS has built-in directives such as v-if, v-else, v-show, v-on, v-bind, and v-model.
- Watchers
Watchers are applied to data that changes.
- Routing
Navigation between pages is performed with the help of vue-router.
- Lightweight
VueJS script is very lightweight and the performance is also very fast.
- Framework Advantages
- Framework Disadvantages
- Main Application Niches
- Future Perspectives