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
170

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
210
088b1b43ff5dd64aa0f000da9e9da777?s=48 wtnabe
0
45
088b1b43ff5dd64aa0f000da9e9da777?s=48 wtnabe
0
76
088b1b43ff5dd64aa0f000da9e9da777?s=48 wtnabe
0
120
088b1b43ff5dd64aa0f000da9e9da777?s=48 wtnabe
0
120
088b1b43ff5dd64aa0f000da9e9da777?s=48 wtnabe
1
170
088b1b43ff5dd64aa0f000da9e9da777?s=48 wtnabe
0
140
088b1b43ff5dd64aa0f000da9e9da777?s=48 wtnabe
0
140
088b1b43ff5dd64aa0f000da9e9da777?s=48 wtnabe
0
77

Other Decks in Programming

See All in Programming
67de06c6cee3ece0f56494e91e48117e?s=48 tkitsunai
6
2.6k
588a291ce25b07e836ae5df8911eaf18?s=48 tdak
0
250
09923d8b0c79423a289b7d5dc31a59e4?s=48 mururu
3
1.2k
0d4ef9af8e4f0cf5c162b48ba24faea6?s=48 ept
0
120
091c8449decb2f3549c695b5f903865a?s=48 sh_akira
3
200
1a517fb4f2fe1ad4c6bbfc0cbb17ba10?s=48 kasai441
0
250
4a290dbd4f1c19bf2f25c2a230faf1bf?s=48 shirotamaki
0
230
A760a90c9afd981004343b9861f1e8b4?s=48 daipresents
0
160
8847086af047cbf895ab3277b59529fe?s=48 andpad
1
200
52cc8a838bf44a589d2572833b2dd1b9?s=48 palkan
3
790
A0aae1297a0593c1316abdcdb4131e3a?s=48 toedter
0
210
7867fe52a9be4257508a516d4df61578?s=48 tkmnzm
1
310

Featured

See All Featured
E6c6e133e74c3b83f04d2861deaa1c20?s=48 searls
204
38k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
495
110k
A415db3ac9e9668acbc1fb36eead84ac?s=48 mthomps
40
2.4k
Bfd6b681ec6e8c9bef82ff0521c364f7?s=48 kastner
54
2k
A9179349dd2bdc67f377719f56d85656?s=48 garrettdimon
289
110k
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
23
1.3k
E195ae45320d9202eaa01c9f1d31a416?s=48 marktimemedia
8
500
A0517b08532aec8ab2aae3f65d40ad86?s=48 hannesfritz
29
990
5b6a2bd86ef643786a381a212e0ef2f1?s=48 geoffreycrofte
29
1.2k
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
188
14k
C7393b7ba7ec9c8890dd77d209fbb3c9?s=48 maltzj
502
36k
7fa6101cd43067653cf4ac6c7ca54305?s=48 akmur
252
19k

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