Vue.js はじめました

JavaScript のフレームワーク自体初めてなので、わーい!たのしー!Vue フレンズほしーみたいなゆるーい感じでやっていきます。新しい事勉強するのって面白いですよね(๑'ᴗ'๑)

Vue.js とは?簡単に言うと JavaScript のデータが変わると自動的に HTML 部分が書き換わるやつです。その他もろもろ機能はありますが一番の恩恵はやっぱりそのリアクティブシステムだと思います。

Vue.js について

本体機能はコンパクトでライブラリに近く必要に応じて機能を拡張する事ができます。

他にも色々フレームワークがあるので一通り HelloWorld してみたんですけど使った中では一番覚えやすそう&勉強するのが楽しそうな印象を受けました。実際覚えやすくて初心者にもオススメのライブラリみたいです!

React や Angular にも引けを取らない人気があり日本のコミュニティも活発です。公式ドキュメントも充実していて本体だけではなく拡張機能の日本語翻訳も進んでいるので必要な情報が手に入りやすいです。

Vue.js の学習メモ

使用している Vue.js のバージョンは 2.x です。

Vue.js と Firebase で簡単認証とルーターの設定

2017.05.20
Vue.js
Firebase の認証機能を使ってページの閲覧制限をかけたり認証状態で表示を操作します。

Vue.js と Vue-router でエフェクト付きのページ遷移

2017.05.14
Vue.js
Vue-router を使った SPA サイトのページ設計と遷移アニメーションを作ります。

Vue.js で非SPAのサイトもホットリロードで開発したい

2017.04.30
Vue.js
一度だけなら…とホットリロードを体験してしまうと依存スパイラルに陥り数秒のビルドにもイライラしはじめそれなしではいられない体になります。

Vue.js と Vuex を使った簡単なメンバー管理フォームを作る

2017.04.24
Vue.js
VuexとWebAPIを使ってメンバー管理フォームのコンポーネントを作ります。

Vue.js のカスタムディレクティブを使う

2017.04.12
Vue.js
カスタムディレクティブのお勉強します。

Vue.js の描画関数を使って Pjax を連携する

2017.04.07
Vue.js
SPA 化がつらいサイトで Vue と Pjax を一緒に動かす方法を模索してみました。

Vue.js で Vuex をかじりつつ遅延するフォームを作る

2017.03.20
Vue.js
状態管理・Vuexを勉強しながらフォームのコンポーネントを作ります。

Vue.js と Electron でタイマーアプリを作ったまとめ

2017.03.13
Vue.js
IndexVue.js はじめました Vue.js について Vue.js の学習メモ 前回 Electron と Vue.js

Vue.js を使って Electron でアプリを作る1

2017.03.06
Vue.js
Electron でアプリを作るので折角なので Vue を使ってみます。

Vue.js で watch と nextTick を使ってみる

2017.03.01
Vue.js
データの変更を監視するウォッチャと DOM に反映され後に処理をする nextTick を使います。

描画関数で画像ポップアップのコンポーネント

2017.02.23
Vue.js
ブログ記事中に使う画像ポップアップ用のコンポーネントを作ります。

Vue.js の非親子間コンポーネントでデータのやり取り

2017.02.20
Vue.js
親子間以外のコンポーネント同士でデータの操作を試す。

単一ファイルコンポーネントを使って開発環境を強化する

2017.02.18
Vue.js
Vue.js の単一ファイルコンポーネントを使えるようにします。

Vue.js のコンポーネントと親子間データの送受信

2017.02.16
Vue.js
コンポーネントを使ってサイトの部品を作っていきます。

Vue.js で条件つきで要素を表示・操作する

2017.02.15
Vue.js
v-if / v-show / 算出プロパティを使って条件によって要素や属性などの内容を切り替えます。

Vue.js で表示したデータの更新とイベント処理

2017.02.12
Vue.js
Vue.js を使って表示したデータをイベントを使って更新します。

Vue.js で文字やリストを動的に表示する

2017.02.10
Vue.js
Vue.js の導入と Vue を使ってテキストや配列などのデータを動的に表示します。