第一次用 vue.js 就愛上 [改]
TRANSCRIPT
Agenda
• Vue.js
• Vue
• Vue
• Vue
• Class
•
• Vue
•
Vue.js
• JS /
• view
• view
•
• (SPA, Single Page Application)
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/
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-show
with template
v-if v-show
• v-if v-show DOM v-if
• v-show CSS (style)
• v-show
http://goo.gl/z0CcH3
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
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
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