webentwicklung-frage-antwort-db.com.de

VueJs Templating. So laden Sie externe Vorlagen

Ich bin neu bei Vue.js, ich habe AngularJS für einige Zeit verwendet und in Winkel haben wir Vorlagen geladen, wie

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

Wie können wir so etwas in Vue tun, anstatt große HTML-Schablonen in JavaScript wie diesem zu lassen,

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

Dies ist für kleine Vorlagen in Ordnung, aber für große Vorlagen ist dies praktisch?

Gibt es eine Möglichkeit, externe Vorlagen-HTML zu laden oder HTML-Vorlagen in einem Skript-Tag wie in Vue zu verwenden?

<script type="x-template" id="template>HTML template goes here</html>
51
rksh

Sie können die Skript-Tag-Vorlage verwenden, indem Sie einfach auf deren id verweisen.

{
  template: '#some-id'
}

Allerdings empfehle ich dringend die Verwendung von vueify (wenn Sie browserify verwenden) oder vue-loader (wenn Sie Webpack verwenden), damit Sie Ihre Komponenten in kleinen, kleinen .vue-Dateien wie diesem speichern können.

 vue file

Der Autor von Vue hat auch einen schönen Beitrag zum Thema externe Vorlagen-URLs geschrieben:

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

24
Bill Criswell

Sie können dies versuchen: https://github.com/FranckFreiburger/http-vue-loader

Beispiel: 

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

David, das ist ein schönes Beispiel, aber wie kann man am besten sicherstellen, dass das DOM kompiliert wird?

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

Wenn ich einen asynchronen Vorgang simuliere, wie im obigen Beispiel, funktioniert es. Sobald ich jedoch eine externe Seite "on the fly" lade, beschwert sich Vue, weil das DOM nicht bereit ist Genauer gesagt: Uncaught TypeError: Cannot set property 'vue' of undefined Gibt es einen besseren Weg, als dies zu tun? $compile aufrufen, wenn die Seite geladen wurde? Ich habe es mit $mount versucht, aber das hat nicht geholfen.

UPDATE: Egal, ich habe endlich herausgefunden, wie es geht:

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
        });
    });
});

Und in der eigentlichen Vorlage habe ich die entfernt 

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

tags und nur die HTML enthalten.

(Diese Lösung erfordert den http-Loader von https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.10/vue-resource.min.js )

11
swift

1. In Vue 2.x empfehle ich, die Konventionen einzuhalten, indem .vue-Dateien verwendet werden, stattdessen die Reihenfolge der Importe umzukehren:

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

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

und in einer separaten Datei

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

Dann in Ihrer Komponentenregistrierung

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

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

Auf diese Weise erhalten Sie das Beste aus beiden Welten und Sie müssen sich nicht zwingen, Vorlagen innerhalb eines Strings zu erstellen.

2. Wenn Sie träge laden möchten, gibt es in Vue 2.x offenbar eine Möglichkeit, dies zu tun

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

Dadurch wird helloworld.js (das den gesamten Code dieser Komponente enthält) auf Anforderung dieser Seite im Browser geladen.

Natürlich gehen alle oben genannten Dinge davon aus, dass Sie ES6 mit import-Fähigkeiten verwenden

1
ako977

Sie können diesen Ansatz mit Superagent verwenden:

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]);
    });

Legen Sie einfach Ihre <script>-Tag-basierte Vorlage in something.html auf Ihrem Server ab.

Wenn Sie jQuery verwenden, sollte .load funktionieren.

Stellen Sie nur sicher, dass dies abgeschlossen ist, bevor das betreffende DOM von Vue kompiliert wird. Oder verwenden Sie $ mount , um die Dinge manuell einzurichten.

0
David K. Hess

Ich habe http-vue-loader ausprobiert und es funktioniert gut. Diese Bibliothek ist einfach zu verwenden und bietet gute Dokumentation und Beispiele

Sie können Vorlagen zwar nicht direkt aus den Feldern laden, Sie können jedoch HTML-Dateien in separaten Einzelkomponenten speichern. Sie können sogar den <script>...</script>-Teil überspringen.

Verwendung (aus der Dokumentation des Laders)

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>

Beide Dateien sollten sich auf derselben Ebene in einem Ordner befinden

0
Andriy Lach

Verwenden Sie browserify, um alles wie folgt zu bündeln:

//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