とにかくやってみる!Vue.jsに突入し隊

※.このページの内容はとにかく急いで勉強しているので、正確でないことが多々あります。こんな奴いるんだ程度に見てください。

何が何だかわからないので、とにかくやってみます。

初めてすぎて何が何だかわかんない!から公式サイトの説明をそのまま実行してみます。

まずは、さっと基本情報をみておきます。

Node.jsは、JavaScriptをサーバでも動かせるすごい環境です。

Node.js はスケーラブルなネットワークアプリケーションを構築するために設計された非同期型のイベント駆動の JavaScript 環境です。

Node.js とは | Node.js

Vue.jsは、ユーザーインターフェイスを構築するためのフレームワークです。

Vue (発音は /vju:/、view と同様) は、ユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他のモノリシックなフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。中核となるライブラリはビュー層だけに焦点を当てており、使い始めるのも、他のライブラリや既存のプロジェクトに統合することも容易です。

はじめに | Vue.js

プログレッシブフレームワークは、必要な時に必要な分だけ使えるようにしたフレームワークです。

プログレッシブフレームワークは,必要になった時に問題解決するライブラリを適宜導入して問題を解決するという姿勢を持っています。最初に始めるときは小さく,大規模になるにつれて適切なライブラリやツールを導入することで大きく対応できる柔軟性を持ちます。不必要な学習コストが発生することもありません。

第1回 プログレッシブフレームワーク Vue.js:Vue.js入門 ―最速で作るシンプルなWebアプリケーション|gihyo.jp … 技術評論社

f:id:ponsuke_tarou:20210131230209j:plain
豊島区の山の湯

Vue.jsをとにかくやってみる

とにかく突貫でやるので、Vue.jsはインストールせずにCDNを使います。

CDN

プロトタイピングや学習を目的とする場合は、以下のようにして最新バージョンを利用できます:

<script src="https://unpkg.com/vue@next"></script>

インストール | Vue.js

はじめに

はじめに | Vue.jsをやってみます。

ここで新しい属性が出てきました。v-bind 属性はディレクティブと呼ばれます。ディレクティブは Vue によって提供された特別な属性であることを示すために v- 接頭辞がついています。

はじめに | Vue.js

ひたすら読んで書き写して実行して各ディレクティブを体感しました。

ディレクディブ 意味 参考サイト
v-bind レンダリングされた DOM に特定のリアクティブな振る舞いを与える
v-on イベントリスナをアタッチしてインスタンスのメソッドを呼び出す
v-model フォームの入力とアプリケーションの状態を双方向にバインディングする
v-if ブロックを条件に応じて描画 条件付きレンダリング — Vue.js
v-for="要素 in 配列" 配列に基づいて、アイテムのリストを描画 リストレンダリング — Vue.j

アプリケーションインスタンス

dataのプロパティは、インスタンスが作成時に存在した場合にのみ リアクティブ (reactive) です。次のように新しいプロパティを代入すると:

vm.b = 'hi'

bへの変更はビューへの更新を引き起こしません。あるプロパティがのちに必要であることがわかっているが、最初は空または存在しない場合は、なんらかの初期値を設定する必要があります。

アプリケーションインスタンス | Vue.js

インスタンスのライフサイクル表がありました。頑張って覚えていきます。

https://v3.ja.vuejs.org/images/lifecycle.png

アプリケーションインスタンス | Vue.js