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

one case of how to begin vuejs

wtnabe
December 16, 2017

one case of how to begin vuejs

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

wtnabe

December 16, 2017
Tweet

More Decks by wtnabe

Other Decks in Programming

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