Vue.js is a JavaScript framework that provides two-way binding between DOM and JavaScript, a template language for declarative rendering, and supports installation via npm, direct download, or a script tag. It allows defining where rendering will occur, setting up data, and rendering data to the DOM. Components provide reusability through templates, logic, and styles. Additional features include routing, state management with Vuex, and use of the Vue CLI for scaffolding single file components.

1. DON'T OVER-REACT - JUST
USE VUE!
Raymond Camden

2. mostly sorry ;)

3. WHO AM I?
Raymond Camden
Developer Advocate for IBM
Blogging at
raymondcamden.com
Tweeting at
raymondcamden

4. WHY VUE?

5. SIMPLE

6. NO BUILD PROCESS

7. SCALABLE

8. QUICK VUE
FACTS
Created by Evan You
(@youyuxi)
Released in February of
2014
Currently is version 2.5.13
Main site: vuejs.org
GitHub:
https://github.com/vuejs

9. WHAT DOES VUE DO?
Two-way binding between your DOM and JavaScript
Template Language (aka Declarative Rendering)
And I know I said this - but it does more. A lot more.

10. INSTALLATION
npm install
cli install
Download from site
Copy and paste a script tag FTW!!!!!1!

11. <SCRIPT> STYLE
<script src="https://unpkg.com/vue"></script>

12. WRITE SOME CODE!
Identify where you're going to render stuff
Setup some data
Render that data
Add events (ie on this do that) and other fancy stuff

13. $('#somediv').html('woot');
$('#yetanotherdiv').html('<b>This is awesome</b>');
$('#someotherdiv').val(2);
Willy Nilly DOM Manipulation

14. Defining Vue's Place...

15. EXAMPLES codepen.io/collection/XzN
gxR/

16. SOME CODE...

17. SOME MORE CODE...
CODE PEN: FIRST DEMO

18. TEMPLATE DIRECTIVES -
CONDITIONALS

19. TEMPLATE DIRECTIVES -
LOOPS

20. WORKING
WITH FORM
FIELDS
v-model links to data field
Works in all kinds of form fields
CODE PEN: FOURTH DEMO

21. EVENTS
v-on:click=“something”
Defined in methods block of Vue
instance
Easy to do modifiers (v-
on:submit.prevent)
@click=“something”
CODE PEN: FIFTH DEMO

22. ATTRIBUTE BINDING
v-bind:attribute=“value”
:attribute=“value”
v-bind:style="{bgcolor:curColor, font-style:textStyle}"
v-bind:class="{highlighted:isActive, color:appStatus}"
CODE PEN: SIXTH DEMO

23. COMPUTED PROPERTIES
Virtual properties
Property X is based on real data A and B
Defined in the computed part of the Vue instance

24. EXAMPLE (BEFORE)

25. EXAMPLE (AFTER)
CODE PEN: SEVENTH DEMO

26. VUE LIFECYCLE EVENTS
Events that occur while a Vue instance is doing stuff
beforeCreate, created, beforeMount, mounted, beforeUpate, updated,
activated, deactivated, beforeDestroy, destroyed, errorCaptured
https://vuejs.org/v2/api/#Options-Lifecycle-Hooks

27. EXAMPLE
CODE PEN: EIGHTH DEMO

28. LET'S TAKE A
QUICK BREAK...

29. FULL EXAMPLE: FORM VALIDATION
Do I need to explain this?
Check on submit, report on top
More examples: https://vuejs.org/v2/cookbook/form-validation.html

30. FULL EXAMPLE: AJAX SEARCH
Accept user input
Send to remote API...
Render responses

31. COMPONENTS
Re-usable objects of awesome-ness
Template + Logic + Style = Component
Also solves one of HTML's most glaring problems...

32. <nicolas-cage>

33. EXAMPLE

34. EXAMPLE
CODE PEN: NICOLAS-CAGE

35. COMPONENT EXAMPLES
Google Static Maps: https://www.npmjs.com/package/vue-static-
map
Bootstrap: https://bootstrap-vue.js.org/
Vuetify: https://vuetifyjs.com/en/

36. MORE COMPONENT STUFF
You can pass data in from the parent
You can listen for events from the component
Slots

37. SLOT EXAMPLE
<mything thankyou="Hey buddy, thank you for doing that thing. I
appreciate it. Here's a kitten."></mything>
<mything>
<div slot="thankyou">
Hey, I want to <i>really</i> thank you for taking
the time to do whatever. We here at Mega Corp truly
care that you took the time. Oh, and here, please
take a kitten!
</div>
</mything>

38. ROUTING
Not a part of Vue
Official library: vue-router (https://router.vuejs.org)
"If I'm at location /foo, I want to do Foo"
"if I'm at location /goo, I want to do Goo"

39. EXAMPLE
(FROM THE
DOCS)

40. EXAMPLE
(STILL FROM
THE DOCS)
CODE PEN: EXAMPLE OF ROUTING IN VUE

41. FULL EXAMPLE: MASTER/DETAIL
First page - list of data
Second page - detail

42. STATE MANAGEMENT
Solves a problem you may not have!
One component, one set of data = easy
Two components, two set of data = mostly easy
Many components, one set of data = um....

43. VUEX
(Another) library for Vue (deeply integrated)
"Store"
Components can read from the store
Components cannot change data in the store

44. VUEX EXAMPLE
CODE PEN: STOCK GAME

45. THE CLI
Scaffolding tool
Focused on SPAs
https://github.com/vuejs/vue-cli
Supports Single File Components

46. SINGLE FILE
COMPONENT
S

47. WALKTHROUGH

48. BUT WAIT –
THERE’S
MORE!

49. EVEN MOAR!!!
Devtools Extension (Chrome, Firefox, Electron, Apple Keynote
Browser)
 https://github.com/vuejs/vue-devtools
Nuxt (nuxtjs.org)
Sarah Drasner on CSS-Tricks: https://css-tricks.com/intro-to-vue-1-
rendering-directives-events/
My Stuff: https://www.raymondcamden.com/tags/vuejs

50. ANY
QUESTIONS?
Carol is judging your
questions...