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

デジコン合宿

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