【再増枠】Vue.js入門 in CODE BASE

イベント内容

▼内容

ハンズオン形式でVue.jsのインストールから簡単なWebアプリ作成まで行います。

▼Vue.jsとは

Vue (発音は / v j u ː / 、 view と同様)はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てています。そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。また、モダンなツールやサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。

▼タイムスケジュール

時間 タイトル 発表者
18:30 開場
19:00 ご挨拶 ・自己紹介
19:30 Vue.js入門 鈴木
21:00 閉会

▼必要なもの

  • PC

鈴木 孝之(株式会社Re:Build)

1990年神奈川県生まれ。多摩大学経営情報学部卒。 文系の学部を卒業後、2013年に東京のITベンチャー企業にシステムエンジニアとして入社し、プログラミングを習得。 その後、株式会社フルスピードにwebエンジニアとして入社。フルスピードでは、大規模な広告配信サービスの管理画面開発を担当し、サーバサイド(php)からフロントエンド(JavaScript)まで幅広い開発に従事。また、社内では新卒研修も担当し、新人育成カリキュラムの作成や指導に携わる。2017年11月に沖縄で起業し、株式会社Re:Buildを設立。東京の企業様からの開発案件を請けつつ、自社Webサービスを開発中。 開発で使用する技術はPHP(Symfony2・Laravel5・CakePHP3)、JavaScript(AngularJS・Angular2~4・TypeScript・backbone.js)など。

講義内容 Vue.js入門

01 Vue.jsを使ってみよう

  • 公式サイトの確認
  • index.htmlの作成
  • main.jsの作成
  • Vue.jsの読み込み
  • styles.cssの作成

02 Vue.jsの基本をおさえよう

  • 双方向データバインディング
  • v-model

03 ToDoアプリを作ってみよう

  • データの用意
  • v-for

04 アプリの見た目を整えよう

  • アプリのスタイリング
  • ブラウザでの確認

05 v-onでイベントを設定しよう

  • addItemの実装
  • v-on
  • prevent

06 ToDoを削除できるようにしよう

  • deleteItemの実装
  • 動作確認

07 完了状態を管理してみよう

  • isDoneの追加
  • 既存コードの修正

08 v-bindでクラスを操作しよう

  • チェックボックスの追加
  • v-bind

09 v-ifで条件分岐をしてみよう

  • v-show
  • v-ifで条件分岐する際の注意点

10 算出プロパティを使ってみよう

  • 算出プロパティ
  • filter

11 完了したToDoを一括削除しよう

  • Purgeボタンの作成
  • purgeの実装
  • リファクタリング

12 LocalStorageでデータを永続化させてみよう

  • LocalStorage
  • watch
  • deep watcher

13 LocalStorageからデータを読み出してみよう

  • LocalStorageの確認
  • mounted

14 Componentに機能をもたせよう

  • Componentの登録
  • 動作確認

15 いいね!ボタンを実装してみよう

  • coutUpメソッドの実装
  • dataの用意

16 Propsで値を渡してみよう

  • props
  • デフォルト値や型の指定

17 $emitを使ってイベントを発火させよう

  • Componentから親要素へのデータ渡し
  • $emit

注意事項

※ こちらのイベント情報は、外部サイトから取得した情報を掲載しています。
※ 掲載タイミングや更新頻度によっては、情報提供元ページの内容と差異が発生しますので予めご了承ください。
※ 最新情報の確認や参加申込手続き、イベントに関するお問い合わせ等は情報提供元ページにてお願いします。