A presentation at VueDC Meetup in in Arlington County, Arlington, VA, USA by Ben Hong
VueDC (@vuejsdc) Wifi: --Password: --GitHub Repo: https://github.com/VueDC/vuejs-101-the-essentials CodePen Collection: https://codepen.io/collection/DmRKRB/ Slides: https://slides.com/bencodezen/vuejs-101-the-essentials/
Announcements
Announcements VueConf.US - http://vueconf.us
Announcements VueConf.US - http://vueconf.us Next Meetup Vue.js 201 - Mid-January 2018
Announcements VueConf.US - http://vueconf.us Next Meetup Vue.js 201 - Mid-January 2018 Interested in speaking?
Announcements VueConf.US - http://vueconf.us Next Meetup Vue.js 201 - Mid-January 2018 Interested in speaking? Reach out to us at vuejsdc@gmail.com
Announcements VueConf.US - http://vueconf.us Next Meetup Vue.js 201 - Mid-January 2018 Interested in speaking? Reach out to us at vuejsdc@gmail.com Sponsor - Politico
Gold Sponsor (Food + Drinks + Venue)
Vue.js 101 The Essentials of Vue.js December 6th, 2017 Ben Hong Senior UI Engineer at Politico @bencodezen Slides: https://slides.com/bencodezen/vuejs-101-the-essentials
What is Vue.js?
®
“ After hand-rolling many [UI prototypes] with vanilla JavaScript and using Angular 1 for a few, I wanted something that captured Evan You (@youyuxi) the declarative nature of Angular's data binding, but with a simpler, more approachable API.
Vue.js
Credit - xkcd: Standards (https://xkcd.com/927/)
What makes Vue.js ? so special special?
Developed and maintained by Google
Developed and maintained by Google Easy to get something up and running pretty quickly
Developed and maintained by Google Easy to get something up and running pretty quickly Most of what was happening seemed more like magic
Developed and maintained by Google Easy to get something up and running pretty quickly Most of what was happening seemed more like magic Larger footprint in web performance
Developed and maintained by Google Easy to get something up and running pretty quickly Most of what was happening seemed more like magic Larger footprint in web performance More opinionated on how you should build your app
Developed by Facebook and recently granted an MIT license
Developed by Facebook and recently granted an MIT license Great performance due to the use of the virtual DOM
Developed by Facebook and recently granted an MIT license Great performance due to the use of the virtual DOM You got a lot better at vanilla JavaScript very quickly
Developed by Facebook and recently granted an MIT license Great performance due to the use of the virtual DOM You got a lot better at vanilla JavaScript very quickly High learning curve even just to get started
Developed by Facebook and recently granted an MIT license Great performance due to the use of the virtual DOM You got a lot better at vanilla JavaScript very quickly High learning curve even just to get started Unfriendly to non-JavaScript developers (i.e., JSX)
Developed by Facebook and recently granted an MIT license Great performance due to the use of the virtual DOM You got a lot better at vanilla JavaScript very quickly High learning curve even just to get started Unfriendly to non-JavaScript developers (i.e., JSX) High pace of development resulting in unexpected bugs
An open-source framework with no corporate influence
An open-source framework with no corporate influence Takes the best of both worlds and brings them together
An open-source framework with no corporate influence Takes the best of both worlds and brings them together It does not alienate non-JavaScript developers
An open-source framework with no corporate influence Takes the best of both worlds and brings them together It does not alienate non-JavaScript developers Great performance that is on par if not better than React.js
An open-source framework with no corporate influence Takes the best of both worlds and brings them together It does not alienate non-JavaScript developers Great performance that is on par if not better than React.js Flexible and accommodating to how you prefer to build apps
An open-source framework with no corporate influence Takes the best of both worlds and brings them together It does not alienate non-JavaScript developers Great performance that is on par if not better than React.js Flexible and accommodating to how you prefer to build apps Smaller team and community compared to React / Angular
The Essentials of Vue.js
Simple Vue.js Setup It's as easy as adding jQuery Start: https://codepen.io/BenCodeZen/pen/rYgGdR Final: https://codepen.io/BenCodeZen/pen/GOarKO
Step 1: Initialize a Vue instance const app = new Vue()
Step 1: Initialize a Vue instance const app = new Vue() Let's pretend we're planning a new trip! const adventure = new Trip()
Mapping Out the Important Details const adventure = new Trip({ destination: 'Diagon Alley', luggage: { name: 'Mr. B. Hong', house: 'Ravenclaw', wand: '12.5" larch wood w/ Dragon heartstring core', wallet: { galleons: 12, sickles: 38, knuts: 274 } }, thingsToDo: { visitGringotts, visitDiagonAlley, drinkButterbeer, eatAtTheLeakyCauldron } })
Step 2: Configure Your "Destination" <!-- Start with an HTML element that will serve as the app's destination --> <div id="diagon-alley"></div> // This is the most important configuration // Mistype this one and nothing will ever happen const adventure = new Vue({ el: '#diagon-alley' })
Step 3: Configure Your "Luggage" // This where all your "luggage" items are stored const adventure = new Vue({ el: '#diagon-alley', data: { name: 'Mr. B. Hong', house: 'Ravenclaw', wand: '12.5" larch wood w/ Dragon heartstring core', wallet: { galleons: 12, sickles: 38, knuts: 274 } } })
Step 4: Configure Your "Things To Do" // This where all your instructions are stored const adventure = new Vue({ el: '#diagon-alley', data: { name: 'Mr. B. Hong', house: 'Ravenclaw', wand: '12.5" larch wood w/ Dragon heartstring core', wallet: { galleons: 12, sickles: 38, knuts: 274 } }, methods: { visitGringotts() { ... }, visitDiagonAlley() { ... }, drinkButterbeer() { ... }, eatAtTheLeakyCauldron() { ... } } })
Let's see it in action! Start: https://codepen.io/BenCodeZen/pen/MOdOjN Final: https://codepen.io/BenCodeZen/pen/MOdoQY
Let's Talk About Directives
Directives are the part of Vue.js that are a bit magical magical... ...
What are directives exactly? They are Vue specific methods that allow you to accomplish common goals without worrying how it is implemented. v-if v-html v-else v-text v-else-if v-pre v-show v-cloak v-for v-once v-bind v-class v-on v-style v-model v-attr
v-if v-else v-else-if v-show
v-if v-else v-else-if v-show “ listeners and child “ rendered regardless of initial components inside the condition, with CSS-based conditional block are toggling. It ensures that event properly destroyed and recreated during toggles." The element is always
v-for Allows us to "render a list of items based on an array [or object]." <!-- Given the data model on the right --> <ul> <li v-for="house in Hogwarts"> {{ house }} </li> </ul> <!-- It will render to --> <ul> <li>Ravenclaw</li> <li>Hufflepuff</li> <li>Slytherin</li> <li>Griffindor</li> </ul> // Given this sample Vue instance new Vue({ ... data: { Hogwarts: [ 'Ravenclaw', 'Hufflepuff', 'Slytherin', 'Gryffindor' ] } })
v-bind Allow us to manipulate HTML attributes with dynamic data <!-- The long form --> <div v-bind:class="{ active: isActive }">...</div> <!-- The common shortcut --> <div :class="{ active: isActive }">...</div> <!-- If isActive is true, it will render --> <div class="active">...</div>
v-on Allow us to attach methods to common events <!-- The long form --> <div v-on:click="alert('Alohomora!')">...</div> <!-- The common shortcut --> <div @click="alert('Alohomora!')">...</div>
v-model Allows us to use two-way data binding <input v-model="name" type="text" id="name" /> <script> new Vue({ ... data: { name: 'Sirius Black' } }) </script>
Quick Break! Final Coding Exercise Start: https://codepen.io/BenCodeZen/pen/YEbEgv Fina: https://codepen.io/BenCodeZen/pen/gXyjwj
Enough talk. Let's write some code! code! Final Coding Exercise Start: https://codepen.io/BenCodeZen/pen/YEbEgv Fina: https://codepen.io/BenCodeZen/pen/gXyjwj
Exercise 1: Dynamic Data 1. Replace 'Static' with the dynamic data property noun 2. Wire up input#noun to dynamically update noun 3. Use dynamic inline-styles to define backgroundImage on div#image-wrapper that uses the data property imageUrl 4. Wire up input#background-image to dynamically update imageUrl
Exercise 2: Directives & Methods 1. Toggle aside#side-menu's visibility when you click on button#toggle-menu 2. Challenge: Write a method so that div#templatewrapper's position is dynamically updated when you click on div#image-wrapper.
“ Gives me what I want when I need it, and then it gets out of my way. - Sarah Drasner (@sarah_edo)
Congratulations! You've worked on three different Vue applications!
But wait... there's more!
Concepts Workflow Computed Properties App Architecture w/ Vue.js Filters Testing with Vue.js Props Managing Styles w/ Vue.js Mixins Animate All Things w/ Vue.js Modifiers Popular Vue.js Tools Lifecycle Methods State Management Custom Directives Routing Animations vue-cli vuex vetur Vue DevTools
Sneak Peak at Vue.js 201
Additional Resources Official Vue.js Docs https://vuejs.org/ FEM: Introduction to Vue.js https://frontendmasters.com/courses/vue/ Udemy: Vue.js Courses https://www.udemy.com/courses/search/?q=vuejs Vue.js Discord Channel https://vue-land.js.org/
Footnotes Evan You's GitHub Story https://github.com/open-source/stories/yyx990803
Thank you! @bencodezen
This is a session for all those curious about VueJS and want to learn more about it. We'll talk about what Vue is, how it compares with other frameworks like ReactJS and AngularJS, why you should consider using it on your next project, and much more.
Totally optional, but feel free to bring your laptops because we will have actual code you will get to tinker with so you can get some hands on experience with Vue!
The following resources were mentioned during the presentation or are useful additional information.
The following code examples from the presentation can be tried out live.
for free. You
can too.