Introduction to Vue

Basic

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Vue inherits a lot from angular. Both has concept of directives and components.

We will skip those similarities, but focus on differences here.

Directive has Modifier and Arguments

<input v-model.number="age" type="number">
<a v-bind:href="url"></a>

• Modifiers are special postfixes denoted by a dot, which indicate that a directive should be bound in some special way.
• Some directives can take an “argument”, denoted by a colon after the directive name.

Component has slots

The API for a Vue component comes in three parts - props, events, and slots:

1. Props allow the external environment to pass data into the component
2. Events allow the component to trigger side effects in the external environment
3. Slots allow the external environment to compose the component with extra content.

<my-component
  v-bind:foo="baz"
  v-bind:bar="qux"
  v-on:event-a="doThis"
  v-on:event-b="doThat"
>
  <img slot="icon" src="...">
  <p slot="main-text">Hello!</p>
</my-component>

Vue Ecosystem

• vue-router is officially-supported

• vuex is a state management pattern + library for Vue.js applications.

Comparison

created on 10/31/2016

PS:

• Angular 2 requires Typescript while others require Javascript.
• Angular 2, React and Vue support cross-platform programming.
• Angular offer more features. But React and Vue get enhancement from additional libraries, which is authored and supported by community.
• From the metric above, Vue has the smallest community.

Read more on differences among these front-end Javascript frameworks.

You can use vue-cli to scaffold Vue.js projects.