What is Vue?

A progressive, incrementally-adoptable JavaScript framework for building UI on the web – github

Comparing to other frameworks

Vue’s documentation has a detailed comparison to other popular frameworks. Check it out if you’re looking for in-depth details and benchmarks.

In the meantime, this talk specifically compares Vue to React in terms of technology and development experience.

Getting Started with Vue

Include the runtime build as a script:

<div id="app"></div>
<script src="https://unpkg.com/vue"></script>
<script>
new Vue({
  el: '#app',
  template: '<h1>Hello World</h1>'
});
</script>

npm install -g vue-cli
vue init webpack hello
cd hello
npm install

The .vue Single File Component

<template>
  <div class="example">
    {{ msg }}
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      msg: 'Hello world!'
    };
  }
}
</script>

<style lang="scss">
.example {
  color: red;
}
</style>

Scoped Styles In .vue Format

<style lang="scss">
.example {
  color: red;
}
</style>

becomes:

.example {
  color: red;
}

<style lang="scss" scoped>
.example {
  color: red;
}
</style>

.example[data-v-71418bfb] {
  color: red;
}

Vue’s templating language

<section class="main" v-show="todos.length" v-cloak>
  <ul class="todo-list">
    <li v-for="todo in filteredTodos"
      class="todo"
      :key="todo.id"
      :class="{ completed: todo.completed, editing: todo == editedTodo }">
      <div class="view">
        <input class="toggle" type="checkbox" v-model="todo.completed">
        <label @dblclick="editTodo(todo)">{{ todo.title }}</label>
        <button class="destroy" @click="removeTodo(todo)"></button>

Custom components in templates

<template>
  <div class="example">
    <hello></hello>
  </div>
</template>

<script>
import Hello from './components/Hello';

export default {
  name: 'app',
  components: { Hello } // or explicitly name: { hello: Hello }
}
</script>

JSX plugin for Vue

{ !todos.length ? null: <section class="main">
  <ul class="todo-list">
  { filteredTodos.map(todo =>
    <li
      key={todo.id}
      class={['todo', {completed: todo.completed, editing: todo === editedTodo}]}
      <div class="view">
        <input
          class="toggle"
          type="checkbox"
          onChange={e => todo.completed = e.target.checked}>
        <label onDblclick={() => this.editTodo(todo)}>{todo.title}</label>
        <button class="destroy" onClick={() => removeTodo(todo)}></button>
  )}
}

Vue maintains an official JSX plugin for Babel.

Custom components in JSX

import Hello from './components/Hello';

export default Vue.extend({
  name: 'app',

  render(h) {
    return <div class="example">
      <Hello/>
    </div>;

    // h('div', {class: 'example'}, [Hello])

    // React.createElement('div', {className: 'example'}, [Hello])
  }
});

Creating a component

export default Vue.extend({
  props: { // React: getDefaultProps()
    name: { type: String, required: true },
    age: { type: Number, default: 29 },
  },

  data() { // React: getInitialState()
    return {
      energy: 0,
    };
  },

  render(h) {
    return <span>{this.name} is {this.energy >= 50 ? 'awake' : 'sleepy'}</span>;
  }
});

Stateless functional components

export default Vue.extend({
  props: {
    name: { type: String, required: true },
    age: { type: Number, default: 29 },
  },

  functional: true, // <- this is the secret sauce

  render(h, context) {
    return <span>His name is {context.props.name} Paulson</span>;
  }
});

Lifecycles

export default Vue.extend({
  beforeMount() {},   // React: componentWillMount()

  mounted() {},       // React: componentDidMount()

  beforeDestroy() {}, // React: componentWillUnmount()

  destroyed() {},     // React: componentDidUnmount()

  render() {},        // React: render()
});

Reactivity Model

export default Vue.extend({
  data() {
    return {
      firstName: 'Matt',
      lastName: 'Campbell',
    };
  },

  render(h) {
    return <h1>{this.firstName}</h1>;
  }
});

Nested Reactivity

export default Vue.extend({
  data() {
    return {
      person: {
        firstName: 'Matt',
        lastName: 'Campbell',
      },
    };
  },
  render(h) {
    return <h1>{this.person.firstName}</h1>
  }
});

// Later ...
this.person.firstName = 'Robert'; // triggers render()
this.person.lastName = 'Paulson'; // no render()

Computed Properties

export default Vue.extend({
  data() {
    return { firstName: 'Matt', lastName: 'Campbell' };
  },

  computed: {
    fullName() { return this.firstName + ' ' + this.lastName; }
  },

  render(h) { return <h1>{this.fullName}</h1>; }
});

Watchers

export default Vue.extend({
  data: () => ({ progress: 0 }),

  computed: {
    progressMilestone() {
      return Math.floor(progress / 10) * 10;
    }
  },

  watch: {
    progressMilestone(value) {
      // this is triggered whenever the computed value changes
    }
  }
});

Notes:

• Watches a value for changes
• Can watch any reactive value: props, state, computed
• Good for things like tracking, where the value updating is the event

Cross-component Reactivity

const person = new Vue({
  data() {
    return {
      firstName: 'Matt'
    };
  }
});

const OtherComponent = Vue.extend({
  render() {
    return <h1>{person.firstName}</h1>;
  }
});

// Later:
person.firstName = 'Robert'; // OtherComponent.render()

Centralized State: Component as Store

const Store = new Vue({
  data: () => ({
    todos: [],
    filter: null,
  },

  computed: {
    activeTodos: self => self.todos.filter(todo => !todo.completed),
    completedTodos: self => self.todos.filter(todo => todo.completed),
    allTodosComplete self => self.completedTodos.length === self.todos.length,
  },

  created() {
    this.$on('add-todo', this.addTodo);
    this.$on('remove-todo', this.removeTodo);
    this.$on('clear-completed', this.clearCompleted);
  }
});

This centralized Store approach is even recommended by the guide

Centralized State: TodoList

import Store from '../Store';

export default Vue.extend({
  render() {
    return <section class="main">
      <ul class="todo-list">{ Store.todos.map((todo, index) =>
        <Todo key={index + '-' + todo.task} todo={todo}/>
      )}</ul>
    </section>;
  }
});