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

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

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

Hamamatsu.js#3 発表資料

euledge

May 19, 2018
Tweet

More Decks by euledge

Other Decks in Technology

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