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
160
088b1b43ff5dd64aa0f000da9e9da777?s=48 wtnabe
0
37
088b1b43ff5dd64aa0f000da9e9da777?s=48 wtnabe
0
51
088b1b43ff5dd64aa0f000da9e9da777?s=48 wtnabe
0
110
088b1b43ff5dd64aa0f000da9e9da777?s=48 wtnabe
0
110
088b1b43ff5dd64aa0f000da9e9da777?s=48 wtnabe
1
150
088b1b43ff5dd64aa0f000da9e9da777?s=48 wtnabe
0
140
088b1b43ff5dd64aa0f000da9e9da777?s=48 wtnabe
0
140
088b1b43ff5dd64aa0f000da9e9da777?s=48 wtnabe
0
76

Other Decks in Programming

See All in Programming
44f37c1fe3a6a56376bb41a338741355?s=48 ahiru
3
300
7e0087a19318ded4ba2203187694740f?s=48 christianweyer
0
200
Fa5fd3405808cc6a9fe4b126b1ec39bd?s=48 gianarb
1
510
A513bc1fa519d2fcf5e4e0d9b5500101?s=48 psibi
1
130
C6296f654b1cc6886aabe5b9703cbe67?s=48 ishiitetsuji
1
640
6c6b60f0440e030040a9141cab781ed0?s=48 hiboma
0
450
26e1ba9a02729b2d6013604135221aae?s=48 yhara
0
160
1102d6e3810fcc652a8b2887d1642ade?s=48 47degacademy
0
210
3cfad86677c5966ecfe9b81955fa3489?s=48 youkan2002
0
180
D1dd88d67a1b17b9d2ad981b75d205f3?s=48 myamashii
1
630
Acb6390b6c4b5192f40e10601b63dafc?s=48 twkiiim
0
230
5bd19ec9172dcb6dd3cb8033d88b262e?s=48 rom1000
1
170

Featured

See All Featured
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
1
340
E837d2996f52008ace055a08fbfff992?s=48 frogandcode
123
20k
56c4053438af8e8b90d6f53cbb7573be?s=48 jakevdp
770
190k
11c84dff30266b907714802088852677?s=48 jasonvnalue
80
7.9k
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
12
1.3k
E6c6e133e74c3b83f04d2861deaa1c20?s=48 searls
202
35k
761be20b5ebd271008bcee1244fc5b52?s=48 matthewcrist
71
7k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
281
46k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
392
60k
64827b31aef81498662e8af4bd6d5157?s=48 jonrohan
1019
370k
C86443373fbfe92996aa882d0d7a59f8?s=48 imathis
479
150k
C1daf20e5c49ff910745198ef9869ac2?s=48 hatefulcrawdad
257
16k

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 !!