Vue.js 学びはじめ

Vue.js

今後触れていくことが多くなっていくため、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.jsでjQueryと共存させる方法 - Qiita
今回、Vue.jsをなんとか覚えようと思って頑張ってみました。巷でよく「デザイナーでもとっつきやすいVue.js」とありますが、私の場合、アニメーションなどのDOM操作を中心にjQueryを使用し…

・各 Vue インスタンスを生成時、ライフサイクルフックと呼ばれる関数が実行されて
 いおり、タイミングに応じて処理を入れることができる
 mounted、 updated、destroyed辺りがよく使われる(らしい)

Vue インスタンス — Vue.js
Vue.js - The Progressive JavaScript Framework

・仮想DOMという概念があり、 変更のあった箇所の差分のみを変える

・名前を付けれて繰り返し使うことのできるVueインスタンスをcomponentという。
 componentの登録としては、グローバルとローカルの2種類ある

・SPA(シングルページアプリケーション)を作成したい場合は、Vue Routerを使う

・規模が大きくなり、複数のコンポーネント間で値を共有したい場合、状態管理として
 Vuexを用いられることがある

まだまだ学びはじめ

「かくあるべし」な記述や導入が明確に決まっているというより、
プロジェクトによって使い方を自在にできる柔軟なフレームワークという印象を受けました。

コメント

タイトルとURLをコピーしました