1. #
VueJS

2. Kuro Hsu
http://goo.gl/m8wuEQ

3. Agenda
VueJS
VueJS
Vuex
Vue Router
VueStrap
JWT + Auth0

4. VueJS
.vue

5. VueJS
MVVM

6. VueJS

7. VueJS
Lifecycle Hooks
init
created
beforeCompile
compiled
ready
attached
detached
beforeDestroy
destroyed

8. VueJS
index.html

9. VueJS
main.js

10. VueJS
vueApp
https://github.com/vuejs/vue-cli

11. VueJS
.vue
components
ng1.x Driective

12. VueJS
.vue
template
script
style

13. VueJS
.vue <template>
HTML
jade
jade-loader
mustache
*
{{{ HTML }}}
<template lang=“jade”>
<div>
<h1>{{ message }}</h1>
<p>{{ *message }}</p>
<p>{{{ messageRawHtml }}}</p>
<p class="message-{{ messageId }}"></p>
</div>
</template>
http://vue-loader.vuejs.org/en/index.html

14. VueJS
.vue <style>
CSS
scss/sass
sass-loader
scoped
<style lang=“scss” scoped>
$primary-color: #633;
.component {
color: $primary-color;
}
</style>
http://vue-loader.vuejs.org/en/index.html

15. VueJS
.vue <script>
script
coffee
coffee-loader
<script lang=“coffee”>
# Write your coffee script here.
# Coffee Script.
</script>
http://vue-loader.vuejs.org/en/index.html

16. VueJS
Kuro Hsu
http://goo.gl/m8wuEQ
閱

17. VueJS 2.0 ?

20. VueJS

21. VueJS
http://vuejs.org/guide/application.html

22. VueJS
API

23. VueJS
veux
superagent
vue-router
JWT + Auth0
scss/sass/jade
coffee or native JavaScript

24. Vuex
https://github.com/vuejs/vuex

25. Vuex

26. VueJS + Vuex
Flux, Redux
http://vuex.vuejs.org/zh-cn/index.html

27. https://github.com/vuejs/vuex
Vuex

28. Vuex
getters
state
mutations
actions
modules
store

29. Vuex

30. Vuex
getters
actions

31. Vuex
getters this.

32. Vuex
getters store
mutation

33. Vuex mutation
mutation
mutation-types.js
Vue getters

34. mutations。
utility.js 。
state。
mutations
mutation-types
state。
Vuex mutation

35. mutation
state。
dispatch
Vue.set
Stage 2*
* https://github.com/sebmarkbage/ecmascript-rest-spread
Vuex mutation

36. actions store
actions.js
Vuex actions

37. action mutations
action store
mutation
actions
Vuex actions

38. - middleware Vuex
-
Vuex middlewares

39. https://github.com/vuejs/vuex
Vuex

40. superagent
https://github.com/visionmedia/superagent
Ajax with less suck

41. superagent

42. Vuex + superagent
- actions
- API
- 。

43. action mutations
mutation
Vuex action + superagent

44. Vue-router
https://github.com/vuejs/vue-router

45. vue-router

46. VueJS + vue-router
Nested view
$router
$route
hooks

47. vue-router

48. vue-router
hashbang
history
abstract
root
linkActiveClass
saveScrollPosition
transitionOnLoad
suppressTransitionError
# HTML5 History

49. vue-router Nested
subRoutes

50. vue-router Nested
<router-view>
subRoutes
<router-view>

51. vue-router Pipeline
Pipeline hooks
data
activate
deactivate
canActivate
canDeacivate
canReuse
/foo/boo/qoo
/foo/goo/ooo
?

52. vue-router Hooks
data
route
activate
route
deactivate

53. vue-router Hooks
canActivate
canDeactivate
canReuse
true

54. vue-router Hooks
data, activate, deactivate
Promise Promise
canActivate, canDeactivate
Promise Boolean
canReuse Boolean

55. vue-router Hooks
http://router.vuejs.org/zh-cn/pipeline/index.html

56. vue-router Hooks
http://router.vuejs.org/zh-cn/pipeline/index.html

57. vue-router Hooks
http://router.vuejs.org/zh-cn/pipeline/index.html

58. vue-router APIs
start
stop
map
on
go
replace
redirect
alias
beforeEach
afterEach

59. VueStrap
https://github.com/yuche/vue-strap

60. VueStrap

61. VueStrap
angularStrap
VueJS
Bootstrap 3.x.x CSS

62. VueStrap

63. VueStrap

64. VueStrap

65. VueStrap
Bootstrap

66. JWT + Auth0

67. JWT + Auth0
JSON Web Token
PHP firebase/php-jwt
JWT+auth0 with VueJS https://goo.gl/gdf3H8

68. JWT + Auth0
Vuex actions Token
store
Token header Authorization
localStorage Token
Cookie

69. JWT + Auth0
https://goo.gl/gdf3H8

70. JWT + Auth0
https://goo.gl/gdf3H8

71. https://auth0.com/blog/2015/11/13/build-an-app-with-
vuejs/
https://yuche.github.io/vue-strap/
http://vuex.vuejs.org/en/index.html
http://router.vuejs.org/en/index.html
https://vuejs.org

72. Thanks