Introduction To Vue.js

Robert Axelsen
@robaxelsen

About

http://rob.ee 

Software Developer, meetup organizer and community enthusiast

What Is Vue.js?

Brief History

In 2013, Evan You founded Vue.js while working at Google.

I started Vue as a personal project when I was working at Google Creative Labs in 2013. My job there involved building a lot of UI prototypes. After hand-rolling many of them with vanilla JavaScript and using Angular 1 for a few, I wanted something that captured the declarative nature of Angular's data binding, but with a simpler, more approachable API. That's how Vue started.

- Evan You

Increasing Popularity

Benefits

  • Tiny size (16kb min zip)
  • Feature-rich
  • Gentle learning curve
  • Great documentation
  • Reactive
  • Declarative rendering
  • Two-way data binding

Reactive

Vue.js' "Virtual DOM" is and simplified copy of the HTML DOM.

 

The fact that it's reactive means that when we do make changes to the state in our app, only the affected parts of the page changes.

Declarative Rendering

We declare how something should look like with HTML and Vue.js specific syntax, and Vue.js takes care of the rest.

The end-result is easier and more readable code.

Two-Way Data Binding

When properties in the model get updated, so does the UI. When UI elements get updated, the changes get propagated back to the model.

Getting Started

https://vuejs.org/v2/guide/

We Are Hiring

http://www.sipwise.com/
jobs@sipwise.com

JSFiddle Time

https://jsfiddle.net/chrisvfritz/50wL7mdz/

Components

https://github.com/vuejs/vue-cli

The component system is another important concept in Vue, because it’s an abstraction that allows us to build large-scale applications composed of small, self-contained, and often reusable components. In Vue, a component is essentially a Vue instance with pre-defined options. In a large application, it is necessary to divide the whole app into components to make development manageable.

To get started with components, go to...

Introduction to Vue.js

By Robert Axelsen

Introduction to Vue.js

  • 53