Kuro Hsu kurotanshi@gmail.com

Vue.js 改

• Kuro Hsu • @

• http://kuro.tw

• kurotanshi [at] gmail.com

Agenda

• Vue.js

• Vue

• Vue

• Vue

• Class

•

• Vue

•

Vue.js

• JS /

• view

• view

•

• (SPA, Single Page Application)

10 vue.js

http://goo.gl/RVQwop

MVVM (Model-View-ViewModel)

http://goo.gl/8n2bGr

Vue.js

vue.js

vue-cli

$ npm install -g vue-cli

$ vue init webpack-simple [project name]

$ cd [project name]

$ npm install

$ npm run dev

Properties & Methods

: VUE.JS ( ) https://goo.gl/s3livG

( root instance )

Vue

Vue.js IE8

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

AngularJS 1.x

ReactJS

Lifecycle Vue

• init

• created

• beforeCompile

• compiled

• ready

lifecycle hooks

• attached

• detached

• beforeDestroy

• destroyed

• init

• created

• beforeCompile

• compiled

• ready

• attached

• detached

lifecycle hooks in Vue 2.0• beforeDestroy

• destroyed

• beforeMount

• mounted

• beforeUpdate

• updated

• activated

• deactivatedref: https://github.com/vuejs/vue/issues/2873#upgrade-tips

Data Binding

• Vue mustache template {{ }}

<span>Message: {{ msg }}</span>

: {{* msg }}

HTML : {{{ raw_html }}}

HTML : <div id="item-{{ id }}"></div>

• {{ var a = 1 }}

• {{ if (ok) { return message } }}

• {{ number + 1 }}

• {{ ok ? 'YES' : 'NO' }}

• {{ msg.split('').reverse().join('') }}

computed

directives

angularJS Vue.js

directive

( ) http://cn.vuejs.org/api/

v-model

http://goo.gl/SWbcKb

v-bind

http://goo.gl/dk0rZC

filter• Vue.js {{ }}

| filter

• {{ 'abc' | capitalize }}==> Abc

• {{ 'abc' | uppercase }}==> ABC

• {{ 123456 | currency }}==> $123,456.00

Computed Properties

• {{ }}

view

• vue computed

http://goo.gl/sHkYqF

Class and Style

class

http://goo.gl/xqJgp9

Conditional & List Rendering

v-if / v-else

http://goo.gl/HJt73r

v-show

with template

v-if v-show

• v-if v-show DOM v-if

• v-show CSS (style)

• v-show

v-for

http://goo.gl/BwuHYB

http://goo.gl/z0CcH3

v-for with object

http://goo.gl/Ela7PF

v-for with range

http://goo.gl/9ggJ5F

v-for with filter

http://goo.gl/nxw9I3

http://goo.gl/KRsMPM

http://goo.gl/IPwiib

: track-by

v-for id Vue track-by

Event Handling

v-on

http://goo.gl/Gf9hCL

Modifiers

Transitions

http://goo.gl/Ws0e2v

transition with jQuery animate

http://goo.gl/g4xRXt

Components

Components

• Component vue HTML

• HTML

❌

props

• scope

• prop .sync .once

http://goo.gl/52SIzs

null

• prop

• this.$parent this.$root

• this.$children ( ) this.$children v-if

v-ref

http://goo.gl/umMf39

• $on()

• $emit()

• $dispatch()

• $broadcast()

• DOM Event callback

callback function return true

http://goo.gl/phpbDQ

:is

http://goo.gl/K0Zrps

keep-alive

•

keep-alive

http://goo.gl/lErGx4

slot

• angular transclusion

• W3C web-components slot

• slot

http://goo.gl/vmxj9G

Tools & Resources

Vue.js dev-toolshttps://goo.gl/T6Fvtu

Vue-clihttps://github.com/vuejs/vue-cli

vue-cli

$ npm install -g vue-cli

$ vue init webpack-simple [project name]

$ cd [project name]

$ npm install

$ npm run dev

HTML

Script

Style

Vue file

Awesome Vue.jshttps://github.com/vuejs/awesome-vue

Next,… Vue 2.0 !•

• Vue 1.0 API

• https://github.com/vuejs/vue/issues/2873

Thanks