「Vue JS入門決定版！jQueryを使わないWeb開発」サポートサイト

このページは、世界最大級のオンライン学習プラットフォームUdemy（ユーデミー）で公開している、「Vue JS入門決定版！jQueryを使わないWeb開発」の受講生の方向けサポートサイトです。

コースでしたサンプルコードを掲載しています。

エラーが発生した時に見比べたり、動作するソースコードをコピー＆ペースとして実行したいときなど、個人の学習用にご利用ください。
現在は、セクション2 「Vue.jsの基本的な使い方」のみコードを公開しています。

Vue.js 2.5.16 + Google Chrome最新版、にて動作確認をしております。その他の環境では動作が異なる場合があります。

埋め込みコードが見にくい場合は、お手数ですが「Edit in JSFiddle」リンクをクリックして、jsFiddleのWebサイトでご確認ください。

よくあるご質問

Q1. jsFiddleで、コメントアウトのショートカットを教えてください。
A1.
macOSの方は、

「command」 + 「/」

windowsの方は

「control」 + 「/」

Vue.jsの基本的な使い方

Vue.jsの読み込み

Vue.jsの開発バージョンと本番バージョン

Vueインスタンスの作成

ルートのテンプレートを作成

テキストのデータバインディング

dataオプションにオブジェクトや配列要素を設定

エラーを自力で解決する方法

属性のデータバインディング v-bind

条件分岐 v-if

条件分岐 v-show

繰り返しの描画 v-for

オブジェクトの繰り返し描画 v-for

イベントの基本 v-on

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

コンポーネント

演習：Vue.jsの基本的な使い方のまとめ①、②

実践演習：TODO管理アプリの開発

実践演習：Bitcoin価格表示アプリの開発 – API連携

注意事項

受講生の皆さんの個人的な学習にのみご利用いただけます。
営利・非営利問わず二次利用する行為を禁止します。