春だから始めようVue.js/2018-spring-hamamatsujs-3-vuejs

Hamamatsu.js#3 発表資料

Transcript

1. 春だからはじめようVue.js
   @euledge
   Hamamatsu.js #3
   

   View Slide

2. 自己紹介
   氏名 黒柳 仁 (@euledge)
   今までの開発 Windows(イントラ向けDesktop,Web)
   AIX(イントラ向け Motif GUI)
   CAD,PLMカスタマイズ
   BtoC Webサイト
   環境構築 Vagrant,Ansible,Docker
   経験した言語 C++, Java, Rails, PHP
   

   View Slide

3. 本日の内容
   • 私がVue.jsを使いだしたきっかけ
   • Vue.jsの基本を紹介
   • Vue.jsで開発するときに知ってると便利なこと
   

   View Slide

4. 初心者でも学習コストが低いこと
   

   View Slide

5. 再利用可能なコンポーネント可能
   

   View Slide

6. 日本語の情報が得られること
   

   View Slide

7. Javascript Frameworkの選定
   

   View Slide

8. Github Starsトレンド
   React
   Vuejs
   Angular
   

   View Slide

9. View Slide

10. View Slide

11. Vue.jsとは
    メインコミッター Evan You
    

    View Slide

12. ライブコーディングやってみる
    

    View Slide

13. Vueはじめるにはここから
    

    View Slide

14. 条件レンダリング
    

    View Slide

15. 繰り返し
    

    View Slide

16. クラスと属性のバインディング
    

    View Slide

17. 算出プロパティ
    

    View Slide

18. フォーム入力バインディング
    

    View Slide

19. イベントとメソッド
    

    View Slide

20. コンポーネント
    

    View Slide

21. 単一ファイルコンポーネント
    詳しくは
    https://jp.vuejs.org/v2/guide/single-file-
    components.html
    

    View Slide

22. 他のライブラリの併用
    

    View Slide

23. Vue.jsもっと知りたい?
    

    View Slide

24. https://jp.vuejs.org/
    

    View Slide

25. http://gihyo.jp/dev/serial/01/vuejs/0001
    

    View Slide

26. https://www.amazon.co.jp/dp/B07BS62Z94
    

    View Slide

27. https://www.amazon.co.jp/dp/4863542453
    

    View Slide

28. 今日からVue.jsやってみたくなった?
    

    View Slide

29. https://jsfiddle.net
    

    View Slide

30. https://codesandbox.io
    

    View Slide

31. VSCode 拡張機能 vue スニペット
    

    View Slide

32. VSCode 拡張機能 browser sync
    

    View Slide

33. Vue.js devtools
    

    View Slide