SlideShare a Scribd company logo
Jadson Santos
Computing Engineer
Vue.js
•  Vue (pronounced /vjuː/, like view) is a progressive
framework for building user interfaces
•  The core library is focused on the view layer only,
and is easy to pick up and integrate with other
libraries or existing projects.
•  On the other hand, Vue is also perfectly capable of
powering sophisticated Single-Page Applications
2Vue.js
Vue.js
•  Progressive framework is a framework that you can
insert into your project as you feel the need for it
•  Differently of other JavaScript framework like
Angular, that since the beginning, you need a full
project make in Angular, follow the “Angular rules”.
•  This implies you need to learn a lot of things to start
programming with Angular.
3Vue.js
Vue.js
•  Vue is more simple and flexible
•  Vue allows you make just specific parts of your
application. You learn just what is necessary for the
problem you are dealing with.
•  Or if it is necessary and you have time, you can learn
more and make a full complex front-end application
100% Vue.
4Vue.js

Recommended for you

Vue.js for beginners
Vue.js for beginnersVue.js for beginners
Vue.js for beginners

I talked about Vue.js at @agenciasomadev. In this talk I showed the basics about the Vue.js JavaScript Framework and it's simplicity. I hope you enjoy :)

librarydevelopmentjavascript
Node js introduction
Node js introductionNode js introduction
Node js introduction

Node.js is a server-side JavaScript platform built on Google's V8 engine. It is non-blocking and asynchronous, making it suitable for data-intensive real-time applications. The document discusses how to install Node.js and its dependencies on Ubuntu, introduces key Node.js concepts like events and the event loop, and provides examples of popular Node.js packages and use cases.

setting up node with virtual appliancescaling the webnode
Nodejs presentation
Nodejs presentationNodejs presentation
Nodejs presentation

This document provides an introduction and overview of Node.js and MongoDB. It discusses that Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine that uses an event-driven, non-blocking I/O model. It can be used for real-time applications and is well-suited for I/O-intensive applications. MongoDB is also introduced as a popular JSON-based NoSQL database that can be easily used with Node.js applications. Examples are given for connecting to MongoDB from Node.js code.

Vue.js
•  Vue uses Javascript, Angular relies on TypeScript
•  Vue is pretty easy to learn, Angular’s learning curve is
much steeper
•  Vue Is indicated if you are working alone or have a
small team, Angular is for really large applications.
5Vue.js
Vue.js
•  While Angular offering data binding to deal with the
DOM without having to touch it directly, there were
still extra concepts that demanded code be
structured a certain way.
•  Vue had these efficiencies, but was even more
lightweight.
6Vue.js
Vue.js Hello World
7Vue.js
Vue.js Hello World
•  Download it from:
•  https://vuejs.org/v2/guide/installation.html
•  And Include the vue script in your HTML page
8Vue.js

Recommended for you

Introduction to Node.js
Introduction to Node.jsIntroduction to Node.js
Introduction to Node.js

This is the slide deck from the popular "Introduction to Node.js" webinar with AMD and DevelopIntelligence, presented by Joshua McNeese. Watch our AMD Developer Central YouTube channel for the replay at https://www.youtube.com/user/AMDDevCentral.

java webinar nodejs programming
The Point of Vue - Intro to Vue.js
The Point of Vue - Intro to Vue.jsThe Point of Vue - Intro to Vue.js
The Point of Vue - Intro to Vue.js

