Skip to main content

Introduction to Vue.js 2.0

#vue#javascript#framework

Vue.js 2.0 landed in September 2016 — a major rewrite focused on speed, smaller size, and a more predictable API. The release post highlights the new virtual‑DOM core and improved rendering performance. Vue 2.0 release blog post

Why Vue draws attention

  • Approachable – just drop a script tag and start coding; no build setup needed. Vue 2 install guide
  • Incremental adoption – sprinkle Vue on parts of an existing page or build a full SPA.
  • Sensible defaults – templates use plain HTML with special attributes (v-if, v-for).
  • Lightweight – around 20 KB min + gzip, smaller than React + Redux bundles of the day.
  • Two‑way binding where it helps, combined with unidirectional parent → child data flow.

Basic component example

<!-- Include Vue from CDN -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.0.3/dist/vue.js"></script>

<div id="app">
  <button-counter></button-counter>
</div>

<script>
Vue.component('button-counter', {
  data: function () {
    return { count: 0 }
  },
  template: '<button v-on:click="count++">Clicked {{ count }} times</button>'
})

new Vue({ el: '#app' })
</script>

Key points:

  • Vue.component registers a reusable component.
  • data is a function that returns an object, ensuring each instance has its own state.
  • Template syntax is familiar HTML, not JSX.

Reactivity and templating vs React

| Aspect | Vue 2 | React 15 (2016) | | --------------- | ----------------------------------------------------- | ---------------------------------------- | | Syntax | HTML‑based templates with directives (v-bind) | JSX (JavaScript + XML) | | Data binding | Reactive getters/setters generated at init | State/props + setState | | Virtual DOM | Yes, rewritten for 2.0 (“blazing‑fast”) | Yes | | State Mgmt | Built‑in reactivity; Vuex optional | External libraries (Redux, MobX) | | Learning curve | Lower – starts in a <script> tag | Requires Babel / bundler for JSX |

Vue adopts a template‑first syntax, while React treats UI as functions of state in plain JavaScript. Both use a virtual DOM diff, but Vue’s reactivity system tracks dependencies automatically, avoiding manual shouldComponentUpdate optimisations.

Getting started with the CLI

For larger projects use Vue CLI (beta in late 2016):

npm install -g @vue/cli@2.9.6   # historical v2 line
vue init webpack my-app
cd my-app
npm install
npm run dev

The CLI scaffolds a Webpack/Babel setup with hot reload and single‑file .vue components.

When to pick Vue

  • Need progressive enhancement on a legacy server‑rendered app.
  • Want component‑based architecture without heavy build overhead.
  • Prefer readable templates over JSX.
  • Team values clear docs and a gentle learning curve.

Vue 2’s release marked its jump from enthusiast circles to mainstream adoption, offering a middle ground between the simplicity of jQuery widgets and the power of full frameworks like Angular.