$30 off During Our Annual Pro Sale. View Details »

チンパンジーでもわかるVue.js

 チンパンジーでもわかるVue.js

デジコン合宿

Fukuda Naoto

August 29, 2018
Tweet

More Decks by Fukuda Naoto

Other Decks in Technology

Transcript

  1. チンパンジーでもわかるVue.js

    View Slide

  2. そもそもVue.jsってなんぞや

    View Slide

  3. うるせ~~!
    知らね~~!

    View Slide

  4. これまでのWebページ
    .htmlファイルにHTMLを書く

    CSSで見た目を整える

    JS(またはJQuery)で動きをつけたりサーバとの通信したり

    View Slide

  5. Vue.jsだと
    なんかJSとHTMLがうまい感じにつながってくれる
    (双方向バインディング)

    View Slide

  6. とりあえず手を動かせ
    index.html





    チンパンジーでもわかるVue.js



    {{ message }}




    View Slide

  7. script.js
    const app = new Vue({
    el: '#app',
    data: {
    message: 'Hello Vue!'
    }
    })

    View Slide

  8. テキストボックスで双方向バインディングを
    感じろ


    {{ message }}

    View Slide

  9. クリックしたときのアクション



    削除
    {{ message }}

    const app = new Vue({
    el: '#app',
    data: {
    message: 'Hello Vue!'
    },
    methods: {
    deleteString: function(){
    this.message = '';
    }
    }
    })

    View Slide

  10. HTMLタグの属性に変数使いたくない?



    削除

    View Slide

  11. data: {
    message: 'Hello Vue!',
    maxLength: 20,
    }

    View Slide

  12. ここまでのディレクティブまとめ
    v‑on:イベント
    v‑bind:属性
    v‑model
    実はv‑onとv‑bindを組み合わせているだけ

    View Slide

  13. Q.いちいち書くのめんどくさい
    A.v‑onとv‑bindは短縮記法あるで

    削除

    削除

    View Slide

  14. 要素の表示・非表示を操れ
    methods: {
    deleteString: function(){
    this.message = '';
    },
    toggleVisible: function(){
    this.isVisible = !this.isVisible;
    }
    }
    {{ isVisible ? '
    非表示' : '
    表示'
    {{ message }}

    View Slide

  15. 超便利!配列を展開する

    {{ animal }}

    data: {
    message: 'Hello Vue!',
    maxLength: 20,
    animals:['
    チンパンジー','
    ゴリラ','
    サル']
    }

    View Slide

  16. ディレクティブまとめ
    v‑if
    trueで要素表示、falseで要素非表示
    v‑for
    配列の要素 in
    配列 で配列の文だけHTMLの要素が展開される

    View Slide

  17. まとめ
    Vue.jsはいいぞ
    Reactもいいぞ

    View Slide