An introduction to Vue.js (from an online webinar for Certified Fresh Events - http://certifiedfreshevents.com).

vuevuejsvue overview
How to implement internationalization (i18n) in angular application(multiple ...
How to implement internationalization (i18n) in angular application(multiple ...How to implement internationalization (i18n) in angular application(multiple ...
How to implement internationalization (i18n) in angular application(multiple ...

This blog is a complete solution for how to implement Internationalisation (i18n) or Multiple Language Support in angular application with an example.

internationalizationangularangular application
Vue.js Hello World
9Vue.js
Vue.js Hello World
•  Now we have to indicate the part of HTML that Vue.js
will look at and use.
•  We will create the div with “app” id
10Vue.js
Vue.js Hello World
•  Create a new Vue() object with the “el” and “data”
elements.
•  el tell which element of our HTML we want Vue manipulate
•  The "data" field receives a javascript object with the data
that will be manipulated in the context of our application
11Vue.js
Vue.js Hello World
•  To show the data of the variable "message" in the div
app we use the interpolation putting the variable
"message" between double keys {{ }} inside the div.
12Vue.js

Recommended for you

Vue js for beginner
Vue js for beginner Vue js for beginner
Vue js for beginner

Vue JS is a progressive framework for building user interfaces. It uses a component-driven approach and features like reactivity and computed properties that make it possible to build desktop, mobile, and web applications. Some key features include reactive data binding, conditional rendering, mixins, slots for content distribution, and Vuex for global state management between components. Asynchronous and dynamic components add flexibility. Vue shares similarities with React in using virtual DOM and components but differs in file structure and size.

vuejsframeworkjavascript
React workshop presentation
React workshop presentationReact workshop presentation
React workshop presentation

This document contains an agenda and slides for a React workshop presented by Bojan Golubovic. The workshop covers the history and basics of React, including components, JSX, the virtual DOM, and React data flow. It also discusses related tools like Redux and React Router. The goal is to provide basic knowledge of React and how to build real-world applications with it.

reactreactjsreact.js
Introduction to VueJS & Vuex
Introduction to VueJS & VuexIntroduction to VueJS & Vuex
Introduction to VueJS & Vuex

Slides of my talk at Coding-Berlin November Meetup on 01.11.2017 (https://www.meetup.com/CODING-BERLIN/events/244169839). Also have a look at the demo repo at Github: https://github.com/coding-berlin/vuejs-demo

vuejsvuexjs
Vue.js Hello World
•  Open the html file in a browser
13Vue.js
Vue.js Hello World
14Vue.js
Vue.js 15
Vue.js Directives
•  Directives are the part of Vue.js that attach special
meaning and behavior to plain html elements on the
page
16Vue.js

Recommended for you

Love at first Vue
Love at first VueLove at first Vue
Love at first Vue

Vue.js is an open-source progressive framework for building user interfaces that focuses on the view layer. It has a virtual DOM and reactive components. Its core is small and works well with companion libraries. Single file components allow importing of templates, logic, and styles. Popular companion libraries include Vuex for state management and Vue Router for routing. The Vue CLI makes it easy to scaffold Vue projects with features like routing, lazy loading, and preloading for improved performance.

vuevuejs
Learn react-js
Learn react-jsLearn react-js
Learn react-js

The document provides an introduction to ReactJS, including: - ReactJS is a JavaScript library developed by Facebook for building user interfaces. - It uses virtual DOM for rendering UI components efficiently. Only updated components are re-rendered. - Components are the basic building blocks of React apps. They accept input and return React elements to describe what should appear on the screen. - The main steps to set up a React app are installing React and ReactDOM libraries, adding JSX syntax, and rendering components onto the DOM using ReactDOM.render().

javascriptreactjsapps
Vue JS Intro
Vue JS IntroVue JS Intro
Vue JS Intro

@ IBTI Palu fiddle: Todo jQuery: https://jsfiddle.net/eezhal92/maahzty2/ Todo Vue: https://jsfiddle.net/eezhal92/u7g26x2s/ Comment Box: https://jsfiddle.net/eezhal92/sc5qdoah/1/ repo: https://github.com/eezhal92/mangande

frontendjavascriptwebapp
Vue.js V-model
•  v-model directive to make two way binding
between the HTML element and the data attribute it
refers to in the Vue JavaScript code
17Vue.js
Vue.js V-model
•  When you type your name in the input text with v-
model, the value type if update in the message
data of Vue model and the HTML view {{message}} is
updated too.
•  Vue message variable ßà HTML {{message}}
interpolation
18Vue.js
Vue.js Conditionals and Loops
•  v-if directive can be used to test some conditions
over the JavaScript object data
•  v-else directive can be used when the conditions on
the v-if fails
•  v-else-if directive can be used much like you would
use else-if clauses in JavaScript
19Vue.js
Vue.js Conditionals and Loops
20Vue.js

Recommended for you

VueJS: The Simple Revolution
VueJS: The Simple RevolutionVueJS: The Simple Revolution
VueJS: The Simple Revolution

An in-depth exploration of VueJs, the progressive front-end framework with focus on reactivity, componentization and simplicity

software developmentjavascriptsoftware architecture
React js
React jsReact js
React js

React js is a JavaScript library created by Facebook in 2013 for building user interfaces and rendering UI components. It uses a virtual DOM to efficiently update the real DOM and allow building of reusable UI components. React code can be written directly in HTML or using JSX syntax and by setting up a React app with Node.js and NPM. Components are the building blocks of React and can be class or function based. Props and state allow passing data to components and re-rendering components on state changes.

reactjs
Deep dive into Vue.js
Deep dive into Vue.jsDeep dive into Vue.js
Deep dive into Vue.js

Vue.js의 깊은 곳을 알아봅시다. 1. Vue.js Architecture 2. Observing 3. Rendering 4. Vue.js Package * 이 자료는 VUE.TIFULE KOREA 6회에서 발표한 자료입니다.

vuejsvuejs-corejavascript
Vue.js Directives Summary
•  v-model: used to create a two way binding
between the element and the data
•  v-show: used to conditionally display an element (css
based)
•  v-if, v-else, v-else-if: used to conditionally render an
element
•  v-for: iterate over a range, an array, an object, or an
array of objects
21Vue.js
Vue.js Conditionals and Loops
•  v-for directive can be used for interact over a list of
items over the JavaScript object data
22Vue.js
Vue.js Directives Summary
•  v-on: listen to various DOM events (click, keyup,
submit, etc..)
•  v-bind: used to dynamically bind one or more
attributes, or a component prop, to an expression
•  v-text: same as {{ interpolation }} and updates the
element’s textContent
23Vue.js
Vue.js Components
•  Components are reusable structures with
encapsulated functionalities. That is, elements that
have html, css and javascript encapsulated and that
can be reused either within the same project or even
in others projects
24Vue.js

Recommended for you

Introduction to angular with a simple but complete project
Introduction to angular with a simple but complete projectIntroduction to angular with a simple but complete project
Introduction to angular with a simple but complete project

Angular is a framework for building client applications in HTML, CSS and TypeScript. It provides best practices like modularity, separation of concerns and testability for client-side development. The document discusses creating an Angular project, generating components, binding data, using directives, communicating with backend services, routing between components and building for production. Key steps include generating components, services and modules, binding data, calling REST APIs, defining routes and building the app.

angular
Nuxt.JS Introdruction
Nuxt.JS IntrodructionNuxt.JS Introdruction
Nuxt.JS Introdruction

This document provides an overview of a minimalist framework called Nuxt.js for creating universal server-side rendered (SSR) applications using Vue.js. Some key points covered include: - Nuxt.js allows developers to write Vue components and pages while abstracting away concerns of client-server code splitting and routing. - Features include automatic code splitting, SSR, routing, static file serving, bundling/minifying, and error handling. - The framework uses a pages/ directory to define routes and components and includes Vuex and Vue-Router functionality out of the box. - Async data loading, custom layouts, global meta tags, and asset handling are also

vuejsjavascriptvue.js
Vue 2.0 + Vuex Router & Vuex at Vue.js
Vue 2.0 + Vuex Router & Vuex at Vue.jsVue 2.0 + Vuex Router & Vuex at Vue.js
Vue 2.0 + Vuex Router & Vuex at Vue.js

- Vue.js Tokyo v-meetup="#1" http://vuejs-meetup.connpass.com/event/31139/ - JS Night at Bizreach http://connpass.com/event/34014/

vue.js
Vue.js Components
•  In Vue, a component is essentially a Vue instance
with pre-defined options
25Vue.js
Vue.js Class and Style Bindings
•  Vue provides special enhancements when v-bind is
used with class and style
26Vue.js
Vue.js Event Handing
•  We can use the v-on directive to listen to DOM
events and run some JavaScript when they’re
triggered
27Vue.js
28Vue.js

Recommended for you

Vue.js - AMS & Vuex
Vue.js - AMS & VuexVue.js - AMS & Vuex
Vue.js - AMS & Vuex

We will start the evening by covering some interesting topics from the VueJS conference in Amsterdam we have attended on the 16th of February. We also plan to have collated all the speakers slides by then and share them with you guys should you want to digest these more in-depth in your own time. This first half of the event will be hosted by Angelika Johansson and Jason Staerck. The second talk will be on Vuex. State management is a feature that is expected for every modern JavaScript web framework to support. In this talk, Temitope Faro will be showing you how you can manage the complexity of large applications using Vuex, patterns for cleanly binding your Vuex store to your form components, using vue-devtools to debug your Vue app state in development, and testing your Vuex actions and mutations.

javascriptweb development
Drupal point of vue
Drupal point of vueDrupal point of vue
Drupal point of vue

With this presentation, I am showing how to easy decouple a simple Drupal blog with Nuxt framework and GraphQL. You will be first shortly introduced to Vue.JS and Nuxt platform with some code examples and in the end, you will be able to clone a Github repository with a full working example: https://github.com/davision/nuxt-graphql-drupal-blog

drupalvuejsvue.js
Vue+rails
Vue+railsVue+rails
Vue+rails

This talk is about the basic of vue.js, I don't cover a lot about how to integrate with rails but I do cover all the basic required to learn Vue. The codepen demo link https://codepen.io/rabingaire/

vuejavascriptprogramming
Vue.js CLI
•  You can develop a complete Single Page
Application with Vue using vue-cli
•  Install it via the node.js package manager (npm)
29Vue.js
Vue.js CLI
•  What is Node.js and NPM?
•  Node.js is javascript development platform, the uses the
google’s engine V8. Basically, you cat execute
javascript applications on server side (out of a web
browser)
•  NPM is a package manager of Node.js, where you can
manager the javascript dependences of your project
( like maven ou gradle does in Java world ).
•  Similar Angular, Vue.js is not made in Node.js and does
not need Node.js to run, but use its package manger.
30Vue.js
Vue.js CLI
•  Download and install node.js from:
https://nodejs.org/en/
•  It will automatically install npm package manager
31Vue.js
Vue.js CLI
•  After that, install vue command line interface tool
with the commands:
•  $sudo npm install -g vue-cli
32Vue.js

Recommended for you

Introduction to web application development with Vue (for absolute beginners)...
Introduction to web application development with Vue (for absolute beginners)...Introduction to web application development with Vue (for absolute beginners)...
Introduction to web application development with Vue (for absolute beginners)...

In this slide deck I show you how you can easily and quickly create quite rich web applications with Vue 3 – without having to study complex concepts or understand many technical details. I have only recently learned how to work with Vue 3 myself and now is the best time for me to share my learning experience (and my enthusiasm) with you. I know what I found essential to understand and what most got me excited in these early steps (what was a little bit hard to grasp). I believe that I can present my steps and guide you to experience the same fun and have a similarly gratifying experience. I am not an expert in this subject – I have barely learned how to walk and that is why I can help you with these first steps with Vue. In this deck, I do not explain how Vue works. I do not really know that. I will show you how to work with it and how to create web applications that are functional, appealing, fast and responsive. The approach I am taking is straightforward: • I will tell you a little bit about web development, browsers and reactive frameworks • I will show the hello world of Vue applications • I will explain about components and nesting, events, data binding and reactive behavior and demonstrate these concepts • I will introduce Vue UI Component libraries – and with no effort at all we will launch our application to the next level – with rich components to explore, manipulate, visualize data collections • We will publish the web application from our development environment to where the whole world could see it – using GitHub Pages • As bonus topic – we discuss state management At the end of this session you will be able to quickly create a simple yet rich web application with Vue 3. You have a starting point to further evolve your skills with the many online resources I am convinced that you will enjoy your newfound powers and the simplicity and power of Vue 3. Note: a tutorial accompanies this slide deck - see https://github.com/lucasjellema/code-face-vue3-intro-reactiive-webapps-aug2023/blob/main/README.md

vueweb developmentreactive
Let's vue
Let's vueLet's vue
Let's vue

This document discusses the key concepts and features of the Vue framework, including that it uses a MVVM pattern with a virtual DOM, supports single file components with template, script, and style sections, and two-way data binding between the UI and data with directives like v-model. It also covers core Vue concepts like conditional rendering, loops, props, events, lifecycle hooks, slots, plugins, and custom directives.

f2evue.js
Asp 1a-aspnetmvc
Asp 1a-aspnetmvcAsp 1a-aspnetmvc
Asp 1a-aspnetmvc

The document provides information on ASP.NET MVC, including: - ASP.NET MVC is a framework for building web apps in .NET using C# or VB.NET that follows the MVC pattern. - MVC stands for Model-View-Controller, with models containing data, views presenting user interfaces, and controllers coordinating data retrieval and user input. - ASP.NET MVC provides separation of concerns, testability, and more control over HTML compared to ASP.NET Web Forms.

Vue.js CLI
•  Creating a new vue project with vue-cli:
•  $ vue init <template-name> <project-name>
•  This command creates a project-name folder with a
new vue project using a vue template.
•  What is a vue template?
•  Vue.js does not define a default project structure
for vue projects, so you have choose what will be
your project structure.
33Vue.js
Vue.js CLI
•  There are three principal vue templates:
•  webpack – Uses the webpack as module bundler. It has
support to vue-loader with hot reload, javascript lint and units
tests. It is the more complete template.
•  webpack-simple – Simplification of webpack structure, for
example, it do not creates the unit test folders
•  browserify - It has support to vue-loader with hot reload,
javascript lint and units tests. It is more simple that webpack.
34Vue.js
Vue.js CLI
•  We will use the webpack, to to create a project
called “hello-vue-cli”, use the command:
•  $ vue init webpack-simple hello-vue-cli
35Vue.js
SPA with Vue.js
•  To run the empyt project:
•  cd hello-vue-cli
•  npm install (to downdoad the dependences)
36Vue.js
node_modules: vue.js dependences
src: Our Vue code
assets: imgs and other external files of our application
index.html: main and unique page of application
App.vue: The main vue componet

Recommended for you

Aspnetmvc 1
Aspnetmvc 1Aspnetmvc 1
Aspnetmvc 1

The document provides an overview of ASP.NET MVC, including: - ASP.NET MVC is a framework for building web apps using Model-View-Controller (MVC) pattern on the .NET platform. - MVC separates an app into three main components: Models for data, Views for presentation, and Controllers for logic/app flow. - Key advantages include easier management of complexity, testability, and control over HTML.

Nodejs getting started
Nodejs getting startedNodejs getting started
Nodejs getting started

This document provides an overview of a 1-hour seminar on getting started with Node.js. The objectives are to understand Node.js basics and common modules, create a simple Node.js app, and start learning more in-depth. The agenda covers what Node.js is and how it works, installation, project and module structure, common packages, and hosting a Node.js app with PM2. Key points include Node.js using asynchronous and non-blocking I/O with callbacks, common packages like Express.js and template engines, project structure with package.json, and using PM2 to host Node.js apps.

nodejs getting started
Introduction to node.js by jiban
Introduction to node.js by jibanIntroduction to node.js by jiban
Introduction to node.js by jiban

Its a presentation about node.js. Here I have covered the basic things of node.js. Like what is node.js how it can be used. and explanation about some node.js frameworks

node.jsjavascript
SPA with Vue.js
•  The default structure of a vue component is
composed of three elements: template, script, and
style
37Vue.js
SPA with Vue.js
•  To run the empyt project
•  npm run dev ( development environment )
38Vue.js
SPA with Vue.js
•  Vue.js install dependences
•  npm install font-awesome -- save
•  npm install bulma -- save
•  npm install bootstrap -- save
•  etc…
•  This will be install inside the node_modules. To include
them, open tem index.html and include it on <head>
tag
39Vue.js
Create a new Vue Component
•  Create a new .vue file with template, script and css.
•  Give a name to this new component
40Vue.js

Recommended for you

Node js installation steps.pptx slide share ppts
Node js installation steps.pptx slide share pptsNode js installation steps.pptx slide share ppts
Node js installation steps.pptx slide share ppts

Download millions of presentations on SlideShare Access millions of ebooks, audiobooks, magazines, podcasts, and more on Everand

Angular js
Angular jsAngular js
Angular js

This document provides an overview of AngularJS, including what it is, how it uses MVC architecture, data binding, views, controllers, models, modules, routing, and more. Some key points are: - AngularJS is an open-source JavaScript framework that uses MVC pattern for building dynamic web apps - It uses data binding so changes to models and data are automatically reflected in views - Views use directives like ng-repeat and ng-if to interact with models and controllers - Controllers contain business logic and models contain application data - Modules are used to separate an app into components and routing manages multiple views

angularjs
Vue js and Dyploma
Vue js and DyplomaVue js and Dyploma
Vue js and Dyploma

An introduction to Vue.js. Using Vue.js to build a web application Dyploma Web UI to manage containerized applications and services in Outbrain.

vuejsjavascriptfrontend
Create a new Vue Component
•  Import it com App.vue component
•  Use this new component with the same name you declare
insde componet .vue file
41Vue.js
Vue.js Tools
42Vue.js
Visual Studio Code
•  Syntax Highlight
•  Compiler
•  Integrated Terminal
43Vue.js
Vue Extensions
•  For development install Vue.js devtools on Firefox or
Chrome
44Vue.js

Recommended for you

Web worker in your angular application
Web worker in your angular applicationWeb worker in your angular application
Web worker in your angular application

Discussion on angular offering, approaches to integrate web worker in angular (5 and 6) application, their pros and cons. A sample example implementation using custom web worker approach and integrating the same with CLI(1 and 6) and the application.

web workerwebworkerangular 5
第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]

This document provides an overview of Vue.js including: - Key features like MVVM pattern, data binding, directives, lifecycle hooks - How to set up a basic project using vue-cli - Components, props, events, slots - Conditional rendering, lists, transitions - Tools and resources for learning more about Vue.js

vue.jsfrontendjavascript
Overview of the AngularJS framework
Overview of the AngularJS framework Overview of the AngularJS framework
Overview of the AngularJS framework

This is a slide deck from our training class "Modern Web Development for Java Developers" that I taught in March of 2015.

javascriptangularjs
Vue Extensions
•  For development install Vue.js devtools on Firefox or
Chrome
45Vue.js
Vue communication between components
46Vue.js
Vue communication between components
•  Son -> Father
•  Son emit a event:
47Vue.js
Vue communication between components
•  Son -> Father
•  Father listener the event of son and call another function:
48Vue.js

Recommended for you

Creating Modular Test-Driven SPAs with Spring and AngularJS
Creating Modular Test-Driven SPAs with Spring and AngularJSCreating Modular Test-Driven SPAs with Spring and AngularJS
Creating Modular Test-Driven SPAs with Spring and AngularJS

Single-page Applications (SPA) are all the rage these days and with them there is an avalanche of new tools, libraries and frameworks we need to know. But what does this mean for us as Spring developers? In this session we will give you an overview of the current landscape and illustrate the choices the Spring XD team has made for its user interface. What do I use to write SPA applications? How do I integrate them into existing Spring-based backends? How do I build them? Can I integrate them into my existing Gradle or Maven build processes in order to achieve complete build automation? How do I integrate realtime messaging using Spring's SockJS/WebSocket support? In this talk we will answer these and many more questions. We will cover frameworks such as AngularJS, Bootstrap, RequireJS; tools like Bower, Grunt, Gulp; and also talk about testing using Karma and Protractor.

nodespring securityspring
ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 VueJS cod...
ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 VueJS cod...ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 VueJS cod...
ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 VueJS cod...

For a long time, some frontend Javascript frameworks have helped you with one or two styles of Apps, but Quasar is an amazing new VueJS framework that allows you to build Single Page Apps (SPA), Server-side Rendered Apps (SSR), Progressive Web Apps (PWA), Mobile Apps (Android and IOS) through Cordova as well as Multi-platform Desktop Apps using Electron. With the Quasar CLI, you can quickly start a project, and have a single code base that can output multiple formats, as needed. Come to this session and find out how. Presented at Into the Box 2019

vuejsjavascriptcoldfusion
Nuxtjs cheat-sheet
Nuxtjs cheat-sheetNuxtjs cheat-sheet
Nuxtjs cheat-sheet

This document provides a summary of essential information for using Nuxt.js, including how to start a new project, the folder structure, page components, layouts, error pages, aliases, Vuex store configuration, deployment methods, and the nuxt.config.js file. It also recommends additional Vue learning resources on VueMastery.com.

Vue communication between components
•  Father -> Son
•  Father pass value to son component:
49Vue.js
•  Son receive the value of the Father component
Vue.js Routes
50Vue.js
Vue.js Routes
•  Routers is the way you can “change” the page at
single-page applications
•  Create a project and install the vue-router library
vue init webpack-simple vue-routers
cd vue-routers
npm install
npm install vue-router --save
npm run dev
51Vue.js
Vue.js Routes
•  Create two components Bar and Foo
•  Create a file routes.js
•  At this file define a variable routes with path “/foo” to Foo
component and “/bar” to Bar Component
52Vue.js

Recommended for you

Cloud computing
Cloud computingCloud computing
Cloud computing

Cloud computing allows users to access computing resources and services over the internet. There are three main types of cloud services: Infrastructure as a Service (IaaS), Platform as a Service (PaaS), and Software as a Service (SaaS). IaaS provides basic computing resources like storage and servers. PaaS allows users to develop and run their own applications on a provider's platform. SaaS gives users access to software applications through the cloud. Windows Azure is a PaaS that provides computing, storage, networking, and application services through web roles and worker roles that can be deployed and managed in the cloud.

cloud computingconvert to cloudmoving to cloud
A Deep Dive into Continuous Integration Monitoring Practices
A Deep Dive into Continuous Integration Monitoring PracticesA Deep Dive into Continuous Integration Monitoring Practices
A Deep Dive into Continuous Integration Monitoring Practices

One of the main activities in software development is monitoring, which plays a vital role in verifying the proper implementation of processes, identifying errors, and discovering opportunities for improvement. Continuous Integration (CI) covers a set of widely adopted practices that enhance software development. However, there are indications that developers may not adequately monitor all CI practices. In this thesis, we delve deep into the ocean of monitoring CI practices. Our goal is to discover how this monitoring is conducted, demonstrate the advantages of monitoring CI practices, and highlight the challenges that need to be overcome. We conducted a series of studies to analyze the impact of specific CI practices on the volume of Pull Requests and bug-related Issues, as well as the importance attributed to these practices by developers and the support for monitoring provided by the most popular CI tools. Finally, we evaluate monitoring in real-world scenarios, conducting a case study on three projects from three different organizations, where we investigate more deeply the developers' interest in monitoring CI practices, their benefits, challenges, and the evolution of CI practices over a two-month period. In our first study, we analyze the impact of specific CI practices on the volume of Pull Requests and bug-related Issues. Our findings revealed a positive correlation between CI practices and the increase in the number of merged pull requests. We also identified a significant correlation between the number of bug-related issues and the number of bugs. Additionally, our findings suggest that higher values of CI practices can indicate better quality in the development process. In our second study, we investigate the importance attributed to these practices by developers and the support for monitoring provided by the most popular CI services. We find that developers usually monitor only code coverage and basic build metadata (e.g. build duration and build status). Developers expressed interest in monitoring CI practices if provided the opportunity. Furthermore, we have identified that several leading CI services still have initial support in monitoring CI practices. Finally, we evaluate monitoring in real-world scenarios, conducting a case study on three projects from three different organizations, where we investigate more deeply the developers' interest in monitoring CI practices, their benefits, challenges, and the evolution of CI practices over a two-month period. The case study revealed that monitoring CI practices provides several benefits to the project and is cost-effective. Participants demonstrated a strong desire to integrate CI monitoring dashboards with popular CI services.

continuous integrationmonitoring
Containerizing a Web Application with Vue.js and Java
Containerizing a Web Application with Vue.js and JavaContainerizing a Web Application with Vue.js and Java
Containerizing a Web Application with Vue.js and Java

Containerizing a Web Application Front end application with Vue.js in the Nginx server and a Java Spring Boot back end application

dockerjavavue.js
Vue.js Routes
•  Now at the main.js:
•  Import the vue-router library,
•  Import the routes.js file
•  Declare Vue.use (VueRouter)
•  Create a na VueRuter variable and, define this variable at
app component
53Vue.js
Vue.js Routes
•  Now at the main.js:
54Vue.js
Vue.js Routes
•  At app component, include <router-link> to /foo
and /bar, and a <router-view> ( where the
components will be rendered ):
55Vue.js
Vue.js Routes
•  When click at the router-link /foo, the foo
component is rendered, and click at the router-link /
bar, the bar component is rendered:
56Vue.js

Recommended for you

Continuous Delivery with Jenkins
Continuous Delivery with JenkinsContinuous Delivery with Jenkins
Continuous Delivery with Jenkins

The document provides an overview of continuous integration and continuous delivery practices. It discusses continuous integration, which involves integrating code changes frequently and verifying them through automated builds and tests. Continuous delivery is described as building software in a way that allows release to production at any time, while continuous deployment means any change is automatically deployed to production. Jenkins, an open source automation server, is introduced as a tool that enables continuous integration and deployment through jobs, credentials, scheduling, build steps, and post-build actions. Pipelines in Jenkins are discussed as dividing deployment into stages to provide quick feedback. The Blue Ocean plugin is highlighted as providing a simplified user interface for Jenkins pipelines.

continuous deliverycdci
Cd with Github Travis CI and Heroku
Cd with Github Travis CI and HerokuCd with Github Travis CI and Heroku
Cd with Github Travis CI and Heroku

A basic example of a Java application with Continuous Delivery using Travis CI and Heroku. Using Spring boot and Gradle as build tool.

continuous deliverytravisheroku
Jenkins Continuous Delivery
Jenkins Continuous DeliveryJenkins Continuous Delivery
Jenkins Continuous Delivery

This document discusses how to build a continuous delivery pipeline using Jenkins. It describes setting up continuous integration, continuous delivery, and continuous deployment processes. Continuous integration involves testing code commits, continuous delivery means software can be released at any time, and continuous deployment automatically deploys releases. The document outlines configuring Jenkins jobs to compile code, run tests, and deploy packages across three stages of a pipeline. It also explains plugins for defining and visualizing the pipeline in Jenkins.

continuous deliveryjenkinsblue ocean plugin
Vue.js Routes
•  Children routes:
57Vue.js
Vue.js Routes
•  Children routes:
58Vue.js
Vue.js connecting with the back-end
59Vue.js
Vue.js connecting with the back-end
•  Axios is a great http client library.
•  It uses promises by default and runs on both the
client and the server (which makes it appropriate for
fetching data during server-side rendering).
•  It’s also quite easy to use with Vue. Because it uses
promises, you can combine it with async/await to
get an amazingly concise and easy-to-use API.
60Vue.js

Recommended for you

Hazelcast Distributed Lock
Hazelcast Distributed LockHazelcast Distributed Lock
Hazelcast Distributed Lock

The document discusses using Hazelcast distributed locks to synchronize access to critical sections of code across multiple JVMs and application instances. It describes how Hazelcast implements distributed versions of common Java data structures, including distributed locks via its ILock interface. It provides examples of configuring a Hazelcast cluster programmatically by specifying cluster properties like IP addresses and ports, and shows how to obtain and use a distributed lock within a try-finally block to ensure it is released.

Bootstrap
BootstrapBootstrap
Bootstrap

Bootstrap is a free front-end framework for building responsive, mobile-first websites and web apps. It contains HTML and CSS-based design templates and components for things like typography, forms, buttons, navigation, and other interface components, as well as optional JavaScript extensions. Bootstrap features responsive grid system, tables, forms, buttons, navigation and other elements for developing responsive web pages and applications. It helps developers design websites faster without writing much custom CSS code.

bootstrap
Testes Unitários
Testes UnitáriosTestes Unitários
Testes Unitários

O documento discute testes unitários, apresentando: 1) O que são testes unitários e seus benefícios; 2) Como escrever testes unitários usando JUnit e frameworks de mock como Mockito e PowerMock.

junitmockitotestes unitários
Vue.js connecting with the back-end
•  Install Axios:
vue init webpack-simple vue-rest-api
cd vue-rest-api/
npm install
npm install axios --save
61Vue.js
Vue.js connecting with the back-end
•  Back-end:
•  spring boot application:
62Vue.js
Vue.js connecting with the back-end
•  Back-end:
•  spring boot rest controller:
63Vue.js
Vue.js connecting with the back-end
•  Back-end:
•  Allow CORS origing for spring rest controllers.
•  Front-end and back-end will run at different address, so we
need to enable this configuration or our request will be block
64Vue.js

Recommended for you

Java8
Java8Java8
Java8

O documento discute as principais novidades da versão Java 8, incluindo: 1) expressões lambda; 2) interfaces funcionais; 3) Stream API para processamento de dados.

