Upload
kuro-hsu
View
14.348
Download
5
Embed Size (px)
Citation preview
Agenda
• Vue.js
• Vue
• Vue
• Vue
• Class
•
• Vue
•
Vue.js
• JS /
• view
• view
•
• (SPA, Single Page Application)
MVVM (Model-View-ViewModel)
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
( 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/
filter• Vue.js {{ }}
| filter
• {{ 'abc' | capitalize }}==> Abc
• {{ 'abc' | uppercase }}==> ABC
• {{ 123456 | currency }}==> $123,456.00
Computed Properties
• {{ }}
view
• vue computed
Class and Style
class
Conditional & List Rendering
v-show
with template
v-if v-show
• v-if v-show DOM v-if
• v-show CSS (style)
• v-show
: track-by
v-for id Vue track-by
Event Handling
v-on
Modifiers
Transitions
Components
Components
• Component vue HTML
• HTML
❌
props
• scope
• prop .sync .once
null
• prop
• this.$parent this.$root
• this.$children ( ) this.$children v-if
v-ref
• $on()
• $emit()
• $dispatch()
• $broadcast()
• DOM Event callback
callback function return true
keep-alive
•
keep-alive
slot
• angular transclusion
• W3C web-components slot
• slot
Tools & Resources
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
Next,… Vue 2.0 !•
• Vue 1.0 API
• https://github.com/vuejs/vue/issues/2873
Thanks