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 full-size slide

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

    View full-size slide


  3. Vue.js v2
    v1

    View full-size slide

  4. 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 full-size slide

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

    View full-size slide

  6. React
    class HelloMessage extends React.Component {
    render() {
    return (

    Hello {this.props.name}

    );
    }
    }
    JavaScript
    JSX

    View full-size slide

  7. AngularJS 1

    ...

    Name:
    ng-model="yourName"
    placeholder="Enter a name here">

    Hello {{yourName}}!
    ng-directive

    View full-size slide

  8. Vue.js v2

    {{ greeting }} World !

    <br/>export default {<br/>data() {<br/>greeting: 'Hello'<br/>}<br/>}<br/>
    JavaScript

    View full-size slide

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

    View full-size slide

  10. Webpack ? Parcel ? Yarn ? Babel ? HMR ?

    View full-size slide

  11. vue-devtools

    View full-size slide

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

    View full-size slide

  13. Vue.js mini ed
    debug

    View full-size slide

  14. Small Footprint

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. fy JS
    import
    OK

    View full-size slide

  18. template runtime

    View full-size slide

  19. Vue2.x template

    View full-size slide

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

    View full-size slide

  21. 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 full-size slide

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

    View full-size slide

  23. data function

    View full-size slide

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


    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. 1. template runtime
    2. data

    View full-size slide

  29. vue-cli
    Single File Component
    progressive

    View full-size slide

  30. Asset Bundling
    JS CSS
    jQuery plugin
    Flux

    View full-size slide

  31. Enjoy Vue.js !!

    View full-size slide