java8
Gradle
GradleGradle
Gradle

The document discusses the benefits of using Gradle over other build tools like Eclipse, Ant, and Maven. Gradle combines features from Ant like flexibility with Maven's lifecycle and ease of use. It uses Groovy for its build scripts and supports plugins, dependencies, and conventions over configuration similar to Maven. Gradle allows building multiple projects with dependencies and supports composite builds that include other complete builds. The document provides examples of using Gradle with Java, web, and multi-project builds.

build java projectseclipsejenkins
Git
GitGit
Git

1) O documento descreve o sistema de controle de versão Git e suas principais características e vantagens. 2) Git é um sistema de controle de versão distribuído e de código aberto projetado para suportar desde projetos pequenos a muito grandes como o kernel do Linux. 3) Git armazena os dados como snapshots de todo o repositório em diferentes pontos no tempo, permitindo recuperar versões específicas com facilidade.

git egit eclipse
Vue.js connecting with the back-end
•  Front-end:
•  Create a file http-common.js and declare an AXIOS constant
and import it on App.vue component
65Vue.js
Vue.js connecting with the back-end
•  Front-end:
•  Declare data to hold the information, a user object and an
array of users.
66Vue.js
Vue.js connecting with the back-end
•  Front-end:
•  Configure fields to this data and action to call vue methods
that will call the back-end REST service
67Vue.js
Vue.js connecting with the back-end
•  Front-end:
•  Create vue methods, and use the axios instance HTTP to call
get and post back-end services.
68Vue.js

Recommended for you

Introdução ao Flyway
Introdução ao FlywayIntrodução ao Flyway
Introdução ao Flyway

