Vue.js: Introduction

@ Rakuten Taiwan weekly meetup

Agenda

  • Vue.js: History
  • First Look
  • Vue.js: Setup
  • Vue.js: Overview
  • Vue.js: Lifecycle
  • Comparison to Other Frameworks
  • Comparison Vue 1.x & 2.0
  • Resources

Vue.js: History

Vue.js: History (Cont.)

First Look

Examples from Official site

First Look (Cont.)

First Look (Cont.)

Vue.js: Setup

Use the official scaffolding cli tool - vue-cli 

$ npm install -g vue-cli
$ vue init <template-name> <project-name>
$ vue init webpack <project-name>
$ cd <project-name>
$ npm i
$ npm run dev

Vue.js: Setup (Cont.)

  • webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.

  • webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.

  • browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.

  • browserify-simple - A simple Browserify + vueify setup for quick prototyping.

  • simple - The simplest possible Vue setup in a single HTML file

Core Concepts

  • Declarative & Reactive Rendering

 

  • Component Oriented Architecture

Vue.js: Overview

Declarative & Reactive Rendering

MVVM

Vue.js: Overview (Cont.)

Declarative & Reactive Rendering

Vue.js: Overview (Cont.)

Vue.js: Overview (Cont.)

Declarative & Reactive Rendering

Component Oriented Architecture

Vue.js: Overview (Cont.)

Component System

Component Oriented Architecture

Vue.js: Overview (Cont.)

<div id="app">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>

Vue.js: Lifecycle

Vue.js: Lifecycle

new Vue({
  init, // Vue instance 被初始化後立刻執行,
        // 在資料綁定還有 event/watcher 啟動前
  created, // Vue instance 被創造後執行。此時,
           // instance 已經將 options 處理過,
           // 意思是以下的動作都已經被執行/啟動了:
           // data observation,
           // computed properties,
           // methods,
           // watch/event callbacks。
           // 但是, DOM 尚未被編譯, 還有還無法取得 $el 屬性。
  beforeCompile, // 在編譯 DOM 前執行
  compiled, // 在 DOM 編譯完後執行。 此時,
            // 所有的 directives 已經綁定完成了,
            // 所以此時若資料變動時會觸發 DOM 更新。
            // 然而, 不保證 $el 已經被加入 document 了。
  attached, // 在 vm.$el 被附加到 DOM 或是
            // 透過 VM instance 的方法 (例如: $appendTo()) 後執行。
            // 直接操作 vm.$el 不會觸發這個 hook。
  ready, // 在 DOM 編譯完成後執行,
         // 此時 $el 已經被第一次加入 document。
         // 也就是說,在第一次 attached hook 被執行後立刻執行 ready hook。
         // 注意:在這邊的 insertion 必須藉由 Vue 來觸發 ready hook
         // (透過 vm.$appendTo() 之類的方式或是更新 directive)。
})

Vue.js: Lifecycle

new Vue({
  detached, // 在 vm.$el 從 DOM 中移除或是
            // 透過 VM instance 的方法 (例如: $remove()) 後執行。
            // 直接操作 vm.$el 不會觸發這個 hook。
  beforeDestroy, // Vue instance 被銷毀前執行。
                 // 此時 Vue instance 的功能都還能用
  destroyed, // Vue instance 已經被銷毀後執行。
             // 當這個 hook 被呼叫時,所有的綁定、 directives
             // 對於 Vue instance 的綁定、還有子 Vue instance 的綁定都已經被註銷。
             // 注意:如果有 leaving transition 動畫的話,
             // destroyed hook 會在 transition 結束後才執行。
})

Comparison to Other Frameworks

Blog post from Vue.js official site

Comparison to Other Frameworks (Cont.)

Angular 1.x

Comparison to Other Frameworks (Cont.)

Angular 2

Comparison to Other Frameworks (Cont.)

React

Comparison b/w 1.x & 2.0

Different in Lifecycle

Ref: 2.0 Change @ Github issue

Comparison b/w 1.x & 2.0

Actual DOM v.s.  Virtual DOM

Comparison b/w 1.x & 2.0

Actual DOM v.s.  Virtual DOM

Comparison b/w 1.x & 2.0

Actual DOM v.s.  Virtual DOM

Summary

Pros

  • Simple API
  • Easy to learn
  • Better performance
  • Vue Component
  • Focus on View layer, same as React

Cons

  • Should use Vuex for complex application
  • Vue.js 2.0 still WIP

Resources

Q & A

Made with Slides.com