[npm]Vue.jsとはVue.jsはプログレッシブフレームワーク思想のUIフレームワークです。言うと「状況に応じて柔軟に拡張できるフレームワーク」という感じでしょうか。Evan氏は「アプリの複雑性とフレームワークの複雑性」という言葉で説明していますが、作るものに応じて使う道具も最適になっているのがベストです。フレームワークの制約によって作るものに制限がかかってしまうと本末転倒です。Vueの基本的なルールはイージーなので、学習コストが低く小さなアプリであればすぐに作ることができます。大規模アプリでもコンポーネントの利用やFluxライブラリの導入、Nuxt.jsなどのアプリケーションフレームワークの導入など様々な拡張が可能です。CDN経由で配布されているjsでVueのイージーさを実感してみましょう。前回作成したindex.html.twigにVue.jsを追加します。Vue.jsの開発バージョンと本番バージョンCDN配布のVue.jsは「開発用」と「本番用」の2つのバージョンが存在します。今回のサンプルはエラーを確認しやすいように開発用を読み込んでいますが、本番環境では以下のスクリプトを設定してください。Vueオブジェクトから見ていきましょう。elは、Vueのレンダリングを行うDOMエレメントを指定します。今回はtarget-containerを指定しているので、Vueの影響範囲はtarget-containerのdiv内に限られます。Vueモデルのコアとなる部分です。DOMとこのdataがバインドされることにより、リアクティブなWebページを作成することができます。次はHTML部分を見ていきましょう。Vueのバインド構文です。v-textで指定したtitleがh1のテキストとして設定されます。Vueのバインド構文で、双方向バインディングが可能になります。今回はテキストボックスなので、文字入力とmessageが互いに結びつきます。最後はテンプレート構文でmessageを直接設定します。テンプレート構文を変更しているので注意してください。アクセスしてみましょう。テキストフォームの文字列を変更すると、messageも連動して書き換わります。Encoreを利用した場合の開発について解説します。Encoreの導入Symfonyのコントローラ作成Vue.jsことはじめはじめてのwebpackパッケージングVueコンポーネントVue.jsで作る電卓アプリ1Vue.jsで作る電卓アプリ2。