O documento descreve como o Flyway fornece controle de versão para bancos de dados, gerenciando automaticamente scripts de migração de banco de dados e registrando sua aplicação em uma tabela de metadados. Ele explica como instalar e configurar o Flyway, os comandos básicos como migrate e validate, e como integrá-lo com o Gradle para automatizar a aplicação de scripts.

gradleflywayversionamento do banco de dados
Mini curso gerenciamento de configuração e mudança com GIT + Eclipse - I...
Mini curso gerenciamento de configuração e mudança com GIT + Eclipse  -  I...Mini curso gerenciamento de configuração e mudança com GIT + Eclipse  -  I...
Mini curso gerenciamento de configuração e mudança com GIT + Eclipse - I...

Esse mini curso descreve os comandos e fluxo básicos do GIT de uma forma visual usando o plugin EGIT do eclipse.

eclipsegitcontrole de versão distribuído
Usando hiberante de forma otimizada
Usando hiberante de forma otimizadaUsando hiberante de forma otimizada
Usando hiberante de forma otimizada

O documento discute como usar o Hibernate de forma otimizada para evitar problemas de performance. A promessa do Hibernate de trabalhar apenas com objetos não é cumprida na prática para entidades complexas. É necessário mapear relacionamentos como LAZY, fazer projeções para recuperar apenas dados necessários e, em alguns casos, abandonar o Hibernate e otimizar consultas SQL diretamente.

hibernate otimização sql
Vuex
69Vue.js
Vuex
•  If your Vue.js application grows bigger and consists
of multiple components you might run into the
problem of how to share data across the those
components and make sure that components which
are using the same data are always updated if data
is changing
•  Vuex is a library to use as a centralized state
management in your application.
70Vue.js
Vuex
•  Vuex Store concept:
•  State Tree: An object containing the data
•  Getters: Used to access data from the state tree of the store
•  Mutations: Handler functions that perform modifications of
data in the state tree
•  Actions: Functions that commit mutations. The main
difference to Mutations is that Actions can contain
asynchronous operations
71Vue.js
Vuex
•  Installation
•  Include via CDN (Content Delivery Network):
<script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3.0.1/dist/vuex.js"></script>
•  Or via npm:
vue init webpack-simple vue-vuex
cd vue-vuex/
npm install
npm install vuex - - save
npm run dev
72Vue.js

Recommended for you

Usando JMeter para testar sua aplicação JSF
Usando JMeter para testar sua aplicação JSFUsando JMeter para testar sua aplicação JSF
Usando JMeter para testar sua aplicação JSF

O documento descreve como usar o JMeter para testar o desempenho de uma aplicação JSF. Ele explica como instalar e configurar o JMeter, adicionando elementos como grupos de usuários, requisições HTTP e extrator de parâmetros para simular o login e navegação em uma aplicação JSF. Além disso, fornece dicas para visualizar e analisar os resultados dos testes de desempenho executados pelo JMeter.

jmeter jsf
ICEIS 2013 Presentation
ICEIS 2013 PresentationICEIS 2013 Presentation
ICEIS 2013 Presentation

This document presents an approach for reconciling independently evolved software product lines (SPLs) by tracking changes through a delta model. It aims to promote merging of SPLs that have diverged over time from an initial shared version. The approach calculates feature dependencies to determine automatic, semi-automatic, or manual merge strategies. An initial tool was tested on a case study of evolving features in a university's enterprise system. Future work includes refining the tool and further validation through more comprehensive analysis of feature evolution and conflict types.

Enums
EnumsEnums
Enums

O documento discute o uso de enums em Java para representar constantes enumeradas e sua persistência. Enums podem representar status de forma mais clara do que inteiros e permitem armazenar descrições. Sua persistência usa o mapeamento ordinal, armazenando o índice da constante no banco de dados.

Vuex
•  Within the src folder create a new subfolder named
store. Within that folder create a new file store.js and
insert the following code:
73Vue.js
Vuex
•  First you need to import store. Next, add store to the
configuration object which is passed to the Vue
constructor. By providing the store option to the root
instance, the store will be injected into all child
components of the root and will be available on
them as this.$store:
74Vue.js
Vuex
•  Now we can implement a simple counter:
75Vue.js
Vuex
•  Keep vuex data between request
•  npm install vuex-persistedstate
•  npm install vue-cookies
76Vue.js

Recommended for you

Conditional Execution - A Pattern for the Implementation of Fine-Grained Vari...
Conditional Execution - A Pattern for the Implementation of Fine-Grained Vari...Conditional Execution - A Pattern for the Implementation of Fine-Grained Vari...
Conditional Execution - A Pattern for the Implementation of Fine-Grained Vari...

This paper presents the Conditional Execution pattern for implementing fine-grained variabilities in software product lines. The pattern allows variabilities to be activated or deactivated dynamically based on configuration parameters. It was used successfully in three web-based product lines. The pattern addresses how to implement fine-grained variabilities to allow dynamic product configuration without major architecture changes while maintaining performance and flexibility across modules.

Principles of Roods Approach!!!!!!!.pptx
Principles of Roods Approach!!!!!!!.pptxPrinciples of Roods Approach!!!!!!!.pptx
Principles of Roods Approach!!!!!!!.pptx

Principles of Rood’s Approach Treatment technique used in physiotherapy for neurological patients which aids them to recover and improve quality of life Facilitatory techniques Inhibitory techniques

#physiotherapy##roodsapproach##neurophysiotherapy#
Front Desk Management in the Odoo 17 ERP
Front Desk  Management in the Odoo 17 ERPFront Desk  Management in the Odoo 17 ERP
Front Desk Management in the Odoo 17 ERP

Front desk officers are responsible for taking care of guests and customers. Their work mainly involves interacting with customers and business partners, either in person or through phone calls.

front desk in odoo 17odoo 17odoo erp
Vue Pre-rendering
77Vue.js
Vue Pre-rendering
•  One of the downsides to Javascript-based apps is
that the browser receives an essentially empty page
from the server. The DOM cannot be built until the
Javascript has been downloaded and run.
•  It have an impact on SEO (Search Engine
Optimization) if crawlers can’t see content of the
page quickly
78Vue.js
Vue Pre-rendering
•  Server-side rendering (SSR) overcomes this issue by
rendering the app on the server so that the client
receives the complete DOM content when the page
is loaded, before Javascript is even run.
•  Your app will need to be executable on the server,
•  Your app will run on each request to the server, adding
aditional load and slowing responses
•  You can only do SSR with Node.js
79Vue.js
Vue Pre-rendering
•  There’s another way to tackle the empty page
problem: pre-rendering.
•  With this approach you run your app before deploying it,
capture the page output and replace your HTML files with this
captured output
•  It’s pretty much the same concept as SSR except it’s done
pre-deployment in your development environment, not a live
server
80Vue.js
DEV PROD
pre-
rendering

Recommended for you

The membership Module in the Odoo 17 ERP
The membership Module in the Odoo 17 ERPThe membership Module in the Odoo 17 ERP
The membership Module in the Odoo 17 ERP

Some business organizations give membership to their customers to ensure the long term relationship with those customers. If the customer is a member of the business then they get special offers and other benefits. The membership module in odoo 17 is helpful to manage everything related to the membership of multiple customers.

odoo 17members modulemembers in odoo 17
Book Allied Health Sciences kmu MCQs.docx
Book Allied Health Sciences kmu MCQs.docxBook Allied Health Sciences kmu MCQs.docx
Book Allied Health Sciences kmu MCQs.docx

This book for Allied Health Sciences, DPT and BS Nursing for 1st and 2nd semester.

Bedok NEWater Photostory - COM322 Assessment (Story 2)
Bedok NEWater Photostory - COM322 Assessment (Story 2)Bedok NEWater Photostory - COM322 Assessment (Story 2)
Bedok NEWater Photostory - COM322 Assessment (Story 2)

COM322 Assessment - Story 2

Vue Pre-rendering
•  Pre-rendering pros
•  No additional server load,
•  A simpler production setup and simpler app code
•  Doesn’t require a Node.js production server
•  Pre-rendering cons
•  Doesn’t work for pages that display changing data e.g. tables
•  Doesn’t work for pages that have user-specific content e.g.
an account page with a user’s personal details
•  You’ll need to pre-render every route in the app indiviually.
81Vue.js
Vue Pre-rendering
•  Let’s take our vue-router project with 2 routers /foo
and /bar
82Vue.js
Vue Pre-rendering
•  Step 1: There are three additional modules we’ll
need to install
npm install http-server html-webpack-plugin
prerender-spa-plugin --save
83Vue.js
Vue Pre-rendering
•  Step 2: Include Webpack and PrerenderSpa plugins
•  Open the webpack.config.js file and include http-webpack-
plugin and prerender-spa-plugin
84Vue.js

Recommended for you

Lecture_Notes_Unit4_Chapter_8_9_10_RDBMS for the students affiliated by alaga...
Lecture_Notes_Unit4_Chapter_8_9_10_RDBMS for the students affiliated by alaga...Lecture_Notes_Unit4_Chapter_8_9_10_RDBMS for the students affiliated by alaga...
Lecture_Notes_Unit4_Chapter_8_9_10_RDBMS for the students affiliated by alaga...

Title: Relational Database Management System Concepts(RDBMS) Description: Welcome to the comprehensive guide on Relational Database Management System (RDBMS) concepts, tailored for final year B.Sc. Computer Science students affiliated with Alagappa University. This document covers fundamental principles and advanced topics in RDBMS, offering a structured approach to understanding databases in the context of modern computing. PDF content is prepared from the text book Learn Oracle 8I by JOSE A RAMALHO. Key Topics Covered: Main Topic : DATA INTEGRITY, CREATING AND MAINTAINING A TABLE AND INDEX Sub-Topic : Data Integrity,Types of Integrity, Integrity Constraints, Primary Key, Foreign key, unique key, self referential integrity, creating and maintain a table, Modifying a table, alter a table, Deleting a table Create an Index, Alter Index, Drop Index, Function based index, obtaining information about index, Difference between ROWID and ROWNUM Target Audience: Final year B.Sc. Computer Science students at Alagappa University seeking a solid foundation in RDBMS principles for academic and practical applications. About the Author: Dr. S. Murugan is Associate Professor at Alagappa Government Arts College, Karaikudi. With 23 years of teaching experience in the field of Computer Science, Dr. S. Murugan has a passion for simplifying complex concepts in database management. Disclaimer: This document is intended for educational purposes only. The content presented here reflects the author’s understanding in the field of RDBMS as of 2024. Feedback and Contact Information: Your feedback is valuable! For any queries or suggestions, please contact muruganjit@agacollege.in

data integritytypes of integrityintegrity constraints
How to Handle the Separate Discount Account on Invoice in Odoo 17
How to Handle the Separate Discount Account on Invoice in Odoo 17How to Handle the Separate Discount Account on Invoice in Odoo 17
How to Handle the Separate Discount Account on Invoice in Odoo 17

In Odoo, separate discount account can be set up to accurately track and manage discounts applied on various transaction and ensure precise financial reporting and analysis

discount accountinvoice in odoo 17odoo 17
Vue Pre-rendering
•  Step 3: Change the build.js location
•  Now we change our Webpack “publicPath” in same
webpack.config.js file since the index.html will now be in the
same folder as the other static assets
•  And we’ll also need to change location of the build.js file in
our index.html file due to the changed path
85Vue.js
Vue Pre-rendering
•  Step 4: Include index.html and add pre-render
•  The webpack-simple template doesn’t include the index.html
file in the Webpack build output. However when we pre-
render the app we’ll need to overwrite our index.html, so let’s
add it to the output so as not to destroy the original
•  Now we need to add prerender-spa-plugin to our webpack
config. Make sure it comes after html-webpack-plugin
•  New add the index.html and our routes
•  The first argument to PrerenderSpaPlugin is the location of our
index.html file, the second is a list of routes in the app.
•  For each route we add, we’ll get a different output file!
86Vue.js
Vue Pre-rendering
•  Step 4: Include index.html and add pre-render
87Vue.js
Vue Pre-rendering
•  Step 5: Building
•  Now make the build for production
•  npm run build
•  It will generated one folder for each route with the static html
code
88Vue.js

