今後触れていくことが多くなっていくため、Vue.jsを学習中なのですが、
初めて知ったことを整理してみました。
Vue.jsについて
・Reactと比較すると、素のJavaScriptの書き方より、独特な記法を使ってい傾向(らしい)。HTMLファイルのように記述ができるのでReactより学習コストは低い(らしい)
・CDNでも読み込みすることが可能
・JSファイルでVue.JSを使うこともできるが、本格的に機能をつけていく場合、
Vue CLIを使えばコードの軽量化やビルドができる。
LaravelなどバックエンドのFWに織り込むことも可能
・バージョン毎に記述が変わる
バージョンをアップデートしただけでは古い記述の分は動かなくなるので注意が必要
記述について
・Vueインスタンスを作成することで各処理がなされる
var vm = new Vue({
// ここに記述
})
・テンプレート構文を書く
テンプレート構文はHTMLのようだが、HTML文を記載しているわけではなく、
Vue.jsが最終的にHTMLを出力している
<span>Message: {{ msg }}</span>
・ディレクティブという独自のタグがある
よく使うディレクティブとしては
・v-bind
・v-on
・v-if
・v-for
など。カスタムで自分で作成することも可能
・Vue.jsファイルの中でJavaScriptやjQueryを記述することも可能
こちら参考になりました。
・各 Vue インスタンスを生成時、ライフサイクルフックと呼ばれる関数が実行されて
いおり、タイミングに応じて処理を入れることができる
mounted、 updated、destroyed辺りがよく使われる(らしい)
・仮想DOMという概念があり、 変更のあった箇所の差分のみを変える
・名前を付けれて繰り返し使うことのできるVueインスタンスをcomponentという。
componentの登録としては、グローバルとローカルの2種類ある
・SPA(シングルページアプリケーション)を作成したい場合は、Vue Routerを使う
・規模が大きくなり、複数のコンポーネント間で値を共有したい場合、状態管理として
Vuexを用いられることがある
まだまだ学びはじめ
「かくあるべし」な記述や導入が明確に決まっているというより、
プロジェクトによって使い方を自在にできる柔軟なフレームワークという印象を受けました。
コメント