Vue.js 101 - The Essentials

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