Recommended for you

National Learning Camp( Reading Intervention for grade1)
National Learning Camp( Reading Intervention for grade1)National Learning Camp( Reading Intervention for grade1)
National Learning Camp( Reading Intervention for grade1)

Reading Presentation

AI_in_HR_Presentation Part 1 2024 0703.pdf
AI_in_HR_Presentation Part 1 2024 0703.pdfAI_in_HR_Presentation Part 1 2024 0703.pdf
AI_in_HR_Presentation Part 1 2024 0703.pdf

AI In HR

Understanding and Interpreting Teachers’ TPACK for Teaching Multimodalities i...
Understanding and Interpreting Teachers’ TPACK for Teaching Multimodalities i...Understanding and Interpreting Teachers’ TPACK for Teaching Multimodalities i...
Understanding and Interpreting Teachers’ TPACK for Teaching Multimodalities i...

Presented as a plenary session in iTELL 2024 in Salatiga on 4 July 2024. The plenary focuses on understanding and intepreting relevant TPACK competence for teachers to be adept in teaching multimodality in the digital age. It juxtaposes the results of research on multimodality with its contextual implementation in the teaching of English subject in the Indonesian Emancipated Curriculum.

#itell2024tpackdpack
Vue Pre-rendering
•  Step 6: Running
•  You can run the application inside dist folder using the http-
server
./node_modules/.bin/http-server ./dist/
•  It generated the static content of page, but not the dynamic
information.
•  The “Foo” word is not present
89Vue.js
Awesome Vue
https://github.com/vuejs/awesome-vue
90Vue.js
• Source Code
•  https://github.com/jadsonjs/vuejs
91Vue.js
• References
•  https://vuejs.org/v2/guide/
•  https://www.devmedia.com.br/vue-js-tutorial/
38042
•  https://www.shopify.com/partners/blog/vuejs-
tutorial
•  https://github.com/vuejs-templates/webpack
•  http://www.vuejs-brasil.com.br/crie-rapidamente-
um-projeto-vue-com-vue-cli-e-browserify/
•  https://medium.com/@thiagorossener/como-fazer-
um-hello-world-com-vue-js-2-62ea708c1399
92Vue.js

Recommended for you

matatag curriculum education for Kindergarten
matatag curriculum education for Kindergartenmatatag curriculum education for Kindergarten
matatag curriculum education for Kindergarten

for educational purposes only

curriculumeducacion
"DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY ...
"DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY ..."DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY ...
"DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY ...

"DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY NĂM 2024 KHỐI NGÀNH NGOÀI SƯ PHẠM"

Views in Odoo - Advanced Views - Pivot View in Odoo 17
Views in Odoo - Advanced Views - Pivot View in Odoo 17Views in Odoo - Advanced Views - Pivot View in Odoo 17
Views in Odoo - Advanced Views - Pivot View in Odoo 17

In Odoo, the pivot view is a graphical representation of data that allows users to analyze and summarize large datasets quickly. It's a powerful tool for generating insights from your business data. The pivot view in Odoo is a valuable tool for analyzing and summarizing large datasets, helping you gain insights into your business operations.

odoo 17pivot viewpivot view in odoo
• References
•  http://vegibit.com/vue-js-directives/
•  https://alligator.io/vuejs/rest-api-axios/
•  https://www.thepolyglotdeveloper.com/2017/10/
consume-api-data-http-vuejs-web-application/
•  https://medium.com/codingthesmartway-com-
blog/vue-js-2-state-management-with-vuex-
introduction-db26cb495113
•  https://vuejsdevelopers.com/2017/04/01/vue-js-
prerendering-node-laravel/
93Vue.js
94Vue.js
source: https://blog.hellojs.org/differences-between-angularjs-vuejs-and-reactjs-5d80203dfd16
thank you

More Related Content

What's hot

Vue, vue router, vuex
Vue, vue router, vuexVue, vue router, vuex
Vue, vue router, vuex
Samundra khatri
 
An introduction to Vue.js
An introduction to Vue.jsAn introduction to Vue.js
An introduction to Vue.js
Javier Lafora Rey
 
Basics of Vue.js 2019
Basics of Vue.js 2019Basics of Vue.js 2019
Basics of Vue.js 2019
Paul Bele
 
Vue.js for beginners
Vue.js for beginnersVue.js for beginners
Vue.js for beginners
Julio Bitencourt
 
Node js introduction
Node js introductionNode js introduction
Node js introduction
Joseph de Castelnau
 
Nodejs presentation
Nodejs presentationNodejs presentation
Nodejs presentation
Arvind Devaraj
 
Introduction to Node.js
Introduction to Node.jsIntroduction to Node.js
Introduction to Node.js
AMD Developer Central
 
The Point of Vue - Intro to Vue.js
The Point of Vue - Intro to Vue.jsThe Point of Vue - Intro to Vue.js
The Point of Vue - Intro to Vue.js
Holly Schinsky
 
