one case of how to begin vuejs

088b1b43ff5dd64aa0f000da9e9da777?s=47 wtnabe
December 16, 2017
Programming
2
150

one case of how to begin vuejs

Kanazawa.rb meetup #64 で紹介した Vue.js の始め方

088b1b43ff5dd64aa0f000da9e9da777?s=128

wtnabe

December 16, 2017
Tweet

More Decks by wtnabe

See All by wtnabe
088b1b43ff5dd64aa0f000da9e9da777?s=48 wtnabe
0
150
088b1b43ff5dd64aa0f000da9e9da777?s=48 wtnabe
0
29
088b1b43ff5dd64aa0f000da9e9da777?s=48 wtnabe
0
43
088b1b43ff5dd64aa0f000da9e9da777?s=48 wtnabe
0
100
088b1b43ff5dd64aa0f000da9e9da777?s=48 wtnabe
0
110
088b1b43ff5dd64aa0f000da9e9da777?s=48 wtnabe
1
150
088b1b43ff5dd64aa0f000da9e9da777?s=48 wtnabe
0
130
088b1b43ff5dd64aa0f000da9e9da777?s=48 wtnabe
0
140
088b1b43ff5dd64aa0f000da9e9da777?s=48 wtnabe
0
74

Other Decks in Programming

See All in Programming
B7caf463b7dbc6c305ba290ec3c16521?s=48 eroispaziali
0
280
Db2247a5b4226e1f6f74a9bd87810090?s=48 hiroakis
3
480
2e7087b86608d4497c209eb9ba14d8f5?s=48 rosylilly
2
3.9k
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
0
160
770ede26fb450c104128e35ac37711fd?s=48 musaprg
0
690
9ae4f3862d4cb0771cfd36e43252f755?s=48 kurotanshi
0
210
C302e84057a922dce0ecbe80207e3fcc?s=48 mu_zaru
0
220
A87027204ff57be1dadbf36a78a73c1b?s=48 oboenikui
3
1.1k
4d78b749c315e21a956053dcbf0508a9?s=48 po3rin
1
120
B8403d102456248570005ee7fb2ba0f7?s=48 tooppoo
2
310
719435d98d452de7ac367c828266cf01?s=48 erikaheidi
4
3.4k
37618b4d60cf3d1f43f7196253264edc?s=48 numeroanddev
0
150

Featured

See All Featured
25c7c18223fb42a4c6ae1c8db6f50f9b?s=48 mojombo
353
62k
462dad0dd24c568a32dcdb0ae895ae1b?s=48 rasmusluckow
314
18k
282d599b414022eba5096510f675b6e2?s=48 chrislema
169
13k
24fc194843a71f10949be18d5a692682?s=48 gr2m
82
11k
Dad095ea7038f89f760419ce475d5d14?s=48 michaelherold
224
8.2k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
366
42k
E195ae45320d9202eaa01c9f1d31a416?s=48 marktimemedia
3
55
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
163
18k
2f5463832ccb768ccb4a1ca3607c27ef?s=48 jacobian
248
19k
D47656e20ff5e42f125fc5ea0fd636c6?s=48 tmm1
61
7.4k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
119
15k
5f50f94346fbcb23706f0707169317a4?s=48 aarron
253
36k

Transcript

  1. Vue.js @wtnabe Kanazawa.rb meetup #64 2017-12-16(Sat) at IT-Plaza MUSASHI

  2. Vue.js vue-devtools vue-cli runtime ( template ) data ( )

  3. Vue.js

  4. ※ Vue.js v2 v1

  5. Vue.js ES 5 compat ( since IE 10 / iOS

    6 / Android 4.4 ) Progressive JavaScript Framework React AngularJS 1 React JS-centric AngularJS 1 Web Components-centric ( Google ) template

  6. Component React Single File Component <template>, <script>, <style> Scoped CSS

    Shadow DOM ( Web Components ) {{ }} placeholder @ v- directive ViewModel
  7. None

  8. React class HelloMessage extends React.Component { render() { return (

    <div> Hello {this.props.name} </div> ); } } JavaScript JSX

  9. AngularJS 1 <html ng-app> ... <div> <label>Name:</label> <input type="text" ng-model="yourName"

    placeholder="Enter a name here"> <hr> <h1>Hello {{yourName}}!</h1> ng-directive

  10. Vue.js v2 <template> <p>{{ greeting }} World !</p> </template> <script>

    export default { data() { greeting: 'Hello' } } </script> JavaScript

  11. , props , etc JSX, v- , {{ }} ,

    etc

  12. Progressive

  13. None
  14. None

  15. Webpack ? Parcel ? Yarn ? Babel ? HMR ?

  16. Rail

  17. vue-devtools

  18. vuejs/vue-devtools: Chrome devtools extension for debugging Vue.js applications. developer tools

    Vue Component Tree Fire DOM
  19. None

  20. Vue.js mini ed debug

  21. Small Footprint

  22. vue-cli

  23. vuejs/vue-cli: Simple CLI for scaffolding Vue.js projects scaffold

  24. vue-cli Yarn Browserify + Browserify-HMR Babel + Babelify + vue-jsx

    Vue + Vueify npm-run-all sprintf-js

  25. fy JS import OK

  26. vue-cli OK

  27. None

  28. progressive

  29. template runtime

  30. Vue2.x template

  31. template https://jp.vuejs.org/v2/api/#template

  32. https://jp.vuejs.org/v2/guide/installation.html# https://jp.vuejs.org/v2/guide/installation.html# https://jp.vuejs.org/v2/guide/installation.html# - https://jp.vuejs.org/v2/guide/installation.html#

  33. template // Define a new component called todo-item Vue.component('todo-item', {

    template: '<li>This is a todo</li>' }) Single File Component
  34. None

  35. data function

  36. https://jp.vuejs.org/v2/guide/components.html#data - Vue 1 : data “ “

  37. 3 Vue.js Vue.js ― Web gihyo.jp … data function data

    Warning

  38. Vue warn var app = new Vue({ el: '#app', data:

    { message: 'Hello Vue!' } })

  39. var app = new Vue({ el: '#app', data: function() {

    return { message: 'Hello Vue!'; } } })

  40. 1. template runtime 2. data

  41. vue-cli Single File Component progressive

  42. Asset Bundling JS CSS jQuery plugin Flux

  43. None

  44. Enjoy Vue.js !!