web-dev-qa-db-ja.com

VueJsテンプレート。外部テンプレートをロードする方法

私はVue.jsを初めて使用します。AngularJSをしばらく使用し、angularで次のようなテンプレートをロードしました。

template: '/sometemplate.html',
controller: 'someCtrl'

このようなことをVueで行うには、このようなJavaScript内に大きなHTMLテンプレートを保持するのではなく、

new Vue({
  el: '#replace',
  template: '<p>replaced</p>'
})

これは小さなテンプレートでは問題ありませんが、大きなテンプレートでは実用的ですか？

外部テンプレートHTMLをロードする方法、またはVueのようにスクリプトタグ内でHTMLテンプレートを使用する方法はありますか？

<script type="x-template" id="template>HTML template goes here</html>
javascriptjqueryangularjsvue.js
57
rksh

idを参照するだけで、スクリプトタグテンプレートを使用できます。

{
  template: '#some-id'
}

ただし、使用することを強くお勧めします vueify （browserifyを使用する場合）または vue-loader （webpackを使用する場合）ので、このような素敵な小さな.vueファイルにコンポーネントを保存できます。

vue file

また、Vueの著者は、外部テンプレートURLのトピックに関する素敵な投稿を書いています。

https://vuejs.org/2015/10/28/why-no-template-url/

28
Bill Criswell

これを試すことができます： https://github.com/FranckFreiburger/http-vue-loader

例：

 new Vue({
        components: {
            'my-component': httpVueLoader('my-component.vue')
        },
        ...
14
Franck Freiburger

David、これはいい例ですが、DOMがコンパイルされていることを確認する最良の方法は何ですか？

https://jsfiddle.net/q7xcbuxd/35/

上記の例のように非同期操作をシミュレートすると、動作します。しかし、「オンザフライ」で外部ページをロードするとすぐに、DOMの準備ができていないため、Vueが文句を言います。より具体的に：Uncaught TypeError: Cannot set property 'vue' of undefinedページがロードされたときに$compileを呼び出すよりも、これを行う良い方法はありますか？ $mountで試しましたが、それは役に立ちませんでした。

UPDATE：気にしないで、私は最終的にそれを行う方法を見つけました：

Vue.component('async-component', function (resolve, reject) {
    vue.$http.get('async-component.html', function(data, status, request){
        var parser = new DOMParser();
        var doc = parser.parseFromString(data, "text/html");
        resolve({
            template: doc
        });
    });
});

そして、実際のテンプレートでは、

<script id="someTemplate" type="text/x-template"></script>

タグとhtmlのみが含まれます。

（このソリューションには、 https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.10/vue-resource.min.js ）のhttpローダーが必要です。

11
swift

1. Vue 2.xでは、.vueファイルを使用することで慣習に従うことをお勧めしますが、代わりにインポートの順序を逆にします。

// template.vue
<template>
  <div class="helloworld">
      <h1>Hello world</h1>
  </div>
</template>

<script>
  import src from './src'
  export default src
</script>

そして別のファイルで

// src.js
export default {
  name: 'helloworld',
  props: {},
  ...
}

次に、コンポーネントの登録で

import helloworld from './helloworld/template.vue'

new Vue({
 components: {
 'helloworld': helloworld
},
...})

これにより、両方の長所を最大限に活用でき、文字列内にテンプレートを作成する必要がありません。

2.遅延読み込みが必要な場合は、Vue 2.xでそれを行う方法があるようです。

new Vue({
 components: {
 'helloworld': () => import(/* webpackChunkName: "helloworld" */ './helloworld/template.vue')
},
...})

これにより、ブラウザでそのページがリクエストされると、helloworld.js（コンポーネントのすべてのコードが含まれます）がロードされます。

もちろん、上記のすべては、import機能を備えたES6を使用していることを前提としています

2
ako977

http-vue-loader を試しましたが、うまくいきます。このライブラリは使いやすく、優れたドキュメントと examples を備えています。

Filedからテンプレートを直接ロードすることはできませんが、htmlを個別の単一ファイルコンポーネントに保持できます。 <script>...</script>部分をスキップすることもできます。

使用法（ローダーのドキュメントから）

my-component.vue

<template>
    <div class="hello">Hello {{who}}</div>
</template>

index.html

<!doctype html>
<html lang="en">
  <head>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/http-vue-loader"></script>
  </head>

  <body>
    <div id="my-app">
      <my-component></my-component>
    </div>

    <script type="text/javascript">
      new Vue({
        el: '#my-app',
        components: {
          'my-component': httpVueLoader('my-component.vue')
        }
      });
    </script>
  </body>
</html>

両方のファイルを同じレベルの1つのフォルダーに配置する必要があります

1
Andriy Lach

スーパーエージェントでこのアプローチを使用できます。

var promise = superagent.get("something.html")
    .end(function (error, response) {
        if (error) {
            console.error("load of something.html failed", error));
            return;
        }

        var parser = new DOMParser()
        var doc = parser.parseFromString(response.text, "text/html");
        document.body.appendChild(doc.scripts[0]);
    });

サーバー上の<script>内にsomething.htmlタグベースのテンプレートを配置するだけです。

JQueryを使用している場合、 。load が機能するはずです。

問題のDOMがVueによってコンパイルされる前に、これが完了することを確認してください。または、 $ mount を使用して、手動で設定します。

0
David K. Hess

Browserifyを使用して、次のようにすべてをバンドルします。

//Home.js

import Vue from 'vue';

var Home = Vue.extend({
    template: require('./Home.vue')
});

export default Home;

//Home.vue
<h1>Hello</h1>

// And for your browserify bundle use a transform called stringify

... .transform(stringify(['.html', '.svg', '.vue', '.template', '.tmpl']));
0
RaduM