How to implement internationalization (i18n) in angular application(multiple ...
How to implement internationalization (i18n) in angular application(multiple ...How to implement internationalization (i18n) in angular application(multiple ...
How to implement internationalization (i18n) in angular application(multiple ...
Katy Slemon
 
Vue js for beginner
Vue js for beginner Vue js for beginner
Vue js for beginner
Chandrasekar G
 
React workshop presentation
React workshop presentationReact workshop presentation
React workshop presentation
Bojan Golubović
 
Introduction to VueJS & Vuex
Introduction to VueJS & VuexIntroduction to VueJS & Vuex
Introduction to VueJS & Vuex
Bernd Alter
 
Love at first Vue
Love at first VueLove at first Vue
Love at first Vue
Dalibor Gogic
 
Learn react-js
Learn react-jsLearn react-js
Vue JS Intro
Vue JS IntroVue JS Intro
Vue JS Intro
Muhammad Rizki Rijal
 
VueJS: The Simple Revolution
VueJS: The Simple RevolutionVueJS: The Simple Revolution
VueJS: The Simple Revolution
Rafael Casuso Romate
 
React js
React jsReact js
React js
Alireza Akbari
 
Deep dive into Vue.js
Deep dive into Vue.jsDeep dive into Vue.js
Deep dive into Vue.js
선협 이
 
Introduction to angular with a simple but complete project
Introduction to angular with a simple but complete projectIntroduction to angular with a simple but complete project
Introduction to angular with a simple but complete project
Jadson Santos
 
Nuxt.JS Introdruction
Nuxt.JS IntrodructionNuxt.JS Introdruction
Nuxt.JS Introdruction
David Ličen
 

What's hot (20)

Vue, vue router, vuex
Vue, vue router, vuexVue, vue router, vuex
Vue, vue router, vuex
 
An introduction to Vue.js
An introduction to Vue.jsAn introduction to Vue.js
An introduction to Vue.js
 
Basics of Vue.js 2019
Basics of Vue.js 2019Basics of Vue.js 2019
Basics of Vue.js 2019
 
Vue.js for beginners
Vue.js for beginnersVue.js for beginners
Vue.js for beginners
 
Node js introduction
Node js introductionNode js introduction
Node js introduction
 
Nodejs presentation
Nodejs presentationNodejs presentation
Nodejs presentation
 
Introduction to Node.js
Introduction to Node.jsIntroduction to Node.js
Introduction to Node.js
 
The Point of Vue - Intro to Vue.js
The Point of Vue - Intro to Vue.jsThe Point of Vue - Intro to Vue.js
The Point of Vue - Intro to Vue.js
 
How to implement internationalization (i18n) in angular application(multiple ...
How to implement internationalization (i18n) in angular application(multiple ...How to implement internationalization (i18n) in angular application(multiple ...
How to implement internationalization (i18n) in angular application(multiple ...
 
Vue js for beginner
Vue js for beginner Vue js for beginner
Vue js for beginner
 
React workshop presentation
React workshop presentationReact workshop presentation
React workshop presentation
 
Introduction to VueJS & Vuex
Introduction to VueJS & VuexIntroduction to VueJS & Vuex
Introduction to VueJS & Vuex
 
Love at first Vue
Love at first VueLove at first Vue
Love at first Vue
 
Learn react-js
Learn react-jsLearn react-js
Learn react-js
 
Vue JS Intro
Vue JS IntroVue JS Intro
Vue JS Intro
 
VueJS: The Simple Revolution
VueJS: The Simple RevolutionVueJS: The Simple Revolution
VueJS: The Simple Revolution
 
React js
React jsReact js
React js
 
Deep dive into Vue.js
Deep dive into Vue.jsDeep dive into Vue.js
Deep dive into Vue.js
 
Introduction to angular with a simple but complete project
Introduction to angular with a simple but complete projectIntroduction to angular with a simple but complete project
Introduction to angular with a simple but complete project
 
Nuxt.JS Introdruction
Nuxt.JS IntrodructionNuxt.JS Introdruction
Nuxt.JS Introdruction
 

Similar to Vue.js

Vue 2.0 + Vuex Router & Vuex at Vue.js
Vue 2.0 + Vuex Router & Vuex at Vue.jsVue 2.0 + Vuex Router & Vuex at Vue.js
Vue 2.0 + Vuex Router & Vuex at Vue.js
Takuya Tejima
 
Vue.js - AMS & Vuex
Vue.js - AMS & VuexVue.js - AMS & Vuex
Vue.js - AMS & Vuex
Emanuell Dan Minciu
 
Drupal point of vue
Drupal point of vueDrupal point of vue
Drupal point of vue
David Ličen
 
Vue+rails
Vue+railsVue+rails
Vue+rails
Rabin Gaire
 
Introduction to web application development with Vue (for absolute beginners)...
Introduction to web application development with Vue (for absolute beginners)...Introduction to web application development with Vue (for absolute beginners)...
Introduction to web application development with Vue (for absolute beginners)...
Lucas Jellema
 
Let's vue
Let's vueLet's vue
Let's vue
Plane Chao
 
Asp 1a-aspnetmvc
Asp 1a-aspnetmvcAsp 1a-aspnetmvc
Asp 1a-aspnetmvc
Fajar Baskoro
 
Aspnetmvc 1
Aspnetmvc 1Aspnetmvc 1
Aspnetmvc 1
Fajar Baskoro
 
Nodejs getting started
Nodejs getting startedNodejs getting started
Nodejs getting started
Triet Ho
 
Introduction to node.js by jiban
Introduction to node.js by jibanIntroduction to node.js by jiban
Introduction to node.js by jiban
Jibanananda Sana
 
Node js installation steps.pptx slide share ppts
Node js installation steps.pptx slide share pptsNode js installation steps.pptx slide share ppts
Node js installation steps.pptx slide share ppts
HemaSenthil5
 
Angular js
Angular jsAngular js
Angular js
Hritesh Saha
 
Vue js and Dyploma
Vue js and DyplomaVue js and Dyploma
Vue js and Dyploma
Yoram Kornatzky
 
Web worker in your angular application
Web worker in your angular applicationWeb worker in your angular application
Web worker in your angular application
Suresh Patidar
 
第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]
Kuro Hsu
 
Overview of the AngularJS framework
Overview of the AngularJS framework Overview of the AngularJS framework
Overview of the AngularJS framework
Yakov Fain
 
Creating Modular Test-Driven SPAs with Spring and AngularJS
Creating Modular Test-Driven SPAs with Spring and AngularJSCreating Modular Test-Driven SPAs with Spring and AngularJS
Creating Modular Test-Driven SPAs with Spring and AngularJS
Gunnar Hillert
 
ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 VueJS cod...
ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 VueJS cod...ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 VueJS cod...
ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 VueJS cod...
Gavin Pickin
 
Nuxtjs cheat-sheet
Nuxtjs cheat-sheetNuxtjs cheat-sheet
Nuxtjs cheat-sheet
ValeriaCastillo71
 
Cloud computing
Cloud computingCloud computing
Cloud computing
Anuradha Namal
 

Similar to Vue.js (20)

Vue 2.0 + Vuex Router & Vuex at Vue.js
Vue 2.0 + Vuex Router & Vuex at Vue.jsVue 2.0 + Vuex Router & Vuex at Vue.js
Vue 2.0 + Vuex Router & Vuex at Vue.js
 
Vue.js - AMS & Vuex
Vue.js - AMS & VuexVue.js - AMS & Vuex
Vue.js - AMS & Vuex
 
Drupal point of vue
Drupal point of vueDrupal point of vue
Drupal point of vue
 
Vue+rails
Vue+railsVue+rails
Vue+rails
 
Introduction to web application development with Vue (for absolute beginners)...
Introduction to web application development with Vue (for absolute beginners)...Introduction to web application development with Vue (for absolute beginners)...
Introduction to web application development with Vue (for absolute beginners)...
 
Let's vue
Let's vueLet's vue
Let's vue
 
Asp 1a-aspnetmvc
Asp 1a-aspnetmvcAsp 1a-aspnetmvc
Asp 1a-aspnetmvc
 
Aspnetmvc 1
Aspnetmvc 1Aspnetmvc 1
Aspnetmvc 1
 
Nodejs getting started
Nodejs getting startedNodejs getting started
Nodejs getting started
 
Introduction to node.js by jiban
Introduction to node.js by jibanIntroduction to node.js by jiban
Introduction to node.js by jiban
 
Node js installation steps.pptx slide share ppts
Node js installation steps.pptx slide share pptsNode js installation steps.pptx slide share ppts
Node js installation steps.pptx slide share ppts
 
Angular js
Angular jsAngular js
Angular js
 
Vue js and Dyploma
Vue js and DyplomaVue js and Dyploma
Vue js and Dyploma
 
Web worker in your angular application
Web worker in your angular applicationWeb worker in your angular application
Web worker in your angular application
 
第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]
 
Overview of the AngularJS framework
Overview of the AngularJS framework Overview of the AngularJS framework
Overview of the AngularJS framework
 
Creating Modular Test-Driven SPAs with Spring and AngularJS
Creating Modular Test-Driven SPAs with Spring and AngularJSCreating Modular Test-Driven SPAs with Spring and AngularJS
Creating Modular Test-Driven SPAs with Spring and AngularJS
 
ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 VueJS cod...
ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 VueJS cod...ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 VueJS cod...
ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 VueJS cod...
 
Nuxtjs cheat-sheet
Nuxtjs cheat-sheetNuxtjs cheat-sheet
Nuxtjs cheat-sheet
 
Cloud computing
Cloud computingCloud computing
Cloud computing
 

More from Jadson Santos

A Deep Dive into Continuous Integration Monitoring Practices
A Deep Dive into Continuous Integration Monitoring PracticesA Deep Dive into Continuous Integration Monitoring Practices
A Deep Dive into Continuous Integration Monitoring Practices
Jadson Santos
 
Containerizing a Web Application with Vue.js and Java
Containerizing a Web Application with Vue.js and JavaContainerizing a Web Application with Vue.js and Java
Containerizing a Web Application with Vue.js and Java
Jadson Santos
 
Continuous Delivery with Jenkins
Continuous Delivery with JenkinsContinuous Delivery with Jenkins
Continuous Delivery with Jenkins
Jadson Santos
 
Cd with Github Travis CI and Heroku
Cd with Github Travis CI and HerokuCd with Github Travis CI and Heroku
Cd with Github Travis CI and Heroku
Jadson Santos
 
Jenkins Continuous Delivery
Jenkins Continuous DeliveryJenkins Continuous Delivery
Jenkins Continuous Delivery
Jadson Santos
 
Hazelcast Distributed Lock
Hazelcast Distributed LockHazelcast Distributed Lock
Hazelcast Distributed Lock
Jadson Santos
 
Bootstrap
BootstrapBootstrap
Bootstrap
Jadson Santos
 
Testes Unitários
Testes UnitáriosTestes Unitários
Testes Unitários
Jadson Santos
 
Java8
Java8Java8
Gradle
GradleGradle
Git
GitGit
Introdução ao Flyway
Introdução ao FlywayIntrodução ao Flyway
Introdução ao Flyway
Jadson Santos
 
Mini curso gerenciamento de configuração e mudança com GIT + Eclipse - I...
Mini curso gerenciamento de configuração e mudança com GIT + Eclipse  -  I...Mini curso gerenciamento de configuração e mudança com GIT + Eclipse  -  I...
Mini curso gerenciamento de configuração e mudança com GIT + Eclipse - I...
Jadson Santos
 
Usando hiberante de forma otimizada
Usando hiberante de forma otimizadaUsando hiberante de forma otimizada
Usando hiberante de forma otimizada
Jadson Santos
 
Usando JMeter para testar sua aplicação JSF
Usando JMeter para testar sua aplicação JSFUsando JMeter para testar sua aplicação JSF
Usando JMeter para testar sua aplicação JSF
Jadson Santos
 
ICEIS 2013 Presentation
ICEIS 2013 PresentationICEIS 2013 Presentation
ICEIS 2013 Presentation
Jadson Santos
 
Enums
EnumsEnums
Conditional Execution - A Pattern for the Implementation of Fine-Grained Vari...
Conditional Execution - A Pattern for the Implementation of Fine-Grained Vari...Conditional Execution - A Pattern for the Implementation of Fine-Grained Vari...
Conditional Execution - A Pattern for the Implementation of Fine-Grained Vari...
Jadson Santos
 

More from Jadson Santos (18)

A Deep Dive into Continuous Integration Monitoring Practices
A Deep Dive into Continuous Integration Monitoring PracticesA Deep Dive into Continuous Integration Monitoring Practices
A Deep Dive into Continuous Integration Monitoring Practices
 
Containerizing a Web Application with Vue.js and Java
Containerizing a Web Application with Vue.js and JavaContainerizing a Web Application with Vue.js and Java
Containerizing a Web Application with Vue.js and Java
 
Continuous Delivery with Jenkins
Continuous Delivery with JenkinsContinuous Delivery with Jenkins
Continuous Delivery with Jenkins
 
Cd with Github Travis CI and Heroku
Cd with Github Travis CI and HerokuCd with Github Travis CI and Heroku
Cd with Github Travis CI and Heroku
 
Jenkins Continuous Delivery
Jenkins Continuous DeliveryJenkins Continuous Delivery
Jenkins Continuous Delivery
 
Hazelcast Distributed Lock
Hazelcast Distributed LockHazelcast Distributed Lock
Hazelcast Distributed Lock
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
Testes Unitários
Testes UnitáriosTestes Unitários
Testes Unitários
 
Java8
Java8Java8
Java8
 
Gradle
GradleGradle
Gradle
 
Git
GitGit
Git
 
Introdução ao Flyway
Introdução ao FlywayIntrodução ao Flyway
Introdução ao Flyway
 
Mini curso gerenciamento de configuração e mudança com GIT + Eclipse - I...
Mini curso gerenciamento de configuração e mudança com GIT + Eclipse  -  I...Mini curso gerenciamento de configuração e mudança com GIT + Eclipse  -  I...
Mini curso gerenciamento de configuração e mudança com GIT + Eclipse - I...
 
Usando hiberante de forma otimizada
Usando hiberante de forma otimizadaUsando hiberante de forma otimizada
Usando hiberante de forma otimizada
 
Usando JMeter para testar sua aplicação JSF
Usando JMeter para testar sua aplicação JSFUsando JMeter para testar sua aplicação JSF
Usando JMeter para testar sua aplicação JSF
 
ICEIS 2013 Presentation
ICEIS 2013 PresentationICEIS 2013 Presentation
ICEIS 2013 Presentation
 
Enums
EnumsEnums
Enums
 
Conditional Execution - A Pattern for the Implementation of Fine-Grained Vari...
Conditional Execution - A Pattern for the Implementation of Fine-Grained Vari...Conditional Execution - A Pattern for the Implementation of Fine-Grained Vari...
Conditional Execution - A Pattern for the Implementation of Fine-Grained Vari...
 

Recently uploaded

Principles of Roods Approach!!!!!!!.pptx
Principles of Roods Approach!!!!!!!.pptxPrinciples of Roods Approach!!!!!!!.pptx
Principles of Roods Approach!!!!!!!.pptx
ibtesaam huma
 
Front Desk Management in the Odoo 17 ERP
Front Desk  Management in the Odoo 17 ERPFront Desk  Management in the Odoo 17 ERP
Front Desk Management in the Odoo 17 ERP
Celine George
 
The membership Module in the Odoo 17 ERP
The membership Module in the Odoo 17 ERPThe membership Module in the Odoo 17 ERP
The membership Module in the Odoo 17 ERP
Celine George
 
Book Allied Health Sciences kmu MCQs.docx
Book Allied Health Sciences kmu MCQs.docxBook Allied Health Sciences kmu MCQs.docx
Book Allied Health Sciences kmu MCQs.docx
drtech3715
 
Bedok NEWater Photostory - COM322 Assessment (Story 2)
Bedok NEWater Photostory - COM322 Assessment (Story 2)Bedok NEWater Photostory - COM322 Assessment (Story 2)
Bedok NEWater Photostory - COM322 Assessment (Story 2)
Liyana Rozaini
 
Lecture_Notes_Unit4_Chapter_8_9_10_RDBMS for the students affiliated by alaga...
Lecture_Notes_Unit4_Chapter_8_9_10_RDBMS for the students affiliated by alaga...Lecture_Notes_Unit4_Chapter_8_9_10_RDBMS for the students affiliated by alaga...
Lecture_Notes_Unit4_Chapter_8_9_10_RDBMS for the students affiliated by alaga...
Murugan Solaiyappan
 
How to Handle the Separate Discount Account on Invoice in Odoo 17
How to Handle the Separate Discount Account on Invoice in Odoo 17How to Handle the Separate Discount Account on Invoice in Odoo 17
How to Handle the Separate Discount Account on Invoice in Odoo 17
Celine George
 
National Learning Camp( Reading Intervention for grade1)
National Learning Camp( Reading Intervention for grade1)National Learning Camp( Reading Intervention for grade1)
National Learning Camp( Reading Intervention for grade1)
SaadaGrijaldo1
 
AI_in_HR_Presentation Part 1 2024 0703.pdf
AI_in_HR_Presentation Part 1 2024 0703.pdfAI_in_HR_Presentation Part 1 2024 0703.pdf
AI_in_HR_Presentation Part 1 2024 0703.pdf
SrimanigandanMadurai
 
Understanding and Interpreting Teachers’ TPACK for Teaching Multimodalities i...
Understanding and Interpreting Teachers’ TPACK for Teaching Multimodalities i...Understanding and Interpreting Teachers’ TPACK for Teaching Multimodalities i...
Understanding and Interpreting Teachers’ TPACK for Teaching Multimodalities i...
Neny Isharyanti
 
matatag curriculum education for Kindergarten
matatag curriculum education for Kindergartenmatatag curriculum education for Kindergarten
matatag curriculum education for Kindergarten
SarahAlie1
 
"DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY ...
"DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY ..."DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY ...
"DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY ...
thanhluan21
 
Views in Odoo - Advanced Views - Pivot View in Odoo 17
Views in Odoo - Advanced Views - Pivot View in Odoo 17Views in Odoo - Advanced Views - Pivot View in Odoo 17
Views in Odoo - Advanced Views - Pivot View in Odoo 17
Celine George
 
Unlocking Educational Synergy-DIKSHA & Google Classroom.pptx
Unlocking Educational Synergy-DIKSHA & Google Classroom.pptxUnlocking Educational Synergy-DIKSHA & Google Classroom.pptx
Unlocking Educational Synergy-DIKSHA & Google Classroom.pptx
bipin95
 
NAEYC Code of Ethical Conduct Resource Book
NAEYC Code of Ethical Conduct Resource BookNAEYC Code of Ethical Conduct Resource Book
NAEYC Code of Ethical Conduct Resource Book
lakitawilson
 
Howe Writing Center - Orientation Summer 2024
Howe Writing Center - Orientation Summer 2024Howe Writing Center - Orientation Summer 2024
Howe Writing Center - Orientation Summer 2024
Elizabeth Walsh
 
Chapter-2-Era-of-One-party-Dominance-Class-12-Political-Science-Notes-2 (1).pptx
Chapter-2-Era-of-One-party-Dominance-Class-12-Political-Science-Notes-2 (1).pptxChapter-2-Era-of-One-party-Dominance-Class-12-Political-Science-Notes-2 (1).pptx
Chapter-2-Era-of-One-party-Dominance-Class-12-Political-Science-Notes-2 (1).pptx
Brajeswar Paul
 
Delegation Inheritance in Odoo 17 and Its Use Cases
Delegation Inheritance in Odoo 17 and Its Use CasesDelegation Inheritance in Odoo 17 and Its Use Cases
Delegation Inheritance in Odoo 17 and Its Use Cases
Celine George
 
(T.L.E.) Agriculture: Essentials of Gardening
(T.L.E.) Agriculture: Essentials of Gardening(T.L.E.) Agriculture: Essentials of Gardening
(T.L.E.) Agriculture: Essentials of Gardening
MJDuyan
 

Recently uploaded (20)

Principles of Roods Approach!!!!!!!.pptx
Principles of Roods Approach!!!!!!!.pptxPrinciples of Roods Approach!!!!!!!.pptx
Principles of Roods Approach!!!!!!!.pptx
 
Front Desk Management in the Odoo 17 ERP
Front Desk  Management in the Odoo 17 ERPFront Desk  Management in the Odoo 17 ERP
Front Desk Management in the Odoo 17 ERP
 
The membership Module in the Odoo 17 ERP
The membership Module in the Odoo 17 ERPThe membership Module in the Odoo 17 ERP
The membership Module in the Odoo 17 ERP
 
Book Allied Health Sciences kmu MCQs.docx
Book Allied Health Sciences kmu MCQs.docxBook Allied Health Sciences kmu MCQs.docx
Book Allied Health Sciences kmu MCQs.docx
 
Bedok NEWater Photostory - COM322 Assessment (Story 2)
Bedok NEWater Photostory - COM322 Assessment (Story 2)Bedok NEWater Photostory - COM322 Assessment (Story 2)
Bedok NEWater Photostory - COM322 Assessment (Story 2)
 
“A NOSSA CA(U)SA”. .
“A NOSSA CA(U)SA”.                      .“A NOSSA CA(U)SA”.                      .
“A NOSSA CA(U)SA”. .
 
Lecture_Notes_Unit4_Chapter_8_9_10_RDBMS for the students affiliated by alaga...
Lecture_Notes_Unit4_Chapter_8_9_10_RDBMS for the students affiliated by alaga...Lecture_Notes_Unit4_Chapter_8_9_10_RDBMS for the students affiliated by alaga...
Lecture_Notes_Unit4_Chapter_8_9_10_RDBMS for the students affiliated by alaga...
 
How to Handle the Separate Discount Account on Invoice in Odoo 17
How to Handle the Separate Discount Account on Invoice in Odoo 17How to Handle the Separate Discount Account on Invoice in Odoo 17
How to Handle the Separate Discount Account on Invoice in Odoo 17
 
National Learning Camp( Reading Intervention for grade1)
National Learning Camp( Reading Intervention for grade1)National Learning Camp( Reading Intervention for grade1)
National Learning Camp( Reading Intervention for grade1)
 
AI_in_HR_Presentation Part 1 2024 0703.pdf
AI_in_HR_Presentation Part 1 2024 0703.pdfAI_in_HR_Presentation Part 1 2024 0703.pdf
AI_in_HR_Presentation Part 1 2024 0703.pdf
 
Understanding and Interpreting Teachers’ TPACK for Teaching Multimodalities i...
Understanding and Interpreting Teachers’ TPACK for Teaching Multimodalities i...Understanding and Interpreting Teachers’ TPACK for Teaching Multimodalities i...
Understanding and Interpreting Teachers’ TPACK for Teaching Multimodalities i...
 
matatag curriculum education for Kindergarten
matatag curriculum education for Kindergartenmatatag curriculum education for Kindergarten
matatag curriculum education for Kindergarten
 
"DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY ...
"DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY ..."DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY ...
"DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY ...
 
Views in Odoo - Advanced Views - Pivot View in Odoo 17
Views in Odoo - Advanced Views - Pivot View in Odoo 17Views in Odoo - Advanced Views - Pivot View in Odoo 17
Views in Odoo - Advanced Views - Pivot View in Odoo 17
 
Unlocking Educational Synergy-DIKSHA & Google Classroom.pptx
Unlocking Educational Synergy-DIKSHA & Google Classroom.pptxUnlocking Educational Synergy-DIKSHA & Google Classroom.pptx
Unlocking Educational Synergy-DIKSHA & Google Classroom.pptx
 
NAEYC Code of Ethical Conduct Resource Book
NAEYC Code of Ethical Conduct Resource BookNAEYC Code of Ethical Conduct Resource Book
NAEYC Code of Ethical Conduct Resource Book
 
Howe Writing Center - Orientation Summer 2024
Howe Writing Center - Orientation Summer 2024Howe Writing Center - Orientation Summer 2024
Howe Writing Center - Orientation Summer 2024
 
Chapter-2-Era-of-One-party-Dominance-Class-12-Political-Science-Notes-2 (1).pptx
Chapter-2-Era-of-One-party-Dominance-Class-12-Political-Science-Notes-2 (1).pptxChapter-2-Era-of-One-party-Dominance-Class-12-Political-Science-Notes-2 (1).pptx
Chapter-2-Era-of-One-party-Dominance-Class-12-Political-Science-Notes-2 (1).pptx
 
Delegation Inheritance in Odoo 17 and Its Use Cases
Delegation Inheritance in Odoo 17 and Its Use CasesDelegation Inheritance in Odoo 17 and Its Use Cases
Delegation Inheritance in Odoo 17 and Its Use Cases
 
(T.L.E.) Agriculture: Essentials of Gardening
(T.L.E.) Agriculture: Essentials of Gardening(T.L.E.) Agriculture: Essentials of Gardening
(T.L.E.) Agriculture: Essentials of Gardening
 

Vue.js

  • 2. Vue.js •  Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces •  The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. •  On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications 2Vue.js
  • 3. Vue.js •  Progressive framework is a framework that you can insert into your project as you feel the need for it •  Differently of other JavaScript framework like Angular, that since the beginning, you need a full project make in Angular, follow the “Angular rules”. •  This implies you need to learn a lot of things to start programming with Angular. 3Vue.js
  • 4. Vue.js •  Vue is more simple and flexible •  Vue allows you make just specific parts of your application. You learn just what is necessary for the problem you are dealing with. •  Or if it is necessary and you have time, you can learn more and make a full complex front-end application 100% Vue. 4Vue.js
  • 5. Vue.js •  Vue uses Javascript, Angular relies on TypeScript •  Vue is pretty easy to learn, Angular’s learning curve is much steeper •  Vue Is indicated if you are working alone or have a small team, Angular is for really large applications. 5Vue.js
  • 6. Vue.js •  While Angular offering data binding to deal with the DOM without having to touch it directly, there were still extra concepts that demanded code be structured a certain way. •  Vue had these efficiencies, but was even more lightweight. 6Vue.js
  • 8. Vue.js Hello World •  Download it from: •  https://vuejs.org/v2/guide/installation.html •  And Include the vue script in your HTML page 8Vue.js
  • 10. Vue.js Hello World •  Now we have to indicate the part of HTML that Vue.js will look at and use. •  We will create the div with “app” id 10Vue.js
  • 11. Vue.js Hello World •  Create a new Vue() object with the “el” and “data” elements. •  el tell which element of our HTML we want Vue manipulate •  The "data" field receives a javascript object with the data that will be manipulated in the context of our application 11Vue.js
  • 12. Vue.js Hello World •  To show the data of the variable "message" in the div app we use the interpolation putting the variable "message" between double keys {{ }} inside the div. 12Vue.js
  • 13. Vue.js Hello World •  Open the html file in a browser 13Vue.js
  • 16. Vue.js Directives •  Directives are the part of Vue.js that attach special meaning and behavior to plain html elements on the page 16Vue.js
  • 17. Vue.js V-model •  v-model directive to make two way binding between the HTML element and the data attribute it refers to in the Vue JavaScript code 17Vue.js
  • 18. Vue.js V-model •  When you type your name in the input text with v- model, the value type if update in the message data of Vue model and the HTML view {{message}} is updated too. •  Vue message variable ßà HTML {{message}} interpolation 18Vue.js
  • 19. Vue.js Conditionals and Loops •  v-if directive can be used to test some conditions over the JavaScript object data •  v-else directive can be used when the conditions on the v-if fails •  v-else-if directive can be used much like you would use else-if clauses in JavaScript 19Vue.js
  • 20. Vue.js Conditionals and Loops 20Vue.js
  • 21. Vue.js Directives Summary •  v-model: used to create a two way binding between the element and the data •  v-show: used to conditionally display an element (css based) •  v-if, v-else, v-else-if: used to conditionally render an element •  v-for: iterate over a range, an array, an object, or an array of objects 21Vue.js
  • 22. Vue.js Conditionals and Loops •  v-for directive can be used for interact over a list of items over the JavaScript object data 22Vue.js
  • 23. Vue.js Directives Summary •  v-on: listen to various DOM events (click, keyup, submit, etc..) •  v-bind: used to dynamically bind one or more attributes, or a component prop, to an expression •  v-text: same as {{ interpolation }} and updates the element’s textContent 23Vue.js
  • 24. Vue.js Components •  Components are reusable structures with encapsulated functionalities. That is, elements that have html, css and javascript encapsulated and that can be reused either within the same project or even in others projects 24Vue.js
  • 25. Vue.js Components •  In Vue, a component is essentially a Vue instance with pre-defined options 25Vue.js
  • 26. Vue.js Class and Style Bindings •  Vue provides special enhancements when v-bind is used with class and style 26Vue.js
  • 27. Vue.js Event Handing •  We can use the v-on directive to listen to DOM events and run some JavaScript when they’re triggered 27Vue.js
  • 29. Vue.js CLI •  You can develop a complete Single Page Application with Vue using vue-cli •  Install it via the node.js package manager (npm) 29Vue.js
  • 30. Vue.js CLI •  What is Node.js and NPM? •  Node.js is javascript development platform, the uses the google’s engine V8. Basically, you cat execute javascript applications on server side (out of a web browser) •  NPM is a package manager of Node.js, where you can manager the javascript dependences of your project ( like maven ou gradle does in Java world ). •  Similar Angular, Vue.js is not made in Node.js and does not need Node.js to run, but use its package manger. 30Vue.js
  • 31. Vue.js CLI •  Download and install node.js from: https://nodejs.org/en/ •  It will automatically install npm package manager 31Vue.js
  • 32. Vue.js CLI •  After that, install vue command line interface tool with the commands: •  $sudo npm install -g vue-cli 32Vue.js
  • 33. Vue.js CLI •  Creating a new vue project with vue-cli: •  $ vue init <template-name> <project-name> •  This command creates a project-name folder with a new vue project using a vue template. •  What is a vue template? •  Vue.js does not define a default project structure for vue projects, so you have choose what will be your project structure. 33Vue.js
  • 34. Vue.js CLI •  There are three principal vue templates: •  webpack – Uses the webpack as module bundler. It has support to vue-loader with hot reload, javascript lint and units tests. It is the more complete template. •  webpack-simple – Simplification of webpack structure, for example, it do not creates the unit test folders •  browserify - It has support to vue-loader with hot reload, javascript lint and units tests. It is more simple that webpack. 34Vue.js
  • 35. Vue.js CLI •  We will use the webpack, to to create a project called “hello-vue-cli”, use the command: •  $ vue init webpack-simple hello-vue-cli 35Vue.js
  • 36. SPA with Vue.js •  To run the empyt project: •  cd hello-vue-cli •  npm install (to downdoad the dependences) 36Vue.js node_modules: vue.js dependences src: Our Vue code assets: imgs and other external files of our application index.html: main and unique page of application App.vue: The main vue componet
  • 37. SPA with Vue.js •  The default structure of a vue component is composed of three elements: template, script, and style 37Vue.js
  • 38. SPA with Vue.js •  To run the empyt project •  npm run dev ( development environment ) 38Vue.js
  • 39. SPA with Vue.js •  Vue.js install dependences •  npm install font-awesome -- save •  npm install bulma -- save •  npm install bootstrap -- save •  etc… •  This will be install inside the node_modules. To include them, open tem index.html and include it on <head> tag 39Vue.js
  • 40. Create a new Vue Component •  Create a new .vue file with template, script and css. •  Give a name to this new component 40Vue.js
  • 41. Create a new Vue Component •  Import it com App.vue component •  Use this new component with the same name you declare insde componet .vue file 41Vue.js
  • 43. Visual Studio Code •  Syntax Highlight •  Compiler •  Integrated Terminal 43Vue.js
  • 44. Vue Extensions •  For development install Vue.js devtools on Firefox or Chrome 44Vue.js
  • 45. Vue Extensions •  For development install Vue.js devtools on Firefox or Chrome 45Vue.js
  • 46. Vue communication between components 46Vue.js
  • 47. Vue communication between components •  Son -> Father •  Son emit a event: 47Vue.js
  • 48. Vue communication between components •  Son -> Father •  Father listener the event of son and call another function: 48Vue.js
  • 49. Vue communication between components •  Father -> Son •  Father pass value to son component: 49Vue.js •  Son receive the value of the Father component
  • 51. Vue.js Routes •  Routers is the way you can “change” the page at single-page applications •  Create a project and install the vue-router library vue init webpack-simple vue-routers cd vue-routers npm install npm install vue-router --save npm run dev 51Vue.js
  • 52. Vue.js Routes •  Create two components Bar and Foo •  Create a file routes.js •  At this file define a variable routes with path “/foo” to Foo component and “/bar” to Bar Component 52Vue.js
  • 53. Vue.js Routes •  Now at the main.js: •  Import the vue-router library, •  Import the routes.js file •  Declare Vue.use (VueRouter) •  Create a na VueRuter variable and, define this variable at app component 53Vue.js
  • 54. Vue.js Routes •  Now at the main.js: 54Vue.js
  • 55. Vue.js Routes •  At app component, include <router-link> to /foo and /bar, and a <router-view> ( where the components will be rendered ): 55Vue.js
  • 56. Vue.js Routes •  When click at the router-link /foo, the foo component is rendered, and click at the router-link / bar, the bar component is rendered: 56Vue.js
  • 57. Vue.js Routes •  Children routes: 57Vue.js
  • 58. Vue.js Routes •  Children routes: 58Vue.js
  • 59. Vue.js connecting with the back-end 59Vue.js
  • 60. Vue.js connecting with the back-end •  Axios is a great http client library. •  It uses promises by default and runs on both the client and the server (which makes it appropriate for fetching data during server-side rendering). •  It’s also quite easy to use with Vue. Because it uses promises, you can combine it with async/await to get an amazingly concise and easy-to-use API. 60Vue.js
  • 61. Vue.js connecting with the back-end •  Install Axios: vue init webpack-simple vue-rest-api cd vue-rest-api/ npm install npm install axios --save 61Vue.js
  • 62. Vue.js connecting with the back-end •  Back-end: •  spring boot application: 62Vue.js
  • 63. Vue.js connecting with the back-end •  Back-end: •  spring boot rest controller: 63Vue.js
  • 64. Vue.js connecting with the back-end •  Back-end: •  Allow CORS origing for spring rest controllers. •  Front-end and back-end will run at different address, so we need to enable this configuration or our request will be block 64Vue.js
  • 65. Vue.js connecting with the back-end •  Front-end: •  Create a file http-common.js and declare an AXIOS constant and import it on App.vue component 65Vue.js
  • 66. Vue.js connecting with the back-end •  Front-end: •  Declare data to hold the information, a user object and an array of users. 66Vue.js
  • 67. Vue.js connecting with the back-end •  Front-end: •  Configure fields to this data and action to call vue methods that will call the back-end REST service 67Vue.js
  • 68. Vue.js connecting with the back-end •  Front-end: •  Create vue methods, and use the axios instance HTTP to call get and post back-end services. 68Vue.js
  • 70. Vuex •  If your Vue.js application grows bigger and consists of multiple components you might run into the problem of how to share data across the those components and make sure that components which are using the same data are always updated if data is changing •  Vuex is a library to use as a centralized state management in your application. 70Vue.js
  • 71. Vuex •  Vuex Store concept: •  State Tree: An object containing the data •  Getters: Used to access data from the state tree of the store •  Mutations: Handler functions that perform modifications of data in the state tree •  Actions: Functions that commit mutations. The main difference to Mutations is that Actions can contain asynchronous operations 71Vue.js
  • 72. Vuex •  Installation •  Include via CDN (Content Delivery Network): <script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script> <script src="https://unpkg.com/vuex@3.0.1/dist/vuex.js"></script> •  Or via npm: vue init webpack-simple vue-vuex cd vue-vuex/ npm install npm install vuex - - save npm run dev 72Vue.js
  • 73. Vuex •  Within the src folder create a new subfolder named store. Within that folder create a new file store.js and insert the following code: 73Vue.js
  • 74. Vuex •  First you need to import store. Next, add store to the configuration object which is passed to the Vue constructor. By providing the store option to the root instance, the store will be injected into all child components of the root and will be available on them as this.$store: 74Vue.js
  • 75. Vuex •  Now we can implement a simple counter: 75Vue.js
  • 76. Vuex •  Keep vuex data between request •  npm install vuex-persistedstate •  npm install vue-cookies 76Vue.js
  • 78. Vue Pre-rendering •  One of the downsides to Javascript-based apps is that the browser receives an essentially empty page from the server. The DOM cannot be built until the Javascript has been downloaded and run. •  It have an impact on SEO (Search Engine Optimization) if crawlers can’t see content of the page quickly 78Vue.js
  • 79. Vue Pre-rendering •  Server-side rendering (SSR) overcomes this issue by rendering the app on the server so that the client receives the complete DOM content when the page is loaded, before Javascript is even run. •  Your app will need to be executable on the server, •  Your app will run on each request to the server, adding aditional load and slowing responses •  You can only do SSR with Node.js 79Vue.js
  • 80. Vue Pre-rendering •  There’s another way to tackle the empty page problem: pre-rendering. •  With this approach you run your app before deploying it, capture the page output and replace your HTML files with this captured output •  It’s pretty much the same concept as SSR except it’s done pre-deployment in your development environment, not a live server 80Vue.js DEV PROD pre- rendering
  • 81. Vue Pre-rendering •  Pre-rendering pros •  No additional server load, •  A simpler production setup and simpler app code •  Doesn’t require a Node.js production server •  Pre-rendering cons •  Doesn’t work for pages that display changing data e.g. tables •  Doesn’t work for pages that have user-specific content e.g. an account page with a user’s personal details •  You’ll need to pre-render every route in the app indiviually. 81Vue.js
  • 82. Vue Pre-rendering •  Let’s take our vue-router project with 2 routers /foo and /bar 82Vue.js
  • 83. Vue Pre-rendering •  Step 1: There are three additional modules we’ll need to install npm install http-server html-webpack-plugin prerender-spa-plugin --save 83Vue.js
  • 84. Vue Pre-rendering •  Step 2: Include Webpack and PrerenderSpa plugins •  Open the webpack.config.js file and include http-webpack- plugin and prerender-spa-plugin 84Vue.js
  • 85. Vue Pre-rendering •  Step 3: Change the build.js location •  Now we change our Webpack “publicPath” in same webpack.config.js file since the index.html will now be in the same folder as the other static assets •  And we’ll also need to change location of the build.js file in our index.html file due to the changed path 85Vue.js
  • 86. Vue Pre-rendering •  Step 4: Include index.html and add pre-render •  The webpack-simple template doesn’t include the index.html file in the Webpack build output. However when we pre- render the app we’ll need to overwrite our index.html, so let’s add it to the output so as not to destroy the original •  Now we need to add prerender-spa-plugin to our webpack config. Make sure it comes after html-webpack-plugin •  New add the index.html and our routes •  The first argument to PrerenderSpaPlugin is the location of our index.html file, the second is a list of routes in the app. •  For each route we add, we’ll get a different output file! 86Vue.js
  • 87. Vue Pre-rendering •  Step 4: Include index.html and add pre-render 87Vue.js
  • 88. Vue Pre-rendering •  Step 5: Building •  Now make the build for production •  npm run build •  It will generated one folder for each route with the static html code 88Vue.js
  • 89. Vue Pre-rendering •  Step 6: Running •  You can run the application inside dist folder using the http- server ./node_modules/.bin/http-server ./dist/ •  It generated the static content of page, but not the dynamic information. •  The “Foo” word is not present 89Vue.js
  • 92. • References •  https://vuejs.org/v2/guide/ •  https://www.devmedia.com.br/vue-js-tutorial/ 38042 •  https://www.shopify.com/partners/blog/vuejs- tutorial •  https://github.com/vuejs-templates/webpack •  http://www.vuejs-brasil.com.br/crie-rapidamente- um-projeto-vue-com-vue-cli-e-browserify/ •  https://medium.com/@thiagorossener/como-fazer- um-hello-world-com-vue-js-2-62ea708c1399 92Vue.js
  • 93. • References •  http://vegibit.com/vue-js-directives/ •  https://alligator.io/vuejs/rest-api-axios/ •  https://www.thepolyglotdeveloper.com/2017/10/ consume-api-data-http-vuejs-web-application/ •  https://medium.com/codingthesmartway-com- blog/vue-js-2-state-management-with-vuex- introduction-db26cb495113 •  https://vuejsdevelopers.com/2017/04/01/vue-js- prerendering-node-laravel/ 93Vue.js