私のデータベース Web アプリケーションでは、テーブルごとに 1 つずつ、非常に多くの異なるページが必要です。アプリケーションに含まれるページはユーザーごとに異なるため、事前にすべてのページを含めたくありません。これにより、必要以上に大きくなり、起動時に遅くなる可能性があるためです。
これまでの私のアプリケーションにはVue
、すべてのページのデータを保持するインスタンスが 1 つしかありません。それぞれのサブオブジェクトはdata
. vue-resource
データは(を使用して) JSON としてオンザフライで読み込まれる$http.get()
ため、起動時data
はかなり空です。
ここで、ページの HTML を動的にロードし、それらを既存のVue
インスタンスにバインドする方法が必要です。以前は jQuery でページを読み込んでいましたが、この Vue アプリケーションでこれを行うと、読み込んだページのコンテンツにデータがバインドされません。
Vue コンポーネントを調べましたが、これはページ全体ではなく、ページ上の反復可能な (小さな) 要素に適しているようですが、間違っている場合は修正してください。
vueify
、 、browserify
にも出くわしましWebpack
たが、これらは今の私には少し高度すぎるようです。以前に含まれていたように、いくつかの HTML を読み込んで Vue で使用したいだけです。
誰かがこれを行う正しい方法を説明してもらえますか?
アップデート
Vueパーシャルは解決策のようです:
あなたのHTMLファイルで:
<partial :name="currentModule"></partial>
そしてあなたのJavascriptで:
var moduleid = "page1";
var url = moduleid + ".html";
myvue.$http.get(url, function(data, status, request){
Vue.partial(moduleid, data);
myvue.currentModule = moduleid;
});
これはvue-resource
AJAX を使用しますが、これはjquery.ajax()
や他のものでも行うことができます。