jQueryの時代はもう終わり?コンポーネントに分けてUIをコーディングできるVue.jsとは?

jQueryの時代はもう終わり?コンポーネントに分けてUIをコーディングできるVue.jsとは?

JavaScriptのフレームワークの一つとして、近年注目を浴びているVue.js。HTMLとJSファイルを「コンポーネント」と呼ばれる組み合わせに分解し、各ファイルを整理した形で記述ができます。

ウェブサイトの表示を動かしたり、アニメーションを付ける場合の主流としてはjQueryを利用することが多かったこと。けれど、HTML側に書かれたidやclassをベースとして、それぞれの処理がばらばらに描かれれるため、複数人や複雑な管理が難しかったこと。

Vue.jsでは、コンポーネントに統合し描いていけるため、記述を整理できることなどから注目を浴びている(そうです)。

ちょっと本の内容がハイレベルで理解できない部分が多かったですが、、、今後、勉強していきたい分野です。

ありがとうございました!

本のまとめ

▼読んだ本は?

■基礎から学ぶ Vue.js

▼Vue.jsってなに?

■javaScriptのフレームワークの一つ
■データバインディングと呼ばれる方法で、JS側に記述したデータと、HTML描画を同期させること
■名前が「v-」からはじまるものを「ディレクティブ」と呼ぶ
■コンポーネント:HTMLとJSをひとつのセットとして組み合わせたもの

▼コンポーネントとは?

■コンポーネント=設計図のようなもの
■「ヘッダー」「メニュー」などUI部品を、ひとかたまりにまとめたもの
■HTMLとJSをひとかたまりのファイルとして利用する
■設計図である「コンポーネント」から生み出されたものが「インスタンス」

▼Vue.jsの使い方は?

【1】Vue.jsをCDNで読み込む

【2】Vueインスタンスを作成する

▼テキストの描画方法は?

■HTML側

■JS側

▼クリックイベントの描画は?

■HTML側

■JS側

▼フォーム入力内容の描画は?

■HTML側

■JS側

▼オブジェクトの描画は?

■HTML側

■JS側

▼条件分岐で描画するには?

■HTML側

■JS側

▼アニメーションを描画するには?

■HTML側

■JS側

■CSS側

▼Vue.jsで使うオプションの種類は?

【1】el:マウントする要素

【3】computed:関数により算出したデータ

【4】created:ライフサイクルフック

【5】methods:アプリケーションで利用するメソッド

▼カウントを増やすには?

■HTML側

■JS側

▼クラスのデータバインディングは?

■HTML側

■JS側

▼オブジェクトでデータを引き渡すには?

■HTML側

■JS側

▼条件分岐を複数の要素に適用するには?

■HTML側

■JS側

▼要素を繰り返し描画するには?

■HTML側

■JS側

▼テンプレート共通で共通でコンポーネントを使うには?

■HTML側

■JS側

▼テンプレート内の指定場所だけでコンポーネントを使うには?

■HTML側

■JS側

▼VueCLIとは?

■Vue.jsアプリケーションの開発支援ツール
■1つ1つのコンポーネントを「.vue」ファイルで管理する
■開発が完了したモジュールは、VueCLIの機能を利用し、運用可能な形式(HTML・JavaScript・CSS)に変換する

▼VueCLIのインストール方法は?

■コマンドプロンプトからインストール
【1】旧バージョンのVueCLIをアンインストール

【2】node.jsをインストール
https://nodejs.org/ja/download/
【3】VueCLIをインストール

【4】VueCLIを立ち上げる

▼VueCLIの使い方は?

【1】VueCLIを立ち上げる
【2】プロジェクトを作成する
【3】「サーバー>タスクを実行」にて、ローカル環境で修正を行える
【4】「src/App.vue」ファイルを修正すると、リアルタイムで修正が反映される
【5】修正が完了したら、「dist」ディレクトリ内部にHTML・CSS・JSファイルが生成される
【6】生成された「dist」ファイル内部を、本番環境にアップロードすれば完了

関連する記事