Intro to Vue.js

Who am I?

  • Alex Riviere
  • Web Developer
  • Co-Organizer for Atlanta Vue.js Meetup

Intro to Vue.js

"Why Vue.js?"

OR

What is Vue.js?

  • A progressive framework for building user interfaces.
  • designed to be incrementally adoptable.
  • Capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and support libraries.

Neat! How do I start?

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Hello World Demo!

What is "Reactivity"?

Reactivity - The Simple Description:

A Vue instance will rebind the get()/set() methods of a property in data() using Object.defineProperty to listen for any functions or methods that request the value of that property.

What is "Reactivity"?

Reactivity - The Really Simple Description:

IT'S MAGIC!

Vue Templates

  • Declarative Rendering
  • Can be used in HTML
  • Can compile in broswer

Vue Directives Demo!

Quick Review:

  • data() defines reactive properties for our Vue instance
  • v-bind will bind a property to an attribute
  • v-on will add an event listener to an element
  • v-model is a shortcut for v-bind:value and v-on:input
  • methods can be called inside the template

v-bind  and v-on

  • Shorthand for v-bind is :
  • Shorthand for v-on is @
<input type="checkbox" 
       @input="toggleCheckBox" 
       :checked="complete">

Vue Conditionals and Loops

  • v-if, v-else-if, v-else allow you conditionally display things
  • v-for allows you to iterate over an Array or Object
  • v-for requests that you supply a unique key for each object, so it is easy to track in the virtual DOM

Let's Demo it!

Quick Recap

  • v-if, v-else-if, v-else, will evaluate a JavaScript statement for truthiness, and create or destroy DOM elements based on that.

  • v-for can iterate over an Array or Object and give you access to each element or property.

  • computed Values behave like reactive properties and will update when your reactive data changes.

Let's Talk about Components

  • Reusable Code for displaying and interacting with data
  • Gets data from props being passed in
  • Communicates with parent by using $emit() to emit an event that the parent will listen for.

Components Demo!

Components Review

  • Use template instead of el to specify where template is defined.
  • Use props to receive data from parent
  • Components can have their own data() properties.
  • Use $emit() to send events back up to parent
  • Components can be registered globally with Vue.component() or locally in components depending on use.

Ready for a build step?

Vue has you covered!

vue-cli

$ npm install -g @vue/cli
$ vue init name-of-project
$ cd name-of-project

Single File Components

Let's see a quick demo!

Pros

  • All component logic in one .vue file
  • Allows for scoped styles
  • Allows for other style/markup/logic languages (Sass, LESS, pug, TypeScript)

Cons

  • Requires a build step
  • Splitting your JS bundle can be difficult
  • Might be overkill for simple usage.

Single File Components

Life Cycle Hooks

  • beforeCreate()
  • created()
  • beforeMount()
  • mounted()
  • beforeUpdate()
  • updated()
  • beforeDestroy()
  • destroyed()

Don't Worry, there isn't a demo of this.

Life Cycle Hooks

  • beforeCreate()
  • created()
  • beforeMount()
  • mounted()
  • beforeUpdate()
  • updated()
  • beforeDestroy()
  • destroyed()

Don't Worry, there isn't a demo of this.

Other Fun Vue Features

  • Transitions and TransitionGroups
  • Watchers
  • Complex computed properties - you can define a get() and set()
  • Slots

More Resources

Questions?

@fimion on twitter

https://alex.party

 

Examples source code for this talk:

https://github.com/fimion/intro-to-vue-2019-08