このエントリーをはてなブックマークに追加

11月

21

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

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

Organizing : CODE BASE

Registration info

参加枠

Free

FCFS
27/20

Description

▼内容

ハンズオン形式で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

Presenter

Media View all Media

If you add event media, up to 3 items will be shown here.

Feed

鈴木孝之(カンボ)

鈴木孝之(カンボ) published 【再増枠】Vue.js入門 in CODE BASE.

10/29/2018 16:41

【沖縄】Vue.js入門 in CODE BASE を公開しました! 沖縄で主催します!!

Group

CODE BASE OKINAWA

Number of events 96

Members 625

Ended

2018/11/21(Wed)

19:00
21:00

開催日時が重複しているイベントに申し込んでいる場合、このイベントには申し込むことができません

Registration Period
2018/10/29(Mon) 16:41 〜
2018/11/21(Wed) 21:00

Location

株式会社プロトソリューション(第2ビル)

〒 901-2223 沖縄県宜野湾市大山 7-10-14 プロト宜野湾第2ビル 2F

Attendees(20)

Tyda

Tyda

Vue.js入門 in CODE BASE に参加を申し込みました!

HiroyukiKinjo

HiroyukiKinjo

Vue.js入門 in CODE BASEに参加を申し込みました!

ayaka_yamauchi

ayaka_yamauchi

Vue.js入門 in CODE BASEに参加を申し込みました!

ModoComodo

ModoComodo

vue.js入門 に参加を申し込みました!

Kose

Kose

vue.js入門に参加を申し込みました!

natsuho-kimura

natsuho-kimura

I joined vue.js入門!

ayumu_arasaki

ayumu_arasaki

vue.js入門 に参加を申し込みました!

pirox

pirox

vue.js入門 に参加を申し込みました!

Ryu

Ryu

【増枠】Vue.js入門 in CODE BASE に参加を申し込みました!

semnil

semnil

【増枠】Vue.js入門 in CODE BASEに参加を申し込みました!

Attendees (20)

Waitlist (7)

fu11gen

fu11gen

【再増枠】Vue.js入門 in CODE BASE に参加を申し込みました!

art52

art52

【再増枠】Vue.js入門 in CODE BASE に参加を申し込みました!

mai-yoshinaga

mai-yoshinaga

【再増枠】Vue.js入門 in CODE BASEに参加を申し込みました!

y-kuro

y-kuro

【再増枠】Vue.js入門 in CODE BASE に参加を申し込みました!

di-shiro

di-shiro

【再増枠】Vue.js入門 in CODE BASEに参加を申し込みました!

MinamiSaeki

MinamiSaeki

【再増枠】Vue.js入門 in CODE BASE に参加を申し込みました!

takuya-suzuki

takuya-suzuki

【再増枠】Vue.js入門 in CODE BASE に参加を申し込みました!

Waitlist (7)

Canceled (18)