![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfrastructure.osscons.jp]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。 -[[戻る>(MV*) UIフレームワーク#s4081e43]] *目次 [#r0d2cf9b] #contents *概要 [#bd370ad7] -Googleにおいて[[AngularJS>(MV*) UIフレームワーク#ac831ebe]]を使用した開発に携わった~ エヴァン・ヨーによって開発され、2014年2月にリリースされた。 -ヨーは~ >「[[Angular>(MV*) UIフレームワーク#ac831ebe]]の本当に好きだった部分を抽出して、~ 余分な概念なしに本当に軽いものを作ることができたらどうだろうか？」 >と考えていた。 *詳細 [#j47b6f85] **特徴 [#f2a99afb] -部分的に採用可能なアーキテクチャ（プログレッシブフレームワーク）を採用している。 -コアライブラリは、宣言的なレンダリングとコンポーネントの構成に焦点を合わせている。 -このスコープは[[React]]と、似ているが、~ [[React]]と違い、段階的に導入でき、学習コストが低い。 --スケール・アップ＆ダウンの柔軟性が高く機能拡大がしやすい。 --パッケージ・マネージャー、バンドラーを使用せず、~ CDNから直接的に読み込む「最小構成」を組める。 --以下の機能を部分的に使用できる。 ---データバインディング ---ディレクティブ ---コンポーネント ***テンプレート [#l6171c3c] [[Angular>(MV*) UIフレームワーク#ac831ebe]]と同様、基本的にはHTMLをベースとしたテンプレート言語を採用。 -テンプレートを[[仮想DOM>React#b5a85f5b]]レンダー機能にコンパイルする。 -HTMLの要素にデータを宣言的にバインドする。 ***リアクティブ [#v6fadee1] -モデルは単純なJavaScriptオブジェクトである。 -それらが変更されるとViewが更新される。 -状態管理は非常に容易で直感的である。 -このリアクティブ・システムは MVVM と依存追跡~ の分野における先駆者である[[Knockout>(MV*) UIフレームワーク#j66996af]]と似ている。 ***コンポーネント [#p159fc4b] -Vueの最も強力な機能の1つ -[[React]]との違い。 --コンポーネントの依存関係が描画中に自動的に追跡される。 --ネストされたコンポーネントに注意する必要はありません。 --ネストされたコンポーネントに注意する必要は無い。 ***トランジション [#se4d743e] -DOM から要素を取得したり削除するといった~ トランジションエフェクトを自動的に適用できる。 -以下のツールが含まれる。 --CSSトランジションとアニメーションのクラスを自動的に適用する --CSSアニメーションライブラリを統合する --トランジションフック中にJavaScriptを使用してDOMを直接操作する --JavaScriptアニメーションライブラリを統合する ***ルーティング [#h3e51817] -[[SPA>(MV*) UIフレームワーク]]はブックマークに保存したり、特定の記事へのリンクを共有することは不可能。 -この問題を解決するために、hashbang（#!）分割されたURLを提供している。 **トレンド [#adc36588] -2018年、GitHubスター数が、~ Backbone.js、[[AngularJS、Angular>(MV*) UIフレームワーク#ac831ebe]]、jQuery、[[React]]等、~ 他の歴史あるライブラリを上回った。 -日本ではVueは[[React]]と二分する人気があるが、今では、世界的に[[React]]が人気。 --2020年には、[[React]]、Vueの2強 --[[React]]がVueの2-3倍ほどの人気~ （GitHubでスターやnpmのダウンロード数など）。 -参考 --JSフレームワーク事情2020年始め｜erukiti｜note~ https://note.com/erukiti/n/na654ad7bd9bb *参考 [#vb2ee363] -Vue.js - Wikipedia~ https://ja.wikipedia.org/wiki/Vue.js -Vue.jsでWEBアプリ開発 | パソコン工房 NEXMAG~ https://www.pc-koubou.jp/magazine/23913 -JavaScript初心者でもVue.jsをはじめられます！~ はじめてみましょう！ - Platinum Data Blog by BrainPad~ https://blog.brainpad.co.jp/entry/2018/04/13/160000 **Qiita [#vf650ab7] -jQuery から Vue.js へのステップアップ~ https://qiita.com/mio3io/items/e7b2596d06b8005e8e6f -段階的にフロントエンド開発 with Vue~ https://qiita.com/tomlla/items/a54a6cf4b9ff6cb6e5b1 **jp.vuejs.org [#q683a5e4] https://jp.vuejs.org/index.html -ガイド --コンポーネントシステム~ https://012-jp.vuejs.org/guide/components.html --トランジションシステム~ https://012-jp.vuejs.org/guide/transitions.html --他のフレームワークとの比較~ https://jp.vuejs.org/v2/guide/comparison.html
