A presentation at Cream City Code in in Milwaukee, WI, USA by Ben Hong
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
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
<script> 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 } } } }) </script>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?
With so many client-side frameworks these days, it can be tough to figure out which one to start with. Well, look no further, because Vue.js is the perfect gateway framework that will open you up to being able to finally take that first step so you can navigate the constantly changing client-side framework ecosystem.
In this talk, I’ll be answering the following questions:
• What is Vue.js? • How does it compare to current frameworks? • Why should you use it? • What are the essentials of Vue.js? • How do you get started?
The following resources were mentioned during the presentation or are useful additional information.
This repo is my Hello World version of Vue.js! It is meant to be used for demo purposes and a quick overview of just how awesome it is. 😎
for free. You
can too.