Upgrade to Pro — share decks privately, control downloads, hide ads and more …

one case of how to begin vuejs

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

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
270
088b1b43ff5dd64aa0f000da9e9da777?s=48 wtnabe
0
51
088b1b43ff5dd64aa0f000da9e9da777?s=48 wtnabe
0
89
088b1b43ff5dd64aa0f000da9e9da777?s=48 wtnabe
0
160
088b1b43ff5dd64aa0f000da9e9da777?s=48 wtnabe
0
150
088b1b43ff5dd64aa0f000da9e9da777?s=48 wtnabe
1
200
088b1b43ff5dd64aa0f000da9e9da777?s=48 wtnabe
0
180
088b1b43ff5dd64aa0f000da9e9da777?s=48 wtnabe
0
140
088b1b43ff5dd64aa0f000da9e9da777?s=48 wtnabe
0
110

Other Decks in Programming

See All in Programming
652359244199b2b5108a5e09c027e0da?s=48 ykanazawa
0
130
F0a8d07597a19192791bf663504d2a17?s=48 atamaplus
0
400
Dc8d7b0277a1646d6842105241e8bef5?s=48 peacock0803sz
0
180
119659c28d16f22d01eb48a6f3ee1391?s=48 iwatatomoya
0
3.1k
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
180
438799c739f93d00abc30fa2da33c543?s=48 rukiadia
2
220
E7526ec3e801f8ba99f6746498a154a6?s=48 rakyll
1
1.2k
933291444e456bfb511a66a2fa9c6929?s=48 j5ik2o
1
490
Ee4cc84c4dedde009c013c6d5f1a2e84?s=48 tatchnicolas
2
100
7602f2751868682b296171f58589c851?s=48 lyrixx
2
100
Cb88f765dd38cd942c39aacb5abbea06?s=48 ufoo68
0
110
Ce7ab424f600bc83740be0716232d58a?s=48 takaakikakei
0
480

Featured

See All Featured
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
443
29k
C51b39fa3c79ccb99dcb8a076bc98287?s=48 brianwarren
88
5.3k
C4de88ea47538e4594750e3861a341c8?s=48 brettharned
96
3.3k
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
78
270k
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
15
1k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
74
1.7k
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
99
15k
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
6
940
A415db3ac9e9668acbc1fb36eead84ac?s=48 mthomps
44
2.5k
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
67
4.5k
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
122
8.2k
F716e5f737fcfb03f2cf8d1a184f1dbe?s=48 nonsquared
84
3.6k

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