Vue.js: The Compassionate Framework

VUE.JS The Compassionate Framework Ben Hong (@bencodezen) Cream City Code 2019

A little bit about me…

Google Developer Expert Mozilla TechSpeaker BEN HONG Senior Frontend Engineer Meltano in GitLab @bencodezen Vue.js Community Partner Vue Mastery Instructor VuePress Core Team

Before we get started… All resources will be available online https://www.twitter.com/bencodezen For the social media folks @bencodezen - #CreamCityCode - #FallExperiment

What is Vue.js?

Vue.js is a progressive JavaScript framework

Approachable 2. Versatile 3. Performant

PROTEIN VEG CARBS SAUCE TOPPINGS

? TOPPINGS PROTEIN CARBS SAUCE VEG

?

Facebook Google Community

Vue.js Fundamentals

An instance of Vue.js const app = new Vue({ el: ‘#app’, data: { firstName: ‘Ben’, lastName: ‘Hong’, event: ‘Cream City Code’ } })

An instance of Vue.js const app = new Vue({ el: ‘#app’, data: { firstName: ‘Ben’, lastName: ‘Hong’, event: ‘Cream City Code’ } }) Uses a CSS selector to determine where this Vue Instance will live.

An instance of Vue.js const app = new Vue({ el: ‘#app’, data: { firstName: ‘Ben’, lastName: ‘Hong’, event: ‘Cream City Code’ } }) A data store for the Vue to access in the app.

Expressions in Vue.js const app = new Vue({ el: ‘#app’, data: { firstName: ‘Ben’, lastName: ‘Hong’, event: ‘Cream City Code’ } }) <!— Using data in your template is easy! —> <div id=”app”> <p>{{ firstName }} {{ lastName }} is at {{ event }}!</p> </div>

Expressions in Vue.js const app = new Vue({ el: ‘#app’, data: { firstName: ‘Ben’, lastName: ‘Hong’, event: ‘Cream City Code’ } }) <!— This is how it renders! —> <div id=”app”> <p>Ben Hong is at Cream City Code!</p> </div>

Expressions in Vue.js <!— Using data in your template is easy! —> <p>{{ firstName }} {{ lastName }} is at {{ conference }}!</p> <!— You can even do math! —> <p>Let’s perform calculations! {{ 12 * 12 / 4 }}</p> <!— Any simple expression just works —> <p>{{ firstName.toUpperCase() }} IS EXCITED!</p> <!— Basic logic works too! —> <p>{{ onSale ? price * 0.8 : price }}</p>

Computed properties

<p>{{ onSale ? price * 0.8 : price }}</p>

Computed properties

Computed properties const app = new Vue({ el: ‘#app’, data: { price: 100, onSale: false }, computed: { salePrice() { if (this.onSale) { return this.price * 0.8 } else { return this.price } <p>{{ onSale ? price * 0.8 : price }}</p> } }

Computed properties const app = new Vue({ el: ‘#app’, data: { price: 100, onSale: false }, computed: { salePrice() { if (this.onSale) { return this.price * 0.8 } else { return this.price } <p>{{ salePrice }}</p> } }

Methods in Vue.js const app = new Vue({ el: ‘#app’, data: { potion: 300, antidote: 100, revive: 1500, onSale: true }, methods: { generatePrice(itemPrice) { if (this.onSale) { return itemPrice * 0.8 } else { return itemPrice } } } })

Let’s talk about directives

Directives are the part of Vue.js that are a bit magical…

VUE.JS BASICS: DIRECTIVES WHAT ARE DIRECTIVES? They are Vue specific syntax that flow you to accomplish common goals without worrying about how it is implemented ▸ v-if ▸ v-for ▸ v-else-if ▸ v-on ▸ v-else ▸ v-model ▸ v-bind

DIRECTIVES: V-IF / V-ELSE-IF / V-ELSE V-IF / V-ELSE-IF / V-ELSE Allows you to determine whether an element on the page should exist <article> <h1>Dashboard</h1> <section v-if=”userPermission === ‘admin’”> … </section> <section v-else-if=”userPermission === ‘user’”> … </section> <section v-else> <p>Please login.</p> </section> </article>

DIRECTIVES: V-BIND V-BIND Allows us to manipulate HTML attributes with dynamic data <!— The long form —> <a v-bind:href=”linkUrl”>…</a> <!— The more common shorthand —> <a :href=”linkUrl”>…</a> <!— It will render as… —> <a href=“www.vuejs.org”>…</a>

DIRECTIVES: V-ON V-ON Allows us to attach methods to HTML elements when a certain event occurs <!— The long version —> <button v-on:click=”alert(‘Alohomora’)”>Unlock</button> <!— The more common shorthand —> <button @click=”alert(‘Alohomora’)”>Unlock</button> <!— Built in modifiers! —> <input type=”text” @keyup.enter=“submit” />

DIRECTIVES: V-MODEL V-MODEL Allows us to use two-way binding <div id=”app”> <h1>Live Message Updates!</h1> <p>{{ message }}</p> <input type=”text” v-model=”message”> </div> <script> const app = new Vue({ el: ‘#app’, data: { message: ” } }) </script>

DIRECTIVES: V-FOR V-FOR Allows us to “render a list of items based on an array (or object).” <script> const app = new Vue({ el: ‘#app’, data: { Hogwarts: [ ‘Ravenclaw’, ‘Hufflepuff’, ‘Slytherin’, ‘Gryffindor’ ] } }) </script>

<!— Given the data in the Vue instance —> <div id=”app”> <ul> <li v-for=”house in Hogwarts”> {{ house}} </li> </ul> </div> <!— Will be rendered as… —> <ul> <li>Ravenclaw</li> <li>Hufflepuff</li> <li>Slytherin</li> <li>Gryffindor</li> </ul> </template>

Enough talking. Let’s see Vue.js in action!

What about Vue.js 3.0?

R E What about M I A L C Vue.js 3.0? S I D

No need to wait. Vue.js 3.0 is additive.

DESIGNED TO BE APPROACHABLE TO DEVELOPERS OF PRACTICALLY ALL ABILITIES Photo by Katie Moum on Unsplash

JSX EXAMPLE import React from ‘react’; import { render } from ‘react-dom’; import HelloWorld from ‘./HelloWorld’; const styles = { fontFamily: ‘Avenir, Helvetica, Arial, sans-serif’, textAlign: ‘center’, color: ‘#2c3e50’, marginTop: ‘60px’ }; const App = () => { <div style={styles} className=”app”> <h1>This is a React.js component file!</h1> </div> }; export default App;

SFC EXAMPLE <template> <div> <h1>This is a Vue Single File Component (SFC) file!</h1> </div> </template> <script> export default { name: ‘App’ } </script> <style> #app { font-family: ‘Avenir, Helvetica, Arial, sans-serif’; text-align: center; color: #2c3e50; margin-top: 60px; } </style>

THEIR DOCS ARE ONE OF THE BEST OUT THERE

Vue.js Docs https://vuejs.org/v2/guide/

GIVES YOU WHAT YOU WANT WHEN YOU NEED IT, THEN IT GETS OUT OF YOUR WAY. Paraphrased from Sarah Drasner

Vue.js Style Guide https://vuejs.org/v2/style-guide/

NEXT STEPS… SO WHAT ELSE IS THERE TO LEARN ABOUT? ▸ Props ▸ State Management ▸ Slots ▸ Animations ▸ Watch Property ▸ Render Function ▸ Custom Events ▸ Component Libraries ▸ Lifecycle Hooks ▸ Testing ▸ Managing CSS in Vue.js ▸ And much more!

NEXT STEPS… RECOMMENDED RESOURCES Free ▸ Official Vue.js Guide ▸ VueMastery: Intro to Vue.js ▸ VueSchool Free Courses Paid ▸ Vue Mastery ▸ Vue School ▸ Frontend Masters: Introduction to Vue.js ▸ Udemy: Vue.js 2 - The Complete Guide

THANKS EVERYONE! @bencodezen

Questions?