one case of how to begin vuejs

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

Transcript

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

   View Slide

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

   View Slide

3. Vue.js
   

   View Slide

4. ※
   Vue.js v2
   v1
   

   View Slide

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
   

   View Slide

6. Component React
   Single File Component
   , , <style><br/>Scoped CSS<br/>Shadow DOM ( Web Components )<br/>{{ }}<br/>placeholder @ v-<br/>directive<br/>ViewModel<br/>

   View Slide

7. View Slide

8. React
   class HelloMessage extends React.Component {
   render() {
   return (
   
   Hello {this.props.name}
   
   );
   }
   }
   JavaScript
   JSX
   

   View Slide

9. AngularJS 1
   
   ...
   
   Name:
   ng-model="yourName"
   placeholder="Enter a name here">
   
   Hello {{yourName}}!
   ng-directive
   

   View Slide

10. Vue.js v2
    
    {{ greeting }} World !
    
    <br/>export default {<br/>data() {<br/>greeting: 'Hello'<br/>}<br/>}<br/>
    JavaScript
    

    View Slide

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

    View Slide

12. Progressive
    

    View Slide

13. View Slide

14. View Slide

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

    View Slide

16. Rail
    

    View Slide

17. vue-devtools
    

    View Slide

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

    View Slide

19. View Slide

20. Vue.js mini ed
    debug
    

    View Slide

21. Small Footprint
    

    View Slide

22. vue-cli
    

    View Slide

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

    View Slide

24. vue-cli
    Yarn
    Browserify + Browserify-HMR
    Babel + Babelify + vue-jsx
    Vue + Vueify
    npm-run-all
    sprintf-js
    

    View Slide

25. fy JS
    import
    OK
    

    View Slide

26. vue-cli OK
    

    View Slide

27. View Slide

28. progressive
    

    View Slide

29. template runtime
    

    View Slide

30. Vue2.x template
    

    View Slide

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

    View Slide

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#
    

    View Slide

33. template
    // Define a new component called todo-item
    Vue.component('todo-item', {
    template: 'This is a todo'
    })
    Single File Component
    

    View Slide

34. View Slide

35. data function
    

    View Slide

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

    View Slide

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

    View Slide

38. Vue warn
    var app = new Vue({
    el: '#app',
    data: {
    message: 'Hello Vue!'
    }
    })
    

    View Slide

39. var app = new Vue({
    el: '#app',
    data: function() {
    return {
    message: 'Hello Vue!';
    }
    }
    })
    

    View Slide

40. 1. template runtime
    2. data
    

    View Slide

41. vue-cli
    Single File Component
    progressive
    

    View Slide

42. Asset Bundling
    JS CSS
    jQuery plugin
    Flux
    

    View Slide

43. View Slide

44. Enjoy Vue.js !!
    

    View Slide