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

11月

21

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

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

主催 : CODE BASE

ハッシュタグ :#Vue.js #Vue #入門 #沖縄
募集内容

参加枠

無料

先着順
34/20

イベントの説明

▼内容

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

発表者

資料 資料をもっと見る/編集する

資料が投稿されると、最新の3件が表示されます。

フィード

鈴木孝之

鈴木孝之 さんが Vue.js入門 in CODE BASE を公開しました。

2018/10/29 16:41

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

グループ

CODE BASE

イベント数 69回

メンバー数 461人

開催前

2018/11/21(水)

19:00
21:00

イベントに申し込むには
ログインしてください

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

募集期間
2018/10/29(月) 16:41 〜
2018/11/21(水) 21:00

会場

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

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

参加者(20人)

Tyda

Tyda

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

HiroyukiKinjo

HiroyukiKinjo

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

ayaka_yamauchi

ayaka_yamauchi

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

puremoru

puremoru

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

ModoComodo

ModoComodo

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

kousy

kousy

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

natsuho-kimura

natsuho-kimura

I joined vue.js入門!

ayumu_arasaki

ayumu_arasaki

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

pirox

pirox

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

Ryo-Nakamine

Ryo-Nakamine

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

参加者一覧(20人)

補欠者(14人)

The_Na_Ka

The_Na_Ka

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

MISHIHARA

MISHIHARA

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

goblin7283

goblin7283

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

umibudou00

umibudou00

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

_may_six

_may_six

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

Mami Miyagi

Mami Miyagi

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

TakumaTokumoto

TakumaTokumoto

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

pomme2deborder

pomme2deborder

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

ArataSashida

ArataSashida

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

mai-yoshinaga

mai-yoshinaga

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

補欠者一覧(14人)

キャンセルした人(9人)